Lazy Loading, Preload and Prefetch: Resource Hints for Shopify

Resource hints are the four-line HTML changes that can shave half a second off Shopify page loads with zero design impact. Most Shopify themes do not use them well. This article covers the four resource hints that matter for Shopify (preload, prefetch, preconnect, lazy loading), when to use each, and the patterns to avoid.

Preload: tell the browser what you need first

Without preload, the browser discovers your hero image when it parses the body. By then it has been busy parsing CSS and possibly executing JavaScript for hundreds of milliseconds. Preload tells the browser to start downloading a specific resource as soon as it sees the head.

For Shopify product pages, preload your LCP image (typically the hero product photo). Use a link tag in the theme’s head with rel set to preload, as set to image, and an imagesrcset attribute for responsive variants. This is the single highest-impact resource hint for Shopify stores.

Preconnect: warm up critical third-party domains

Every third-party domain your store talks to (CDN, analytics, fonts, apps) requires a DNS lookup, TCP handshake, and TLS negotiation. That adds 100 to 300ms per domain before any actual request can complete.

Preconnect tells the browser to perform that handshake early, in parallel with other work. Add preconnect links in the head for your most critical third-party domains: the CDN serving your hero images, your fonts host, and your analytics endpoint.

Do not preconnect to everything. Each preconnect uses bandwidth and a TCP connection. Pick the three or four domains that matter most for first paint.

DNS-prefetch: the lighter alternative to preconnect

DNS-prefetch only resolves the hostname; it does not perform the TLS handshake. It is cheaper than preconnect but less effective. Use DNS-prefetch for third-party domains you might need but are not certain to use (geo-targeted apps, conditional analytics, optional payment methods).

Prefetch: anticipate the next navigation

Prefetch downloads a resource in the background, at low priority, in anticipation of the next page. On Shopify, the most common use is prefetching collection pages from the home page or prefetching the cart from the product page.

The risk: prefetching everything wastes bandwidth (which matters on mobile). Prefetch only the next-most-likely navigation. For example, on the product page, prefetch the cart and shipping pages because most buyers go there next.

Speculation Rules: the 2026 replacement for prefetch

Chrome 121 and later support Speculation Rules, a more intelligent prefetch mechanism. You declare which URLs to prefetch (or even pre-render) and the browser uses heuristics to decide when. For Shopify stores with predictable navigation paths, Speculation Rules can dramatically improve perceived speed of internal navigation.

Implementation is a script tag in the head with a JSON object listing the URLs. The performance win on internal navigation is meaningful: pages that have been pre-rendered appear instantly when the buyer clicks.

Lazy loading: do not download what you do not need yet

The native loading attribute (set to lazy) tells the browser to delay downloading images and iframes until they approach the viewport. It is supported in all modern browsers and requires no JavaScript.

Apply loading=“lazy” to every image below the fold (collection thumbnails on the home page, related products on the product page, footer images, social embeds). The bandwidth saving on a typical Shopify product page is 50 to 70 percent.

One critical exception: never lazy-load the LCP image. Lazy loading delays its discovery, which hurts LCP. Hero images on product pages, banner images on collection pages, and any other above-the-fold visual should use loading=“eager” or omit the attribute entirely.

Fetchpriority: the new resource priority hint

The fetchpriority attribute lets you tell the browser which resources to prioritise. For Shopify product pages, set fetchpriority=“high” on the hero image. This is even more effective than preload in some cases because it adjusts the priority within the browser’s existing queue without adding an extra request.

Browser support for fetchpriority is in all modern browsers as of 2026. It is a simple attribute to add and has no downside.

Common mistakes

Patterns to avoid:

• Preloading everything. Preload uses high priority, so preloading too many resources slows down the things that actually matter.
• Preconnecting to every analytics provider. Each preconnect uses bandwidth. Pick the three that matter most.
• Lazy-loading the hero image. Slows LCP significantly.
• Prefetching pages the user is unlikely to visit. Wastes bandwidth, especially on metered mobile connections.
• Using preload for fonts without crossorigin. The browser cannot reuse the connection and re-downloads the font.

Implementation order for Shopify

Apply resource hints in this order:

1. Lazy-load every below-the-fold image and iframe. Biggest bandwidth win, zero risk.
2. Preload the LCP image on the product template with responsive srcset. Biggest LCP win.
3. Add fetchpriority=“high” to the LCP image element itself, even if preloaded.
4. Preconnect to your top three critical third-party domains.
5. Add Speculation Rules for predictable next navigations (cart, shipping page).

Measure each change with PageSpeed Insights and field data after 28 days. Resource hints are some of the lowest-risk, highest-reward performance work you can do on Shopify. Most merchants see a 200 to 500ms LCP improvement from applying the first three above, with no design or content change.

Our Sydney web hosting team bakes resource hint best practice into every Shopify performance engagement. If you want help applying these to your store, we can audit your current setup and apply the right hints in a single afternoon.

For more on the full performance picture, see our Sydney web development services. Resource hints are one chapter; theme code, app audit, and CDN configuration are the others.