How to Fix Largest Contentful Paint (LCP) on Your Shopify Store

A bloated hero image is the most common reason an Australian Shopify product page fails Core Web Vitals. The fix is rarely glamorous. It is a sequence of small, deliberate changes to how your theme requests, ships, and renders that first big image. This article walks through every LCP fix we apply on Shopify performance engagements at Defyn, in the order we apply them.

If you are new to Core Web Vitals, start with our Shopify Core Web Vitals audit guide and come back here when you have identified LCP as your problem metric.

What LCP actually measures

Largest Contentful Paint is the time from when the user starts navigating to when the largest visible element finishes painting. On a Shopify product page, that element is almost always the hero product image, a hero video poster frame, or occasionally a large headline.

Google’s good threshold is 2.5 seconds at the 75th percentile of real-user data. Poor is anything above 4 seconds. Anywhere between is “needs improvement” and still costs you ranking.

Step 1: Identify your LCP element

You cannot fix what you cannot see. In Chrome DevTools, open the Performance panel, record a page load, and look at the timeline. The LCP marker shows you exactly which element painted last. PageSpeed Insights also surfaces the Largest Contentful Paint element under the diagnostics section.

For most Shopify product pages you will see the hero image. If it is the headline or a text block, your image strategy is fine and the bottleneck is somewhere else, usually render-blocking scripts.

Step 2: Preload the LCP image

The single biggest win for LCP on Shopify is preloading the hero image. By default, the browser discovers your hero image when it parses the body. By that time, the browser has already spent 500 to 1500 milliseconds parsing CSS and possibly executing JavaScript.

Add a preload link tag to your theme’s head, conditionally for the product template, that points to the hero image with a responsive srcset. This tells the browser to start downloading the image before anything else on the page. We have measured 400 to 800 millisecond LCP improvements from this single change on stores running Dawn-based themes.

Step 3: Right-size the image

Browsers download what you ask them to download. If your hero is a 2400 pixel wide image being rendered at 800 pixels wide, you are wasting nine times more bandwidth than you need. Use Shopify’s image_url filter with a width parameter that matches the largest size you actually render. For responsive layouts, generate multiple sizes with srcset and let the browser pick.

Step 4: Use the right image format

Shopify automatically serves WebP to browsers that support it, which is nearly all of them in 2026. Some plans now support AVIF, which is 20 to 30 percent smaller than WebP at the same quality. If your store is on Shopify Plus, ask your developer to enable AVIF delivery on the product template. Avoid JPEGs above 80 percent quality for hero images. The visual difference is invisible. The file size difference is significant.

Step 5: Eliminate render-blocking resources

Before the browser can paint your LCP element, it has to download and execute every render-blocking CSS file and synchronous script in the page head. On a typical Shopify store, that means the main theme stylesheet, multiple app stylesheets, and sometimes five or six synchronous third-party scripts.

Audit what is in your head: open Chrome DevTools Network tab, filter for JS, and look at anything loaded with high priority. For each, ask whether it needs to run before the page paints. Most third-party scripts like analytics, chat widgets, and A/B testing can be deferred without affecting the experience. Add defer or async attributes. Move non-critical CSS into the body or load it asynchronously.

Step 6: Reduce app overhead on the product template

Every Shopify app that touches the product page slows it down. Review your installed apps and look for ones that inject scripts into the product template that do not need to fire before the image paints, like review widgets, wishlist buttons, and recently-viewed bars. The same applies to apps that add blocking stylesheets or make API calls during initial render.

The fix is rarely to uninstall the app. It is usually to load the app’s assets after the LCP image paints. Most app vendors have docs on deferred loading. Where they do not, our Sydney web development team can refactor the integration so the app fires later in the page lifecycle.

Step 7: Use a CDN that caches HTML

Shopify’s Fastly cache serves your assets well, but the HTML response itself is generated per request. Putting a CDN in front of Shopify (we use Cloudflare on most of our merchant builds) lets you cache the HTML response for repeat visitors, cutting TTFB and LCP by hundreds of milliseconds. The full setup is in our Cloudflare Proxy with Shopify guide.

A real-world before and after

A Sydney fashion merchant we audited last month had a product page with LCP of 4.8 seconds (poor), a hero image at 2200 pixels served as JPEG at 95 percent quality, no preload, and six render-blocking scripts in the head from various apps. After applying steps 2 through 6 above: LCP dropped to 1.9 seconds (good), 28-day field data confirmed the improvement, and organic traffic rose 14 percent over the following 90 days. No theme rebuild, no platform migration. Six targeted changes, deployed in one afternoon.

When to stop tweaking and start measuring

After every change, re-run PageSpeed Insights and check the lab score. The real verdict comes 28 days later when field data refreshes in Search Console. If LCP is still failing after applying every step above, the bottleneck may be elsewhere: slow third-party API calls, expensive Liquid loops, oversized fonts. At that point, ask for a structured audit. Our team can walk through your theme code, SEO setup, and infrastructure in a half-day engagement and come back with a prioritised plan.

LCP is one of three Core Web Vitals, but it is the one that gives you the most visible win when you fix it. A faster hero image makes your store feel better to humans, ranks better with Google, and converts more browsers into buyers.