A primer on performance

on YouTube ↗27m

" summary

Claim: images account for the largest bytes on a page (average image ~654 KB) so shaving one‑fifth of an image buys room for libraries like jQuery (86 KB). Tools and steps are concrete: use ImageOptim/TinyPNG/Imagemin and SVGOMG, serve with Picturefill, inline critical CSS with Penthouse, concatenate/minify via gulp, and run PageSpeed Insights or the Chrome timeline. Goals are specific: keep initial payload <1 MB, hit ~60 fps to avoid jank, and set a performance budget ~20% faster than competitors.

AI-written summary · about

" chapters (24)

1. 0:00Start
2. 2:27Frustrated by Poor Performance
3. 2:47Web Stress and the Doorway Effect
4. 3:34Sensory Memory
5. 5:54Ui Design
6. 6:13Image File Types
7. 8:04Compression
8. 8:56Compressive Images
9. 10:21Reading Images
10. 10:53Picture Fill
11. 12:48Css Triggers
12. 14:26Style Audit
13. 14:59Inverted Triangle Css
14. 15:41Front-End Development
15. 15:56Delivery
16. 16:08Waterfall Graph
17. 17:24Minify
18. 17:52Critical Rendering Path
19. 20:53Testing Tools
20. 21:31Page Speed Index
21. 22:37Google Pagespeed Insights
22. 23:30Pagespeed Insights Go
23. 24:13Performance Budget
24. 24:42Review

" related talks

• 25mDelivering Fast and Beautiful Images and VideoDoug Sillars · WebCamp Zagreb 2018
• 29mSpeed Essentials: Key Techniques for Fast WebsitesKatie Hempenius, Houssein Djirdeh · Chrome Dev Summit 2018
• 48mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Mobile Era 2018
• 08mThe Performance AlphabetHenri Helvetica · VueConf TO 2018
• 32mBanish Image Bloat: Achieving Peak Performance with Image Performance BudgetsMyriam Jessier · DevReach 2023
• 30mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · DevDays Europe 2019
• 46mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · DevFest Nantes 2018
• 31mDelivering Fast and Beautiful Images and VideoDoug Sillars · FrontCon 2018