Delivering video that doesn’t break the bank
summary
Video inflates pages: the median page jumps from 1.2 MB to median page with video 7 MB, and videos add startup delay (average 3.5 s mobile, 6 s desktop) causing 16% mobile abandonment and ~4% desktop non‑play. Preload flags bite — preload=auto downloads whole file — and hidden/retina videos waste data. Using Cloudinary auto quality cuts one clip 22% and resizing for mobile cut it 62% (Cloudinary cut 62% when resized). Streaming with HLS manifests, responsive player settings, removing silent audio tracks (saves ~5–10%), and avoiding duplicated streams fix most problems; beware a Chrome bug that duplicates downloads when looping.
AI-written summary · about
chapters (27)
- 0:00Start
- 1:17Roaming in Serbia
- 1:52Video Consumption is Growing
- 2:29Video Use on the Web
- 4:34Video Quality Metrics
- 6:08Video Fails To Start
- 6:52Video Startup Failure
- 7:48Video Startup Delay
- 8:49Sites with Video: Mobile V. Desktop
- 9:26Image Optimization
- 9:40Video Optimization?
- 9:56Video Stats: File Extensions
- 10:06Video: Different Size Screens
- 14:27Video Preload
- 15:59Video: Preload
- 16:16Background Video
- 19:26Video Resizing
- 19:56Video Is Not Cheap
- 22:18Best Practices (So Far...)
- 23:08The Solution: Streaming Video
- 23:24Third Party Streaming
- 25:09Optimizing Video Delivery Video Streaming
- 29:14Video Streaming: Startup Time
- 29:55Video Streaming: Manifest File
- 33:15Crossing the Streams
- 34:20Third Parties: Facebook
- 35:42Summary
related talks
49mVideo Killed My Data Plan: Delivering Video that Doesn't Break the Web
25mDelivering Fast and Beautiful Images and Video
26mOptimizing Video Performance for Web Developers
39mVideo Killed My Data Plan
41mDelivering Fast Video without the Buffering
48mFast and Beautiful: Modern Image Delivery Techniques
31mDelivering Fast and Beautiful Images and Video
26mBandwidth Ballet: Optimizing Video Performance for Web Maestros