“More Than You Ever Wanted to Know About Resource Hints”
summary
Resource hints are five simple HTML lines that actually change load time: dns-prefetch saves ~80–120ms for common names but can hit 1–10s in edge cases, preconnect does DNS+TCP+TLS and typically saves ~168ms best case and was worth ~300ms for Trainline equating to £8.1M revenue, prefetch downloads resources into HTTP cache but revalidates after five minutes, preload forces high priority fetches and needs the mandatory as type or Chrome can misprioritize and slow pages ~400ms, and prerender is now NoState Prefetch which fetches subresources without executing them to avoid memory and security costs.
AI-written summary · about
chapters (27)
- 0:00Intro
- 3:09Pro-Tip / Short Summary
- 4:22These primitives enable the developer [...] to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.
- 6:48Resolve the IP address for a given domain ahead of time
- 11:20When you know the domain but not the URL
- 11:58TCP Handshake
- 14:38preconnect with dns-prefetch fallback
- 15:49Be judicious with preconnect
- 19:24A file needed for subsequent navigation
- 21:33The user agent SHOULD NOT apply preprocessing on the response and MUST NOT automatically execute or apply it against the current page context.
- 24:36prefetch acts like dns-prefetch in IE9
- 25:42A mandatory fetch for a file needed for the current navigation
- 26:01A way to surface late- discovered resources
- 27:01Late-discovered resource?
- 29:47The attribute is necessary to guarantee correct prioritization, request matching, application of the correct CSP3 policy, and setting of the appropriate Accept request header.
- 31:19The type Attribute
- 31:56The crossorigin Attribute
- 32:30Keep an eye on Console
- 35:58Download and build entire webpages in the background...
- 40:57prerender is the API; NoState Prefetch is the mechanism
- 41:29A recursive prefetch
- 42:29Fetched with lowest possible priority
- 43:35Tips, Tricks, and Gotchas
- 45:13Edge only supports HTTP header for preconnect
- 45:27Edge doesn't support HTTP header for preload
- 45:45Generate Dynamically
- 47:56You Need a Scheme
related talks
47mMore Than You Wanted to Know About Resource Hints
40mpreconnect, prefetch, preload, pre-what?
27mpreconnect, prefetch, preload, pre what? An intro to Resource Hints
50mPast, Present and Future of Resource Loading
28mThe Browser Hackers Guide To Instantly Loading Everything
46mSpeculations about Web Performance
38mCSS and the first meaningful paint
39mWhat’s new in performance?