Houssein Djirdeh - SeattleJS Conference 2017

on YouTube ↗33m

" summary

Explains the PRPL pattern and shows concrete tooling: use preload/prefetch and the preload-webpack plugin to prioritize assets, avoid blind h2 server push (pushing everything slows loads; pushing CSS helps most; Chrome warns if a preload is unused after three seconds), generate service workers with Workbox to cache an app shell and use runtime caching strategies, and split bundles (examples range from ~4 KB to 145 KB) with webpack or framework lazy-loading. Demonstrates Lighthouse, WebPageTest, and CI bundle checks; combining h2 push plus a service worker speeds both first and repeat visits.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 7:40Firebase
3. 11:08PUSH critical resources
4. 11:35Service workers
5. 12:05Workbox
6. 14:27APPLICATION SHELL
7. 17:45DYNAMIC CONTENT
8. 22:04BUNDLES
9. 26:12Progressive Web
10. 27:48TIME TO INTERACTIVE

" related talks

• 21mThinking PRPLHoussein Djirdeh · .concat() 2018
• 30mOnce you go PRPL...Houssein Djirdeh · Full Stack Fest 2017
• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 32mIt’s Time to Join the Fantastic Four of the WebNoël Macé · Best of Web 2019
• 37mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · XtremeJS 2023
• 24mSuperpowers of browser's Web APINikola Mitrovic · DevWorld 2024
• 02h 21mUnlocking Progressive Web ApplicationsTamas Piros · JSConf.Asia 2019
• 38mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · NDC Porto 2023