Resource Prefetching
debt(d6/e3/b3/t7)
Closest to 'only careful code review or runtime testing' (d7), but Lighthouse and Chrome DevTools surface 'preloaded resource not used' warnings, nudging closer to d5/d6. Scoring d6 as a midpoint — specialist tooling catches some cases but misconfigured prefetch is largely invisible.
Closest to 'simple parameterised fix' (e3) — adding/removing link rel=prefetch/preload tags or enabling framework route prefetching is a small parameterised change within the head/template layer, per quick_fix.
Closest to 'localised tax' (b3) — prefetch hints live in the document head or routing layer, applies_to is web only, and rest of codebase is unaffected.
Closest to 'serious trap' (t7) — misconception explicitly notes prefetch vs preload semantics are frequently confused, and 'more preloading helps' is the canonical wrong belief that actively harms the critical path.
Also Known As
TL;DR
Explanation
dns-prefetch: resolve DNS early (free, use for all external domains). preconnect: DNS+TCP+TLS for 2-3 critical origins. preload (as=font/image): fetch current-page critical resource — high priority, use sparingly for LCP and fonts only. prefetch: speculative next-page resource — low priority, idle time.
Common Misconception
Why It Matters
Common Mistakes
- Preloading unused resources — browser warning
- Too many preconnects — CPU cost
- No as attribute on preload
- Confusing prefetch (next page) with preload (current page)
Code Examples
<!-- No hints — font discovered 200ms after CSS --><link rel="dns-prefetch" href="//analytics.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/hero.avif" as="image">
<link rel="preload" href="/inter.woff2" as="font" crossorigin>