Lesson 19 / 25
Resource hints and preloading
Use resource hints (preload, prefetch, preconnect) to optimize resource loading and DNS resolution.
Preload, prefetch, and preconnect
<link rel=preload as=script href=critical.js> loads resource immediately. <link rel=prefetch href=next-page.js> loads during idle. <link rel=preconnect href=cdn.example.com> opens connection early. Use preload sparingly for truly critical resources.
DNS prefetch optimization
DNS lookup takes 20-120ms. Use <link rel=dns-prefetch href=//cdn.example.com> for third-party domains. Reduces latency for subsequent connections. Combine with preconnect for full handshake.
Resource hints strategy
Prioritize: preconnect to third-party origins, preload critical resources, prefetch likely next pages. Too many hints can be counterproductive. Measure impact with RUM.
Quick check
Quick check: What does preconnect do?
- Opens connection early to third-party server
- Immediately loads the resource
- Disables connection