Banish Image Bloat: Achieving Peak Performance with Image Performance Budgets
summary
Proposes an actionable image performance budget that sets measurable limits like Total Image Weight, number of image requests and image dimensions, plus milestones such as image load time and time to first image (example target: news pages under 2s on 3G) and rule-based checks for format efficiency, lazy loading and CLS. Recommends auditing with Lighthouse and Chrome UX Report/Core Web Vitals, using tools like Kali Speed Curve to flag breaches, defining warning vs error thresholds (example 150 kilobytes on mobile) and iterating.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:48Image performance problem
- 3:59Why plugins aren't enough
- 4:39Image performance budgets
- 6:06Realistic budget expectations
- 7:32Choosing budget metrics
- 9:16Quantity-based metrics
- 11:03User timing goals
- 12:09Rule-based optimization metrics
- 15:27Layout shift with images
- 17:37Image performance rules examples
- 19:23Balancing image needs
- 20:26Auditing performance baseline
- 21:50Setting budget thresholds
- 23:36Implementing the budget
- 24:44Maintaining the budget
- 26:36Budget tradeoffs
- 28:03Shopify example
- 30:12Monitoring progress
- 31:58Conclusion
related talks
27mA primer on performance
08mThe Performance Alphabet
31mDelivering Fast and Beautiful Images and Video
30mFast and Beautiful: Modern Image Delivery Techniques
35mRevitalising the Web - The Importance of Web Performance
46mFast and Beautiful Modern Image Delivery Techniques
40m“Performance by Design”
26mFast and Beautiful Modern Image Delivery Techniques