Monsters of Web Performance

on YouTube ↗21m

" summary

Finds a 9 MB JS bundle containing a 7 MB SVG flags payload and replaces it with dynamic import splitting to reduce initial download, saving about 700 milliseconds per page render; identifies a 2 MB CSS bundle where only 1% is used and removes unused UI library CSS with webpack bundle analyzer and Coverage to cut render-blocking time; fixes jQuery load HTML parsing that costs 400–3,000 ms, uses parallel small data-fetching bundles, Chrome performance profiler and React DevTools profiler, and sets a 250 ms tab-switch budget with RUM (CloudWatch RUM / Sentry).

AI-written summary · about

" chapters (19)

1. 0:00Intro
2. 2:20The Bumbler
3. 2:50The Problem
4. 4:09Use Dynamic Import
5. 5:17Dont Run Away
6. 6:09Out of Control
7. 6:52Show Coverage
8. 8:16Megabyte CSS
9. 9:31Modern Tools
10. 11:20Browser Speed
11. 12:07Jamstack Pattern
12. 13:38Timing
13. 15:31Browser Network
14. 15:54Creepy Crawlies
15. 16:34Infinite Loops
16. 17:50Performance Profilers
17. 19:07Lab Tests
18. 19:20Real User Monitoring
19. 20:29Summary

" related talks

• 16mThe Evolution of Web PerformanceDenis Artyuhovich · OdessaJS 2018
• 21mEvolution of Web PerformanceDenis Artyuhovich · The Rolling Scopes Conference 2018
• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 41mHow we make Web Apps lightning fast at Microsoft!Sean Thomas Larkin · Uphill Conf 2019
• 28mDecoding JavaScript: Loading Performance —Arvin Abedinlou · bit summit 2025
• 37mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · XtremeJS 2023
• 36mPerformance for the long haulBen Schwarz · NG-DE Conference 2019
• 24mSuperpowers of browser's Web APINikola Mitrovic · JSWorld Conference 2024