From Zero to Hero - Web Performance
summary
Claims concrete fixes: critical rendering path matters, CSS is render‑blocking so avoid @import and trim styles, HTTP/1 parallel connections block many small files so minify and bundle assets, service workers let the browser serve cached files offline, tiny JS micro‑optimizations buy <0.1 ms while reusing shapes and hidden classes yields real speedups (example 1.7 ms → 0.079 ms), GC can pause up to 100 milliseconds (engines split work into ~5 ms chunks), use defer/async, app‑shell, and GPU CSS animations.
AI-written summary · about
chapters (28)
- 0:00Start
- 2:01How to speed up
- 3:25Do your own optimizations
- 3:47Caching values
- 5:22Remember your optimisations? 2nd run
- 7:34Critical Rendering Path
- 9:22Processing HTML
- 12:30Processing CSS
- 13:08Building the Render Tree
- 17:12Measuring
- 20:10Downloading files
- 26:26Service Worker
- 28:33Blockades
- 31:33Render Blocking JavaScript
- 33:21App Shell Architecture
- 36:17JavaScript Engines
- 37:18Example: V8
- 40:57Hidden Classes
- 42:06JIT Compiler
- 43:50Garbage Collection
- 48:33Repaints & Reflows
- 50:04Trigger for reflows
- 50:57Omitting reflows
- 52:23Profiling
- 53:04Memory Leaks
- 56:28JavaScript Animations
- 56:47Disadvantages
- 57:56CSS animations
related talks
01h 04mFrom Zero to Hero - Web Performance
29mHigh Performance in the Critical Rendering Path
28mFantastic Frontend Performance Tricks & Why We Do Them
01h 03mSpeed up your Web Application
28mCSS and the Critical Path
27mHigh Performance in the Critical Rendering Path
37mSecret Shortcuts of Loading Web Performance
31mWe're All Doing the Best We Can