The Cost of JavaScript
summary
JavaScript is now the costliest page resource: median site ships 360 KB compressed (over 1 MB uncompressed) and popular sites send megabytes (CNN 2.6 MB, Verge 3.8 MB, Facebook ~6 MB across 292 requests), causing slow TTI (median ~9s). Browsers stream and parse once ~30 KB; splitting into ~50 KB chunks and lazy-loading routes/components reduces main-thread work. Targets and wins: aim for 5s TTI on Moto G4, code caching cuts parse/compile 20–40%, Twitter/Tinder cut TTI ~50%, Tokopedia shrinks 320 KB→37 KB. Use Lighthouse, DevTools long-tasks, Webpack bundle-analyzer, source-map-explorer, coverage, ESLint no-restricted-imports, and WebPageTest.
AI-written summary · about
chapters (18)
- 0:00Intro
- 1:57NETWORK / COMPUTE
- 2:40EFFECTIVE CONNECTION TYPE
- 4:59HIGHEST SELLING PHONES
- 6:12BEST BUY TOP PHONES
- 8:46PAGE LOAD METRICS
- 9:19TIME TO INTERACTIVE
- 12:23LONG TASKS IN DEVTOOLS
- 14:10JAVASCRIPT CAN BE A BOTTLENECK
- 15:57SCRIPT STREAMING
- 17:24COST OF JAVASCRIPT
- 19:11MAIN THREAD PARSE/COMPILE
- 21:00JS PARSING UPDATES
- 21:59CODE CACHING IN V8
- 26:15LAZY-LOAD ON VISIBILITY
- 26:41PROGRESSIVE REHYDRATION
- 30:40DISALLOW LARGE IMPORTS
- 33:39I JUST FIXED THE SITE. WHY DID YOU RUIN IT?
