Reviewed October 26, 2026

Preloading Your Hero Image: The LCP Win Most Stores Miss

On most Shopify homepages the hero image is the Largest Contentful Paint element, and the browser finds it late. A preload hint moves it to the front of the queue. How to do it safely.

Why the hero image decides your LCP

Largest Contentful Paint measures when the biggest visible element renders, and on a typical store homepage that element is the hero image. The browser cannot start downloading it until it has fetched the page, parsed the markup, and worked through the styles and scripts queued ahead of it. Every asset in front of the hero delays the one asset the score, and the shopper, is actually waiting for.

A preload hint is a line in the page head that tells the browser to fetch a specific resource immediately at high priority, before it would naturally be discovered. Applied to the hero image, it moves the biggest download to the front of the queue. On image led hero pages this is routinely one of the largest single LCP improvements available, and it requires no image re-encoding, no theme surgery, and no app.

How to preload correctly

Add a preload link for the exact hero image file the page will display, in the head of the template that serves the hero, using the image preload format with the correct source set when your theme serves responsive sizes. The last clause is where implementations go wrong: preloading a desktop file that mobile never uses wastes bandwidth and can actively slow the mobile page, which is the page your field data mostly measures. Match the preloaded file to what each device will actually render.

Preload one image, the hero, and nothing else in this pass. Preloading is a priority claim, and claiming priority for five assets is the same as claiming it for none, with extra bandwidth spent proving it. Fonts and logos have their own queues. The hero gets the hint because it is the LCP element. If your LCP element is actually a text block or a video, this entire technique does not apply, so confirm the element in your speed tooling before editing anything.

Responsive heroes and the slideshow trap

Slideshow heroes need extra care. Preloading the first slide helps. Preloading the whole rotation recreates the priority pileup and downloads images many visitors never see. If the slideshow auto advances, consider that your LCP may also be unstable as slides swap, which is a separate argument for a single static hero that many speed focused stores have already accepted on conversion grounds too.

For separate mobile and desktop hero images, conditional preloading based on media attributes lets each device fetch only its own file. Test both viewports after the change with a throttled mobile profile, not just your office connection, and confirm in the network panel that the hero starts downloading near the top of the waterfall and that no duplicate download of a second size follows it.

Verify in field data, not just the lab

Lab tests will show the improvement quickly if the implementation is right. Field data, the real user measurements that search rankings use, moves over the rolling 28 day window, so judge the change after several weeks of traffic, segmented by mobile. Record the date of the change in your notes, because LCP graphs without annotations turn every later investigation into archaeology.

Preloading is a queue fix, not a weight fix. A two megabyte hero preloaded is still two megabytes, and pairing the preload with honest image compression and correctly sized responsive files compounds the win. Do the preload first because it is an afternoon. Then do the image diet, because together they are the difference between a homepage that feels instant and one that merely tests less badly.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Redirect Chains: The Invisible Delay in Front of Your Store, Critical CSS on Shopify: Render the Top of the Page First, and Lazy Loading Images on Shopify: Speed Gains and Pitfalls.

Frequently asked questions

What does preloading an image actually do?

It tells the browser to download that file immediately at high priority rather than waiting until it discovers the image during normal page parsing. For a hero image that is the Largest Contentful Paint element, starting the download earlier directly improves the LCP time.

Can preloading hurt performance?

Yes, when misused. Preloading files the page does not use, the wrong responsive size, or several assets at once wastes bandwidth and competes with genuinely critical resources. Preload the one hero file each device will actually display, and verify in the network panel.

How do I know if my hero image is the LCP element?

Run your homepage through a speed testing tool and read the LCP element diagnostic, which names the exact element. On most image led store homepages it is the hero. If it is a heading or a video instead, image preloading is not your fix.

Should I preload the hero on every page?

Only where that image is genuinely the largest above the fold element, typically the homepage and major landing or collection pages with banner heroes. Product pages have their own main image logic. Blanket preloading across templates dilutes priority and wastes bandwidth.