What is a good LCP score for a Shopify store?

Google classifies LCP as 'good' if it is under 2.5 seconds, 'needs improvement' between 2.5 and 4 seconds, and 'poor' above 4 seconds. In our data, the majority of Shopify stores fall in the 'needs improvement' range on mobile. Achieving under 2.5 seconds mobile LCP is realistic with proper image optimisation and script management, and puts you ahead of most competitors.

What element is usually the LCP on a Shopify store?

On most Shopify stores, the LCP element is the hero image on the homepage or the first product image on a product page. These are large images that load above the fold and are therefore the largest contentful element the browser renders first. Optimising these specific images has the highest impact on LCP score.

Does Shopify's CDN help with LCP?

Shopify uses Fastly's CDN to serve images and assets, which helps with delivery latency. However, the CDN cannot compensate for images that are too large or in slow formats. A 2MB JPEG served via CDN is still slower than a 150KB WebP served from the same CDN. The CDN solves geography; you still need to solve file size and format.

How to Fix LCP on Shopify: A Technical Guide

Largest Contentful Paint measures how long it takes for the biggest visible element on the page to load. For most Shopify stores, that element is a hero image or a product photo. Google uses LCP as a ranking signal under Core Web Vitals, and it is the metric most Shopify stores fail.

The average LCP across stores in our dataset is 3.8 seconds on mobile. The threshold for a "good" rating is 2.5 seconds. Here is how to close that gap.

Step 1: Identify Your LCP Element

Open Chrome DevTools (F12), go to the Performance tab, and record a page load. Under the Timings section, LCP will be flagged with the specific element that triggered it. Alternatively, run the URL through PageSpeed Insights — the LCP element is displayed in the diagnostics section.

On most Shopify stores you will find one of these:

A hero image in a banner or slideshow section
The first product image on a product detail page
A collection header image

Once you know which element is the LCP, every fix you make is targeted at that specific resource.

Step 2: Optimise the LCP Image

This is where you will get the biggest gains.

Convert to WebP. WebP files are typically 25 to 35% smaller than JPEG at equivalent quality. Shopify supports WebP delivery natively when you use the image_url filter with the format: 'webp' option in your theme code.

Size it correctly. The LCP image should be served at the actual display size, not the full original resolution. Check what size the image renders at on mobile (use DevTools to inspect) and ensure your theme is requesting an image at that size via the width parameter in image_url.

Remove lazy loading from the LCP element. Lazy loading defers image loading until the image is near the viewport. For the LCP element, which is always in the viewport on load, lazy loading actively hurts LCP by adding unnecessary delay. Check your theme code and ensure the hero or first product image does not have loading="lazy" on its <img> tag.

Preload the LCP image. Add a <link rel="preload"> tag in your theme's <head> for the LCP image. This tells the browser to start fetching the image as early as possible, before the browser has finished parsing the page.

Step 3: Reduce Render-Blocking Resources

Even if your image is perfectly optimised, render-blocking scripts delay when the browser can start rendering the page, which pushes out LCP.

In PageSpeed Insights, look at the "Eliminate render-blocking resources" diagnostic. These are scripts or stylesheets loading in the document <head> that block rendering.

For third-party scripts (analytics, chat widgets, tracking pixels), add the defer attribute where possible. For non-critical CSS, consider loading it asynchronously. In your Shopify theme, scripts loaded via {{ 'script.js' | asset_url | script_tag }} load synchronously by default — switch to an explicit <script src="..." defer> tag instead.

Step 4: Check Your Server Response Time

Time to First Byte (TTFB) is the time before the browser receives the first byte of HTML from the server. High TTFB delays everything, including LCP.

Shopify's infrastructure handles TTFB well for most stores, typically under 200ms. If you are seeing TTFB above 600ms in your PageSpeed report, the cause is usually a Shopify app making server-side API calls during page render, or a poorly configured third-party domain on which your theme depends.

Step 5: Test on Real Mobile Devices

PageSpeed scores are simulated, using a mid-range Android device on a throttled mobile connection. Test your actual LCP on a real mid-range phone using Chrome's Lighthouse in DevTools. Perception on a £800 iPhone can mislead you — your customers may be on slower hardware.

Setting a Target

A realistic target for most Shopify stores with proper optimisation is LCP under 2.5 seconds on mobile and under 1.5 seconds on desktop. Stores running lightweight themes like Craft or Dawn with well-optimised images consistently achieve this range.

Compare your LCP performance against similar stores in your category at CommerceRank.ai to see where you stand.