Think Fast!
summary
Web pages must load in under a few seconds: 100 ms RTT baseline, mobile often ~1 s, and Amazon sees a 1% sales drop per 100 ms slower load. Practical fixes: gzip on server, CSS first and JS last, use CDN and avoid domain sharding on mobile. Image pipeline: File Optimizer / ImageOptim and TinyPNG, SVG masks (JPEG + 8-bit PNG alpha) cut a 121.9K PNG to 28.5K, sprites or IcoMoon fonts shrink a 37K icon set to ~4.9K. Avoid spinners; use progressive images and lazy loading.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:52Page Speed 2004
- 4:31Combating Latency
- 5:41Concurrent Connection Limits
- 6:59Domain Sharding Trying to fake multiple domains on a single server
- 9:02Combine Your Images & Code
- 21:21Web Fonts
- 23:48Base64 Encoding Embed your graphics as part of the code of your page!
- 25:43JPEG + PNG + SVG = Magic
- 27:59Sprites Example
- 33:00Loading Order
- 37:12Progressive Images
- 38:09Loading Animations
- 41:05Add "Touch" States
- 42:51Adaptive & Responsive Design Patterns
related talks
29mSpeed Essentials: Key Techniques for Fast Websites
30mFast and Beautiful: Modern Image Delivery Techniques
41mMaking The Mobile Website Faster
23mOptimizing page load speed on front end side
46mFast and Beautiful Modern Image Delivery Techniques
36mFast and Beautiful: Modern Image Delivery Techniques
27mA primer on performance
46mSpeed Matters: Client Side Performance Improvement Tips & Tricks