Resource Hints

Long definition

Resource hints are an explicit signal to the browser's preload scanner: don't wait until you parse the <img> or <script> tag — start work now. Each hint type maps to a specific phase of the connection-and-fetch pipeline.

The five hints, in pipeline order:

• <link rel="dns-prefetch" href="//cdn.example.com"> — resolves DNS only. Cheap. Use for origins you'll connect to but aren't sure exactly when.
• <link rel="preconnect" href="https://cdn.example.com" crossorigin> — DNS + TCP + TLS. Saves the full connection handshake, typically 100-300ms. Use for the 2-3 most critical third-party origins. The crossorigin attribute matters for fonts and CORS-loaded assets.
• <link rel="preload" as="image" href="hero.jpg" fetchpriority="high"> — fetches the resource immediately, at the priority you specify. Use for the LCP image, critical fonts, and async scripts you know you'll need. Wrong as value = browser warns and re-downloads.
• <link rel="prefetch" href="/next-page.html"> — low-priority idle-time fetch for resources likely needed on the next navigation. Cached for 5 minutes by default. Use for predictable next-step navigations (checkout step 2, paginated lists).
• <link rel="modulepreload" href="/app.js"> — preload + parse + compile for ES modules. Equivalent to preload as="script" but recursively also preloads the module's static imports.

The single highest-impact use: preload the LCP image with fetchpriority="high". On image-LCP pages, this can shave 200-800ms off LCP by starting the image fetch in parallel with the CSS that would otherwise block its discovery. Pair with eliminating render-blocking resources for compound effect. Reference: web.dev/preload-critical-assets.

The single most common mistake: preloading too much. Every preload competes with every other preload for bandwidth. Preloading 8 fonts, the hero image, 3 scripts, and a CSS file just shuffles the contention without reducing it. Pick the 1-3 resources that genuinely block above-the-fold rendering.

Common misconceptions

• "More resource hints means faster pages." Past 3-4 hints per page, returns turn negative. The browser already prioritizes well; aggressive hinting steals bandwidth from resources the heuristics would have correctly prioritized.
• "Preload and prefetch are the same." Preload is for the current navigation, high priority, mandatory. Prefetch is for future navigations, idle priority, speculative. Confusing them either steals bandwidth (prefetch where preload was needed) or wastes it (preload where prefetch was enough).
• "Preconnect is free." Preconnect opens a real TCP+TLS connection. Browsers cap concurrent connections per origin (usually 6) and globally (a few hundred). Preconnecting to 10 origins can saturate the connection pool and slow down the origins you actually need.
• "Resource hints can fix slow servers." They overlap connection setup with later work. They don't change TTFB once the connection is established. A 2-second backend is still a 2-second backend after preconnect.