How I brought LCP down to under 350 ms
summary
Claims reducing Largest Contentful Paint to under 350 ms by shipping signed exchanges (SXG) and letting Google prefetch a cryptographically signed cached page. Implementation uses Cloudflare SXG support, Next.js/Rails hacks to set Cache‑Control (24h) and remove HSTS, moves session cookies and CSRF checks to client endpoints, rewrites asset URLs and limits to <=20 hashed subresources sent via Link headers, and detects prefetch success with a canary subresource. Demo shows LCP ~140 ms and measurements use SXG-tagged analytics to compare loaded vs failed prefetch cohorts.
AI-written summary · about
chapters (10)
- 0:00Introduction to LCP optimization
- 3:59Demo of LCP improvement
- 10:16Why prefetching isn't used by Google
- 15:44Signed exchanges explained
- 20:03SXG implementation constraints
- 28:02Prefetching subresources for LCP
- 37:30Debugging SXG issues
- 42:01Testing SXG compatibility
- 46:00Measuring SXG impact
- 52:13Summary and benefits of SXG
related talks
12mHow to speed up Largest Contentful Paint (LCP) with cross-site prefetching
46mOptimising Largest Contentful Paint
29mA deep dive into optimizing LCP
46mOptimising Largest Contentful Paint
38mCSS and the first meaningful paint
26mDon't Make Users Wait: Secrets to Supercharge Server-Rendered Page
36mHacking Web Performance
37mThe First Meaningful Paint