How do I fix Preload, Prefetch & Preconnect?

Add for your LCP image and critical fonts; use for resources needed on the next likely page — never preload or prefetch everything

← Back to glossary

Preload, Prefetch & Preconnect

frontend HTML5 Intermediate

debt(d5/e2/b2/t5)

d5 Detectability Operational debt — how invisible misuse is to your safety net

Closest to 'specialist tool catches it' (d5), Lighthouse and PageSpeed Insights flag missing LCP preloads and unused preloads, but these are performance audits run deliberately, not in normal CI.

e2 Effort Remediation debt — work required to fix once spotted

Closest to 'one-line patch' (e1), fix is adding or removing a single <link rel='preload'> tag; bumped slightly because you may need to coordinate the 'as' and crossorigin attributes correctly across a few resources.

b2 Burden Structural debt — long-term weight of choosing wrong

Closest to 'localised tax' (b3), resource hints live in document <head> and affect only the page templates that include them; minimal architectural pull but slightly more than a single utility.

t5 Trap Cognitive debt — how counter-intuitive correct behaviour is

Closest to 'notable trap' (t5), the misconception that 'more preloading = faster' is a documented gotcha — preloading everything degrades performance, and font preloads silently need crossorigin even same-origin.

About DEBT scoring → scored by claude-opus-4-7 · 2026-05-11 · reviewed by human

Also Known As

resource hints preload prefetch preconnect dns-prefetch

TL;DR

Browser resource hints that instruct the browser to fetch resources earlier than it would discover them — reducing latency for critical assets and future navigation.

Explanation

rel=preload fetches a resource at high priority for the current page (critical fonts, hero images, LCP elements). rel=prefetch fetches resources at low priority for future navigation. rel=preconnect establishes TCP+TLS connections to origins early — useful for CDNs and third-party APIs. rel=dns-prefetch resolves DNS only, useful for many origins. Each hint has a cost — preloading something that is never used wastes bandwidth and delays other resources.

Common Misconception

✗ Preloading everything speeds up the page — unnecessary preloads compete with critical resources and waste bandwidth; only preload resources needed for the current page's first paint.

Why It Matters

A preloaded LCP image can improve Largest Contentful Paint by 200-500ms — the browser would otherwise discover the image only after parsing the entire HTML.

Common Mistakes

Preloading resources that are not used on the page — browser warns about unused preloads.
Not specifying the 'as' attribute on preload — browser cannot prioritise correctly without it.
Using preload for resources below the fold — use prefetch instead; preload is for current-page critical resources.
Missing crossorigin attribute on font preloads — fonts need CORS even from the same origin.

Code Examples

✗ Vulnerable

<!-- Preload without 'as' attribute — low priority, no type hint:
<link rel="preload" href="hero.jpg">

<!-- Font preload missing crossorigin — fetched twice:
<link rel="preload" href="font.woff2" as="font">

✓ Fixed

<!-- LCP image preload:
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">

<!-- Font preload with crossorigin:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preconnect to CDN origin:
<link rel="preconnect" href="https://cdn.example.com">

<!-- Prefetch next page resources:
<link rel="prefetch" href="/checkout" as="document">

References

↗ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

Tags

frontend performance browser

Added 15 Mar 2026

Edited 22 Mar 2026

Curated in Warsaw under one editorial standard. 1,448 terms, single voice. About this reference →

Rate this term

No ratings yet

🤖 AI Guestbook educational data only

| |

Last 30 days

Agents 0

No pings yet today

No pings yesterday

Amazonbot 10 Perplexity 7 Ahrefs 3 SEMrush 3 Google 2 Unknown AI 2 Bing 1

Also referenced

HTTP Caching (ETags, Cache-Control) 38 Core Web Vitals 30 Critical Rendering Path 27 Render-Blocking Resources 22

How they use it

crawler 26 crawler_json 1 pre-tracking 1

Related categories

performance 1.8k frontend 980

⚡ DEV INTEL Tools & Severity

🟠 High ⚙ Fix effort: Low

⚡ Quick Fix

Add <link rel='preload'> for your LCP image and critical fonts; use <link rel='prefetch'> for resources needed on the next likely page — never preload or prefetch everything

📦 Applies To

any HTML5 web

🔗 Prerequisites

Render-Blocking Resources Core Web Vitals HTTP/2 & HTTP/3

🔍 Detection Hints

LCP image not preloaded; critical font causing FOIT without preload; prefetch not used for predictable next-page navigation

Auto-detectable: ✓ Yes lighthouse pagespeed-insights webpagetest

⚠ Related Problems

Core Web Vitals Render-Blocking Resources Lazy Loading

🤖 AI Agent

Confidence: Medium False Positives: Medium ✗ Manual fix Fix: Low Context: File