preconnect, prefetch, preload, pre what? An intro to Resource Hints
summary
Concrete numbers and demos: measurements on webpagetest.org show DNS TCP TLS handshakes plus 3G latency pushing connection setup into the 1–1.4s range and a full page to ~4.2s; adding a preconnect reduces connection RTTs (DNS+TCP+TLS) cuts over a second in the font example using Google web fonts. Examples show DNS prefetch for autocomplete (Amazon) and preload fetches current-page assets (fonts/scripts) while prefetch primes checkout assets for future navigations.
AI-written summary · about
chapters (5)
- 0:00Start
- 1:42Empathy
- 8:53Latency, not bandwidth cause slow websites
- 10:29Predictive caching
- 24:44Responsive design
related talks
40mpreconnect, prefetch, preload, pre-what?
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
44mPredictive Prefetching
36mHacking Web Performance
42mResource loading, prioritization, HTTP/2 - oh my!
44mEarly Learnings for Early Hints at Shopify