PageSpeed Matters
    Speed Audit
    Let's Talk
    PageSpeed Matters
    Book a Call
    Optimization Techniques · Glossary

    Preload / Preconnect / Resource Hints · Definition & Explanation 2026

    Resource Hints are HTML `<link>` directives that tell the browser about resources it will need — before it would naturally discover them during parsing. They are one of the most powerful and underused performance optimizations available, capable of improving LCP by 200–500ms with a single line of HTML.

    The four main resource hints — preload, preconnect, dns-prefetch, and prefetch — each serve a different purpose in the resource loading lifecycle. Preload fetches critical resources immediately. Preconnect establishes early connections to third-party origins. DNS-prefetch resolves domain names. Prefetch prepares resources for future navigations.

    In 2026, the `fetchpriority` attribute (supported in all major browsers since 2023) adds another dimension: you can now tell the browser not just what to load early, but how important it is relative to other resources. Combining `<link rel='preload'>` with `fetchpriority='high'` on the LCP image is one of the single highest-impact performance optimizations — often improving LCP by 200–500ms.

    Misusing resource hints is also common: over-preloading dilutes the benefit, preconnecting to too many origins wastes bandwidth, and preloading resources the browser already discovers quickly adds overhead without benefit. This guide covers when to use each hint, common mistakes, and measurement techniques.

    Updated 2026-02-28
    M
    By Matt Suffoletto

    TL;DR — Quick Summary

    Resource hints are HTML <link> attributes that tell the browser about resources it will need: preload (fetch now, high priority), preconnect (establish connection), dns-prefetch (resolve hostname), prefetch (fetch for future navigation). Preloading the LCP image with fetchpriority='high' can save 200–500ms of LCP.

    What is Preload / Preconnect / Resource Hints?

    Resource Hints are `<link>` element attributes that communicate resource priorities to the browser, overriding its default discovery and loading order:

    Preload (`<link rel='preload' as='image' href='hero.webp' fetchpriority='high'>`): Tells the browser to fetch a specific resource immediately, at high priority, before it would naturally discover it during HTML/CSS parsing. Essential for resources that are needed for the initial render but aren't directly referenced in HTML — hero images loaded via CSS background-image, fonts loaded via @font-face, and critical scripts loaded dynamically.

    Preconnect (`<link rel='preconnect' href='https://fonts.googleapis.com'>`): Establishes the full connection pipeline (DNS resolution + TCP handshake + TLS negotiation) to a third-party origin before any resources are requested from it. Each preconnect saves 100–300ms per origin. Use for origins you will definitely load resources from within the next few seconds.

    DNS Prefetch (`<link rel='dns-prefetch' href='https://analytics.example.com'>`): Resolves only the domain name (DNS lookup), which is lighter than a full preconnect. Saves 20–120ms per origin. Use for lower-priority third-party origins where a full connection isn't worth the cost.

    Prefetch (`<link rel='prefetch' href='/next-page.html'>`): Fetches a resource at idle/low priority for a likely future navigation. The resource is cached and ready when the user navigates. Does not affect current page performance. Use for predicted next-page resources.

    Speculation Rules (2024+): The modern successor to prefetch for navigation prediction. `<script type='speculationrules'>` allows declarative prefetch and prerender rules with URL patterns, enabling instant page transitions for predicted navigations.

    History & Evolution

    Key milestones:

    • •2009 — DNS prefetch introduced in browsers, the first resource hint.
    • •2014 — W3C Resource Hints specification formalizes preconnect and prefetch.
    • •2016 — Preload specification published as a W3C Candidate Recommendation. Chrome, Firefox, and Safari add support.
    • •2017 — Preload becomes widely recommended for LCP optimization as Core Web Vitals concepts emerge.
    • •2022 — `fetchpriority` attribute (Priority Hints) lands in Chrome 101, adding resource prioritization control.
    • •2023 — fetchpriority supported in all major browsers (Chrome, Firefox, Safari).
    • •2024 — Speculation Rules API provides declarative prefetch/prerender for navigation prediction.
    • •2025–2026 — fetchpriority='high' on LCP images is a standard best practice. Speculation Rules gaining adoption for multi-page apps.

    How Preload / Preconnect / Resource Hints is Measured

    Resource hint effectiveness is measured by comparing resource loading timing with and without hints:

    Tools for measuring resource hint impact:

    • •Chrome DevTools Network panel — Shows resource timing waterfall. Preloaded resources appear earlier in the waterfall. Look for the 'Initiator' column showing 'Link preload' instead of the parser or CSS.
    • •Lighthouse — 'Preload Largest Contentful Paint image' audit specifically identifies missing LCP preloads. 'Preconnect to required origins' identifies third-party origins that would benefit from preconnect.
    • •WebPageTest — Waterfall view clearly shows when preloaded resources start downloading vs when the browser would have naturally discovered them. The gap is the time saved.
    • •Resource Timing API — Programmatic access to resource loading timing for monitoring in production.

    What to measure:

    1. 1Compare LCP with and without the preload hint.
    2. 2Check Chrome DevTools Initiator column — preloaded resources show 'Link preload' initiator.
    3. 3Verify preconnected origins show 'preconnect' in the connection timing breakdown.
    4. 4Monitor unused preloads — Chrome DevTools Console warns about preloaded resources not used within 3 seconds.

    Key rule: Field data (CrUX) determines Google rankings. Lab data (Lighthouse, WebPageTest) is for debugging and iteration.

    Common Causes of Poor Preload / Preconnect / Resource Hints Scores

    Common issues with resource hint implementation:

    Missing resource hints (too few):

    1. 1LCP image not preloaded — The most common missed opportunity. Hero images loaded via CSS background-image or discovered late in HTML are never preloaded.
    2. 2Font CDN not preconnected — Google Fonts, Adobe Fonts, or custom font CDNs require DNS + connection setup that delays font loading.
    3. 3Critical API endpoints not preconnected — SPAs that fetch data from API origins on load benefit from preconnect.
    4. 4No fetchpriority on LCP image — Even with preload, the browser may not prioritize it highly enough without fetchpriority='high'.

    Overused resource hints (too many):

    1. 1Over-preloading — Preloading more than 3–5 resources dilutes the priority boost. Each preload competes for bandwidth.
    2. 2Preloading resources the browser already discovers quickly — If a resource is in the HTML `<img>` tag, preloading adds overhead without benefit.
    3. 3Preconnecting to too many origins — Each preconnect uses a TCP/TLS slot. More than 4–6 preconnects wastes resources.
    4. 4Prefetching too aggressively — Prefetching many pages wastes bandwidth for users who don't navigate to them.

    Frequently Asked Questions

    Preload fetches a resource with high priority for the current page — use for critical resources needed for initial render. Prefetch fetches at low priority for a likely future navigation — use for anticipated next-page resources. Preload affects the current page's performance; prefetch prepares for future navigations.

    Use preconnect for origins you'll definitely use soon (font CDN, critical APIs) — it establishes DNS + TCP + TLS (saves 100–300ms). Use dns-prefetch for lower-priority origins you might use — it only resolves DNS (saves 20–120ms). Preconnect is more expensive but saves more time.

    Limit preloads to 3–5 critical resources. Each preload competes for bandwidth. Preload only: the LCP image, 1–2 critical fonts, and any resource the browser can't discover from HTML alone (CSS background images, dynamically loaded scripts).

    fetchpriority tells the browser how important a resource is relative to others of the same type. 'high' boosts priority (use for LCP image), 'low' reduces priority (use for below-fold images), 'auto' uses the browser's default. Combine with preload for maximum effect on LCP.

    If a preloaded resource isn't used within 3 seconds, Chrome logs a console warning. This means the preload is wasting bandwidth. Common causes: preloading resources that are conditionally loaded, preloading the wrong URL (e.g., after a redirect), or preloading resources that are already discovered quickly.

    Yes, and they're still valuable with HTTP/2. While HTTP/2 multiplexing allows parallel downloads, the browser still needs to discover resources before requesting them. Resource hints solve the discovery problem — telling the browser about resources before it finds them during parsing.

    Speculation Rules (`<script type='speculationrules'>`) are the modern replacement for `<link rel='prefetch'>` for navigation prediction. They support URL patterns (prefetch all /products/* pages), prerendering (fully render next page in background), and eagerness levels. Supported in Chrome 109+.

    No — only preload the LCP image and images that are both above-fold AND discovered late by the browser (e.g., CSS background images). Regular <img> tags in HTML are discovered during parsing and don't need preload. Over-preloading images competes for bandwidth and can slow down the LCP image.

    Use imagesrcset and imagesizes on the preload link: `<link rel='preload' as='image' imagesrcset='small.webp 400w, medium.webp 800w, large.webp 1200w' imagesizes='(max-width: 768px) 100vw, 50vw'>`. The browser selects the correct size automatically.

    Preload is an HTML `<link>` tag — the browser sees it after the HTML starts arriving. 103 Early Hints is an HTTP response sent by the server while it's still processing the request — the browser gets hints before the HTML even starts. 103 Early Hints can save 100–500ms by utilizing the server think-time.

    Struggling with Preload / Preconnect / Resource Hints?

    Request a free speed audit and we'll identify exactly what's holding your scores back.

    Request An Audit