Resource Hints for Ecommerce: Preconnect, Prefetch, and Preload Explained

Resource hints are one of the most underused performance tools in ecommerce. They're just HTML link tags — no JavaScript, no third-party libraries, no build changes required. Yet the right combination can shave hundreds of milliseconds off your store's load time, directly improving your Largest Contentful Paint score and real-world conversion rates.

There are three hints worth understanding: preconnect, prefetch, and preload. They're often confused with each other, and the wrong one in the wrong place can actually hurt performance. This guide explains exactly what each does, when to use it, and the patterns that work specifically for ecommerce.

Preconnect: Eliminate DNS + TLS Handshake Latency

rel="preconnect" tells the browser to establish a connection to a third-party origin before it needs to download anything from it. This covers three round trips the browser would otherwise make on-demand: DNS lookup, TCP connection, and TLS handshake. On a typical connection, that's 100–300ms of latency — eliminated before your first resource request even fires.

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

The crossorigin attribute matters for font origins — fonts are fetched with CORS, and a preconnect without crossorigin establishes an anonymous connection that gets discarded when the font fetch arrives with CORS headers.

When to use preconnect

Use it for third-party origins that:

• Load resources critical to your above-the-fold content
• Are connected to on every page (not just some pages)
• Can't be self-hosted or moved to your own domain

Common ecommerce preconnect targets

• Google Fonts: https://fonts.googleapis.com and https://fonts.gstatic.com
• Klaviyo: https://static.klaviyo.com
• Google Analytics / GA4: https://www.google-analytics.com
• Meta Pixel: https://connect.facebook.net
• Shopify CDN (for non-Shopify assets served from it): https://cdn.shopify.com
• Stripe.js: https://js.stripe.com
• Cloudinary / imgix image CDN: your CDN's origin

The preconnect limit

Browsers cap open preconnect connections (Chrome allows ~6). Adding too many preconnects causes them to time out before they're used, wasting the connection slots. Keep your preconnect list to the 3–5 origins that appear on every page and load above-the-fold resources. Check for orphaned preconnects (preconnect targets never actually fetched) using DevTools Network tab — they show as wasted connection handshakes.

Preload: Prioritize Critical Resources

rel="preload" tells the browser to fetch a specific resource immediately, at high priority, because it will be needed very soon. Unlike preconnect (which just opens a connection), preload fetches the actual file and caches it. Unlike prefetch (which fetches a future page's resources), preload is for the current page.

<!-- Preload your LCP hero image -->
<link rel="preload" as="image" href="/images/hero-banner.webp" />

<!-- Preload a critical font file -->
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/inter-var.woff2" crossorigin />

<!-- Preload a critical CSS file (if your framework lazy-loads it) -->
<link rel="preload" as="style" href="/styles/critical.css" />

The single best preload for most ecommerce stores: the hero image

The hero image is almost always your LCP element. Browsers don't discover it until they parse your HTML and find the <img> tag — at which point your CSS, fonts, and scripts may already be queued ahead of it. Preloading the hero image moves it to the front of the queue, often reducing LCP by 200–600ms. This is one of the highest-ROI performance changes you can make with a single line of HTML.

Important: preload the exact image that will be rendered as LCP — if you're using responsive images with srcset, you need imagesrcset and imagesizes attributes:

<link rel="preload" as="image"
      imagesrcset="/hero-400w.webp 400w, /hero-800w.webp 800w, /hero-1200w.webp 1200w"
      imagesizes="(max-width: 600px) 100vw, 1200px" />

Fonts: preload only what you see above the fold

Font preloads are high-bandwidth — don't preload every font weight you use, only the one(s) used in above-the-fold text. Preloading 4 font files that don't render until below the fold wastes bandwidth that could have gone to your hero image. Load the rest with font-display: swap in your CSS instead.

What not to preload

• Everything: preloads that don't get used generate console warnings and waste bandwidth
• Resources already in the critical rendering path: your browser already prioritizes render-blocking CSS and scripts — preloading them is redundant
• Large below-the-fold images: you want those lazy-loaded, not preloaded
• Scripts that aren't truly critical: adding them to the preload list pulls them ahead of your actual critical resources

Prefetch: Load the Next Page Before the Click

rel="prefetch" tells the browser to fetch a resource in the background at low priority, because it might be needed for the next navigation. It doesn't affect the current page's performance — it's speculative loading for future pages.

<!-- Prefetch the checkout page JS bundle -->
<link rel="prefetch" href="/checkout.js" as="script" />

<!-- Prefetch the cart page -->
<link rel="prefetch" href="/cart" as="document" />

High-value prefetch targets in ecommerce

• Checkout page assets: 80% of users who add to cart visit checkout. Prefetching checkout's JS bundle on product pages makes checkout load almost instantly.
• Product pages from collection pages: users browsing a collection are likely to click into a product. Frameworks like Next.js and Astro do this automatically for links in the viewport — they listen for link hover/focus and prefetch before the click.
• Cart page: if your cart is a separate page (not a drawer), prefetch it after add-to-cart.

Prefetch vs preload: the key difference

Attribute	When does it fetch?	Priority	For which page?
preload	Immediately	High	Current page
prefetch	When the browser is idle	Lowest	Next navigation

Don't use prefetch for resources you need now — the browser treats them as lowest priority and will delay them for anything more important. Don't use preload for resources you need next page — you'll waste bandwidth on the current page to prefetch resources that may not be visited.

DNS-Prefetch: The Fallback for Older Browsers

rel="dns-prefetch" only resolves DNS for a third-party origin — it doesn't establish the TCP or TLS connection. It's a lighter-weight version of preconnect, supported in older browsers that don't support preconnect, and it's useful for origins that host resources loaded below the fold (where the full preconnect overhead isn't worth it).

<link rel="dns-prefetch" href="https://fonts.googleapis.com" />

If you're already using preconnect for an origin, adding dns-prefetch for the same origin is redundant — preconnect is a superset of dns-prefetch. The common pattern is to pair both when you want to support older browsers:

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

The Resource Hints Audit: What Your Store Probably Needs

Run through this checklist on your store's homepage and product page template:

1. Identify your LCP element — use Chrome DevTools Performance tab, or run a PageSpeed Insights test. Is it a hero image? If yes, it needs a preload.
2. Inventory your above-the-fold third-party origins — check DevTools Network tab, filter for third-party requests. Group by domain. The ones that appear within the first 2 seconds of load are preconnect candidates.
3. Check your Google Fonts setup — if you're loading Google Fonts, you need preconnect for both googleapis.com and gstatic.com.
4. Look for late-discovered critical resources — in the Network waterfall, resources that start loading after the 1s mark but appear above the fold are preload candidates.
5. Identify the most common next-page navigation — what do users do after landing on a product page? Visit checkout? Add to cart? Prefetch those assets.

StoreVitals' crawler checks for render-blocking resources and large above-the-fold images, which are the root causes that resource hints are designed to address. Run a free StoreVitals scan to see which performance issues are affecting your store's Core Web Vitals scores.