Speed Essentials: Key Techniques for Fast Websites
summary
Images often dominate bytes so convert animated GIFs to video (5–20× smaller) and serve WebP 25–35% smaller via picture/source; automate Imagemin and use Sharp or Jimp for resizing and srcset/sizes so browsers pick the right file. Use native or script lazy loading; add font-display: swap to avoid invisible text. JavaScript median is ~370 KB mobile so code split with dynamic import, preload critical modules, use babel/preset-env or module/no-module serving. Uniqlo halves bundles, cuts TTI by 2s, reduces bounce 14% and boosts session duration 31%.
AI-written summary · about
chapters (13)
- 0:00Introduction to web speed
- 1:18Optimizing image formats
- 3:46Modern images and compression
- 7:10Responsive image techniques
- 9:41Lazy loading images
- 11:23Web font optimization
- 12:25JavaScript performance
- 14:31Code splitting techniques
- 17:29Loading and compatibility
- 20:15Differential serving
- 22:55Performance monitoring tools
- 25:16Case study and results
- 27:15Browser optimizations
related talks
30mFast and Beautiful: Modern Image Delivery Techniques
48mFast and Beautiful: Modern Image Delivery Techniques
25mDelivering Fast and Beautiful Images and Video
46mFast and Beautiful Modern Image Delivery Techniques
46mThink Fast!
36mFast and Beautiful: Modern Image Delivery Techniques
26mFast and Beautiful Modern Image Delivery Techniques
27mA primer on performance