Resource Preloading
Preloading is a browser hint (<link rel='preload'>) that instructs the browser to fetch a specific resource early — before it's discovered in the normal render path. It's most effective for LCP images, critical fonts, and key JavaScript files that appear later in the page.
Why It Matters for Shopify Stores
Preloading the LCP image (typically your hero or product photo) is one of the highest-impact single optimizations for Shopify product pages. Without preloading, the browser discovers the LCP image only after parsing the HTML and downloading the stylesheet that references it — adding 200–600ms of delay. Adding a <link rel='preload' fetchpriority='high'> for your LCP element in the <head> can reduce LCP by 0.5–1.5 seconds on mobile.
How to Check Your Store
In Google PageSpeed Insights, look for 'Preload Largest Contentful Paint image' as a listed Opportunity. In Chrome DevTools > Network, check if your LCP image has an initiator of 'html' (preloaded) or 'css/link' (not preloaded).
Use the free shopify speed test toolHow to Fix It
In your theme's layout/theme.liquid, add a preload link for the hero image or product's featured image using Liquid: {% assign hero = section.settings.image %} <link rel='preload' as='image' href='{{ hero | image_url: width: 1200 }}' fetchpriority='high'>.
Related Terms
LCP (Largest Contentful Paint)
Core Web VitalsLargest Contentful Paint measures how long it takes for the largest visible content element on a page — usually a hero image or headline — to finish loading.
Render-Blocking Resources
PerformanceRender-blocking resources are CSS or JavaScript files that prevent a browser from displaying page content until they've fully downloaded and parsed.
FCP (First Contentful Paint)
Core Web VitalsFirst Contentful Paint marks the point when the browser first renders any text, image, or non-white content to the screen.
Preconnect / Prefetch
PerformancePreconnect is a resource hint that tells the browser to establish a connection (DNS lookup, TCP handshake, TLS negotiation) to an external domain early — before that domain's resources are actually requested.
Check your store's Resource Preloading with our free tools
Get a full audit across all 6 performance categories — including performance — in under 60 seconds.
Run a Free Store Audit