More Than You Wanted to Know About Resource Hints
summary
158-slide deep dive that distils six concrete resource hints and how to use them: DNS prefetch, preconnect, prefetch, preload. Examples include preconnect performing DNS + TCP + TLS to save ~168 ms, using HTTP headers to deploy hints (real project shows median 400 ms and >1s at the 95th percentile), and instant.page for hover-triggered prefetch. Warnings: Chrome over-prioritizes preload (can slow a page ~400 ms), prefetch revalidates after five minutes, Firefox 66 regresses preconnect, IE9 misnames hints, and pre-render becomes safe no-state-prefetch.
AI-written summary · about
chapters (6)
- 0:00Start
- 4:39Overview
- 18:47Caching
- 36:01Problematic Prerender
- 44:09Implementing Resource Hints
- 45:04Resource Hint Strategy
related talks
52m“More Than You Ever Wanted to Know About Resource Hints”
27mpreconnect, prefetch, preload, pre what? An intro to Resource Hints
40mpreconnect, prefetch, preload, pre-what?
44mEarly Learnings for Early Hints at Shopify
42mResource loading, prioritization, HTTP/2 - oh my!
42mTake a (Client) Hint!
50mPast, Present and Future of Resource Loading
36mHacking Web Performance