Recipe
Preload & Prefetch Hints
Ship resource hints that tell the browser what to fetch before it even parses the next screen. Cut LCP by 300–800 ms on navigations that matter.
The three hints that pay rent
<link rel="preload">
Fetch a resource needed right now on this page. Browser prioritises it above async scripts and images.
<link rel="prefetch">
Fetch a resource for the next navigation. Low priority, cached for future use.
<link rel="preconnect">
Warm up DNS + TCP + TLS to an origin before the request fires. Saves one full RTT.
Next.js wiring
// next.config.js
experimental: {
optimizeCss: true,
preloadEntries: true
}
Manual injection
// app/layout.tsx
<link rel="preconnect" href="https://cdn.example.com"/>
<link rel="preload" href="/hero.webp" as="image"/>
Guardrails
- •Preloading too many resources starves the critical path. Cap at 3–4 per page.
- •Never preload a resource that isn't used within 3 seconds — the console will warn and the download is wasted.
- •Prefetch is speculative. Disable it on links to heavy pages behind auth gates.