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?

Immediately loads the resource
Disables connection
Downloads and executes the page script
Opens connection early to third-party server

Answer

Opens connection early to third-party server — preconnect does DNS, TCP and TLS work early so later requests start faster.