Optimizing the Critical Rendering Path in React
summary
Walks through concrete fixes and outcomes: use render to string server rendering, defer scripts, inline critical CSS, and font-display: swap to unblock text; prioritize above‑the‑fold assets and responsive images with srcset/picture and lazy loading. Reports real numbers: an app moves first meaningful paint 12s→8s→18s after adding an undeferred third‑party. Recommends resource hints (preload), HTTP/2, code‑splitting (react‑loadable / Suspense) and measurement with Lighthouse WebPageTest GTmetrix to validate gains.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:30Optimizing Critical Rendering Path
- 2:15Teleport HQ
- 2:35JS Heroes
- 3:05Context
- 5:05Browser metaphor
- 5:30Performance mindset
- 6:20I dont do this
- 7:12Web Performance Steps
- 11:04Green Light
- 11:33Experience
- 12:25Serverside Rendering
- 13:20Deferring JavaScript
- 14:15Fonts
- 15:40Prioritize
- 17:36Images
- 19:27Resource Hints
- 21:04Third Parties
- 22:34HTTP
- 23:32Tools
- 23:47Lighthouse
- 24:33webpagetest
- 24:55performance services
- 25:09recap
- 25:52conclusion
related talks
32mStay Away From My Path!
24mOptimising React’s TTI
26mLightning Fast React Apps
15mOptimising React TTI
34mOptimizing Performance in Large-Scale React & Node.js Applications
21mMaking Your React Apps Perform At Scale
30mHigh Performance in the Critical Rendering Path
27mHigh Performance in the Critical Rendering Path