The First Meaningful Paint
summary
Uses FT.com as a case study and measures with WebPageTest and Lighthouse to optimize first meaningful paint from about 8600 ms on a 3G emerging-market profile. Inlining critical CSS cuts FMP to ~3200 ms (~63% improvement); adding server-side link rel preload hints moves a cable FMP to ~1042 ms (~64% improvement); doing asynchronous push during server think time with HTTP/2 server push yields ~66% improvement and meets a 3000 ms target on low‑end devices. Also discusses cache-aware pushes and the Service Worker “purple” pattern.
AI-written summary · about
chapters (10)
- 0:00Introduction and welcome
- 1:04What does fast mean
- 8:24Optimizing for first meaningful paint
- 14:01Critical CSS inlining
- 19:17Identifying critical resources
- 22:47Preloading hidden resources
- 25:41HTTP/2 server push
- 31:00Asynchronous server push
- 33:49Future of resource loading
- 35:57Closing and key takeaways
related talks
38mCSS and the first meaningful paint
36mHacking Web Performance
49mEffortless Performance Debugging
32mEverything you need to know about Web Performance
43mPlanet of the APIs: A Tale of Performance and UX
34mOnce More with Feeling
27mHigh Performance in the Critical Rendering Path
28mPractical Performance