intermediate
Resource hints
Use preload, prefetch, preconnect, dns-prefetch, and priority hints only when they match real navigation needs.
Resource hints influence browser loading decisions before normal discovery. preload requests important current-page resources, prefetch warms likely future resources, preconnect opens connections early, and dns-prefetch resolves names. They are useful only when the prediction is accurate and does not compete with more important resources.
<link rel="preconnect" href="https://api.example.com" crossorigin>
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.js" as="script">
preload is high priority for this navigation; prefetch is low priority for the next one. Wrong hints steal bandwidth from LCP.
On interviews: distinguish preload from prefetch and explain why unnecessary hints can slow the page.
Common pitfalls: preloading the wrong asset wastes bandwidth. Preconnecting to many origins consumes sockets and may compete with critical work.
The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.
Checklist:
- preload only current critical assets.
- prefetch likely next navigations.
- Limit preconnect targets.
- Verify impact in the network waterfall.