Early Learnings for Early Hints at Shopify
summary
Shopify, Google (Chrome) and Cloudflare deploy 103 Early Hints (103 responses with Link headers) to send pre-connect and preload hints from the CDN while origin renders. Pre‑connect yields ~400–500 ms median LCP wins in a Black Friday experiment; preload shows mixed results (median ~1.2% across 16 merchants, range −15% to +21%). Implementation uses link headers, Cloudflare early‑hint cache, and CDN domains; pitfalls include oversized Link headers, many font/image preloads, cache staleness and the need for rigorous A/B testing.
AI-written summary · about
chapters (9)
- 0:00Shopify performance focus
- 7:48HTTP/2 Push failure and Early Hints
- 11:25Early Hints with CDNs and browsers
- 14:13When to use Early Hints
- 16:40Teamwork for Early Hints
- 18:24Pre-connect Early Hints results
- 27:39Preload Early Hints challenges
- 34:08Conclusion and future of Early Hints
- 40:45Q&A on trade-offs
related talks
47mMore Than You Wanted to Know About Resource Hints
27mpreconnect, prefetch, preload, pre what? An intro to Resource Hints
46mSpeculations about Web Performance
40mpreconnect, prefetch, preload, pre-what?
52m“More Than You Ever Wanted to Know About Resource Hints”
34mPredictive preloads for ultimate web performance?
38mCSS and the first meaningful paint
55mHow I brought LCP down to under 350 ms