preconnect, prefetch, preload, pre-what?
summary
Browsers spend ~248 ms just opening TCP+TLS and a Hamburg→New York round trip is ~62 ms, and a 3G connection can push that connection time to ~1.2 s. Resource hints actually change network behavior: preconnect to gstatic.com removes ~1 s by doing DNS+TCP+TLS early; dns-prefetch only resolves DNS; prefetch downloads low-priority assets into cache for likely future navigations; preload with as="font" forces high-priority fetches and sets correct accept/CSP headers; use crossorigin for webfonts and consider HTTP 103 Early Hints to emit preload hints before HTML.
AI-written summary · about
chapters (13)
- 0:00Why web performance matters
- 2:09What slows down websites
- 11:41Introducing resource hints
- 12:23Preconnect in action
- 16:55Cross-origin preconnect
- 19:01DNS prefetch explained
- 22:11Prefetch for later pages
- 23:37Pre-render limitations
- 27:52No-state prefetch alternative
- 28:12Preload for critical resources
- 31:01Preload request types
- 32:51Early hints and HTTP/2 push
- 35:40Further reading
related talks
27mpreconnect, prefetch, preload, pre what? An intro to Resource Hints
52m“More Than You Ever Wanted to Know About Resource Hints”
47mMore Than You Wanted to Know About Resource Hints
50mPast, Present and Future of Resource Loading
28mThe Browser Hackers Guide To Instantly Loading Everything
36mHacking Web Performance
38mCSS and the first meaningful paint
34mCargo Cult Web Performance Optimization