Using Prefetch and Preconnect to Speed Up Loading

Introduction

Prefetch, preconnect and related resource hints help browsers prepare important resources earlier. They can reduce waiting time for fonts, APIs, CDNs, scripts and likely next-page navigation when used correctly.

But resource hints are not magic speed buttons. If you preload the wrong files, preconnect to too many domains or prefetch pages users never visit, you can waste bandwidth and compete with more important resources. The goal is to prioritize what matters most.

Quick answer

Resource hints

Prefetch and preconnect are browser resource hints. They tell the browser that certain resources or domains may be needed soon.

Resource hints can help the browser:

• resolve DNS earlier
• open a connection earlier
• prepare TLS earlier
• fetch important resources earlier
• prepare likely next-page resources
• reduce waiting time for critical assets

Hint types

Preconnect

Preconnect tells the browser to set up an early connection to a domain before the resource is requested.

Good candidates:

• font provider domain
• critical API domain
• CDN used for important assets
• payment provider required on checkout
• analytics/tag domain only if truly critical
• image CDN used above the fold

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

DNS prefetch

DNS prefetch is lighter than preconnect. It tells the browser to resolve a domain name early without opening a full connection.

Good candidates:

• lower-priority third-party domains
• domains used later on the page
• external resources that are useful but not critical
• analytics or social domains that do not need immediate connection setup

<link rel="dns-prefetch" href="//example-cdn.com">

Preload

Preload tells the browser to fetch a current-page resource earlier because it is important for rendering the page.

Good candidates:

• main hero image
• critical font file
• above-the-fold CSS
• important script needed early
• key background image if it affects LCP

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Prefetch

Prefetch is for likely future navigation, not critical current-page rendering.

Good candidates:

• next page in a multi-step flow
• likely next article
• checkout step after cart
• dashboard page after login
• search results after typing
• next route in a web app

<link rel="prefetch" href="/pricing">

Which hint to use

Why this matters

Bad hints can do the opposite: they can waste network capacity, delay critical files, increase memory usage or make performance less predictable on mobile connections.

How to check hints

Use HTTP Header Checker, browser developer tools and performance testing to verify resource hints.

Check:

1. Page source — look for link rel="preconnect", rel="dns-prefetch", rel="preload" and rel="prefetch".
2. Network tab — confirm hinted resources are requested at the expected time.
3. Priority — check whether important assets are prioritized correctly.
4. Console warnings — look for unused preload warnings.
5. Third-party domains — confirm only important domains use preconnect.
6. Mobile testing — check whether hints help or hurt on slower networks.
7. Core Web Vitals — measure whether LCP, INP or overall load improves.

Check page HTML for hints:
View page source and search for:
rel="preconnect"
rel="dns-prefetch"
rel="preload"
rel="prefetch"

Browser DevTools:
- Open Network tab
- Reload the page
- Check Initiator and Priority
- Look for preloaded resources
- Watch for unused preload warnings
- Compare before/after LCP

Command-line check:
curl -s https://example.com | grep -i "preload\|preconnect\|prefetch\|dns-prefetch"

Common problems

How to use hints safely

1. Step 1: Identify the bottleneck

   Check whether delay comes from DNS, connection setup, critical resource discovery or next-page navigation.

2. Step 2: Start with critical domains

   Use preconnect only for important third-party domains needed early.

3. Step 3: Use dns-prefetch for lower-priority domains

   Prepare DNS lookup without opening full connections.

4. Step 4: Preload critical current-page resources

   Use preload for hero image, critical font or key file needed early.

5. Step 5: Prefetch likely future pages

   Use prefetch only for likely next navigation, not required current-page assets.

6. Step 6: Use correct attributes

   Set as, type and crossorigin correctly where needed.

7. Step 7: Avoid global overuse

   Do not add the same hints to every page unless they matter everywhere.

8. Step 8: Measure before and after

   Compare performance on desktop, mobile and slower network conditions.

Preconnect can help with third-party connection setup, but it cannot remove the cost of running third-party JavaScript.

• Use carefully for: payment providers, essential API domains, critical font providers, required CDN domains.
• Be careful with: ads, chat widgets, heatmaps, social embeds, multiple tag managers, non-critical analytics, A/B testing scripts.

WordPress themes and plugins may add resource hints automatically.

• performance plugin settings
• theme-added preloads
• Google Fonts hints
• page builder resource hints
• cache plugin optimization
• CDN plugin settings
• duplicate preconnect links
• unused preload warnings
• hints that appear on every page unnecessarily

DNS prefetch:
<link rel="dns-prefetch" href="//cdn.example.com">

Preconnect:
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Preload CSS:
<link rel="preload" href="/assets/app.css" as="style">

Preload font:
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Preload hero image:
<link rel="preload" href="/images/hero.webp" as="image">

Prefetch likely next page:
<link rel="prefetch" href="/pricing">

Fonts

Fonts are common candidates for preconnect and preload because they can delay text rendering.

For external font providers:

• preconnect to font domains used early
• preload only critical font files
• use crossorigin when required
• limit font families and weights
• use font-display where appropriate

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

The Largest Contentful Paint element is often a hero image or large above-the-fold image.

Possible improvements:

• use correct mobile/desktop image sizes
• compress images
• use modern formats
• preload the actual LCP image when needed
• avoid preloading hidden desktop image on mobile
• avoid preloading multiple competing hero images
• set width and height
• use fetchpriority where appropriate if supported

Frequently asked questions