Optimising React’s TTI
summary
Shows concrete wins: measure TTI with Lighthouse, shrink bundles with webpack bundle analyzer and Bundlephobia, split by page using route-level code splitting, and lazy-load heavy widgets with dynamic import and suspense. Demonstrates server HTML plus a simple server-side cache object plus an invalidation endpoint that speeds first meaningful paint, but warns of a false sense of interactivity. Gives a practical analytics hack that queues events and defers loading so third‑party trackers stop adding 50–150ms each to interactivity.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:26LUIS ROMAN
- 0:51TIME TO INTERACTIVE
- 1:14USE LIGHTHOUSE
- 1:41REACT SPA
- 2:09BROWSER INTERACTION
- 3:47USE SSR
- 5:27THE DOWNSIDE
- 5:40INCREASED RESPONSE TIMES
- 6:09USE A SSR APP SHELL
- 6:55USE SERVER SIDE CHACHING
- 9:14FALSE SENSE OF INTERACTIVITY
- 10:03USE PROGRESSIVE ENHANCEMENT
- 11:37UNDERSTAND THE JS LIFECYCLE
- 12:33KNOW YOUR BUNDLE SIZE
- 13:04MAKE IT SMALL
- 13:29TRY BUNDLE PHOBIA
- 14:43USE CODE SPLITTING
- 14:54AT ROUTE LEVEL
- 17:29DEFER YOUR PAGE TRACKERS
- 22:51FURTHER IMPROVEMENTS
- 23:38THAT'S IT
related talks
15mOptimising React TTI
33mMaximising performance with React code-splitting techniques
34mOptimizing Performance in Large-Scale React & Node.js Applications
38mSecret Shortcuts of Loading Web Performance
27mOptimizing the Critical Rendering Path in React
39mFrom make it work to make it fast: quick wins to boost your application
33mRendering on the Web: Performance Implications of Application Architecture
37mReact Tune Up