The Browser Hackers Guide To Instantly Loading Everything
summary
Browser internals matter: average mobile page in 2017 takes ~16s to interactive, sends ~420–450KB JS, and desktop-focused frameworks blow mobile startup. Practical fixes: code splitting and Babel preset‑env cut bytes and parse time; HTTP/2 Server Push and link rel=preload move downloads earlier (push cuts an RTT but isn’t cache‑aware); Service Worker + Purple pattern makes repeat loads hundreds of milliseconds and even seconds faster. Measured wins include ~20% from preload scanner, 36% from preload, 18% DNS prefetch, requestIdleCallback 4× render improvement, and repeat visits down from 6.1s to 1.49s.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:13Why does this matter
- 2:34Testing on real phones
- 3:39How to load efficiently
- 5:22Code coverage
- 6:46ES2015 modules
- 7:04Network request blocking
- 8:43Resource Fetcher
- 10:12Germany
- 11:00Browser Preload Scanner
- 12:31Impact of Preload Scanner
- 13:06Shop
- 15:55HB2 Server Push
- 17:43Twitter Light
- 18:47DNS Prefetch
- 20:23Request
- 21:00Data Saver Mode
- 21:43Twitter Lite
- 22:14UI Caching
- 22:35Second Load
- 24:23Synchronous Loading
- 24:53Bundle Analyzers
- 25:29Twitter
related talks
36mHacking Web Performance
23mPerformance Optimizations for Progressive Web Apps
36mPerformance for the long haul
31mHacking Web Performance
28mBetter than loading fast… is loading instantly
34mCargo Cult Web Performance Optimization
38mCSS and the first meaningful paint
24mSuperpowers of browser's Web API