Shopify Core Web Vitals: how product images hurt LCP (and how to fix it) 2026

August 4, 2026
Shopify Tips
9 min read
a large product photo on a web page next to a speed performance gauge and a small downward-shifting layout blocks icon, representing image loading speed and layout stability

Short answer: On most Shopify product pages the biggest, slowest thing to paint is a product image, which makes it your Largest Contentful Paint element. Images hurt two Core Web Vitals: LCP (loading) and CLS (layout stability). The fixes are modern formats, real compression, correct dimensions, and never lazy-loading the image above the fold.

Everyone obsesses over apps and theme code when a Shopify store feels slow. Often the actual culprit is sitting in plain sight: a 2 MB hero image the browser has to download and paint before the page counts as “loaded.” Google measures that moment, and product photos are usually what it is waiting on.

So let’s be specific. Which Core Web Vital do images actually move, why is your hero photo almost certainly the one being measured, and what changes the number? No vague “optimize your images” advice. The exact levers.

In this post

Which Core Web Vital do images hurt?

Google grades three metrics at the 75th percentile of real visits. Two of them are image problems:

  • LCP (Largest Contentful Paint), good is 2.5s or under. The time until the biggest element above the fold finishes painting. On a product page that element is almost always an image, so a heavy hero directly sets this number.
  • CLS (Cumulative Layout Shift), good is 0.1 or under. How much the page jumps while it loads. An image with no reserved width and height pushes everything below it down the instant it arrives, and that jump is what CLS counts.
  • INP (Interaction to Next Paint), good is 200ms or under. Response time after a tap. This one is about JavaScript, not images, and it replaced FID in March 2024. Images rarely move it.

Worth keeping in perspective: Core Web Vitals are a ranking input, but a tiebreaker, not an override. Google’s own line is that they are “used by our ranking systems” while a good score “doesn’t guarantee that your pages will rank at the top.” So fixing images will not vault a thin page to the top, but on a genuinely useful page it helps you win against equally useful, slower competitors. And it obviously helps conversion regardless of ranking. Run your worst offenders through the free image audit before you go further.

Why your product image is your LCP element

LCP measures the largest element painted in the viewport. On a blog post that is usually a block of text. On a Shopify product page it is the product photo, because a big, high-resolution image is by definition the largest thing on the screen and the slowest to arrive over the network. Text renders almost instantly. A 3000 pixel JPEG does not.

This is why “my theme is slow” is often the wrong diagnosis. The theme rendered fine. It is waiting on the image. Two habits make it worse than it needs to be: uploading photos far larger than they display, and lazy-loading the hero. Lazy loading is a genuine win for images below the fold, but applied to the above-the-fold hero it does the opposite of what you want, it tells the browser to wait before fetching the exact image LCP is timing. That single misconfiguration can add a second or more.

The image fixes that actually move LCP

  1. Serve modern formats. WebP and AVIF are far smaller than JPEG or PNG at the same quality. Shopify’s image CDN can serve WebP automatically, so the main job is uploading a sane source and letting the platform do the format conversion.
  2. Compress before you upload. A photo straight off a camera or a design tool is often several megabytes. Compress it first so the source itself is light. The free image compressor handles this without a quality hit you would notice.
  3. Match the delivered size to the displayed size. A 3000 pixel image shown in a 600 pixel box wastes most of that download. Use Shopify’s responsive image sizing so the browser picks an appropriately sized file for the device.
  4. Load the hero eagerly, not lazily. The above-the-fold product image should be fetched immediately. Reserve lazy loading for gallery thumbnails and anything below the fold. Some themes let you flag the first image as high priority, which nudges the browser to fetch it first.
  5. Cut the number of large images racing to load. A gallery that eagerly loads twelve full-size variant images at once starves the hero of bandwidth. Show the images for the selected variant and defer the rest.

That last point has a quiet SEO and UX bonus. When the product page only loads the images that belong to the chosen variant instead of every photo for every color, there is less for the browser to fetch on first paint. Showing only the relevant variant images is a merchandising decision that happens to be a performance one too.

Stopping the layout shift (CLS)

CLS is the easy one to fix and the easy one to forget. The cause is almost always an image with no dimensions. The browser does not know how tall the image will be until it arrives, so it reserves no space, lays out the text, then shoves it all down when the image finally loads. Every shove counts against you.

The fix is to give every image an explicit width and height (or a CSS aspect ratio) so the browser reserves the right box up front and nothing jumps. Most modern Shopify themes do this correctly. The usual offenders are custom sections, app-injected content, and images dropped into a page builder without dimensions. If your CLS is bad, that is where to look first. Our product page optimization checklist covers the rest of the layout-stability wins.

How to measure it properly

There are two kinds of data and people confuse them constantly. Field data is what real visitors experienced, and it is what Google actually uses for ranking. Lab data is a simulated single run, useful for diagnosis but not the ranking input. Use both, for different jobs:

  • Google Search Console, Core Web Vitals report. This is field data from your real traffic, grouped by page type. Start here to see which templates are failing and for which metric.
  • PageSpeed Insights. Shows field data at the top (if your page has enough traffic) and a lab diagnosis below, with a specific “Largest Contentful Paint element” callout that names the exact image slowing you down.
  • Lighthouse in Chrome DevTools. A lab run you control, good for testing a fix before you ship it. Aim for 90 or above as a diagnostic target, not as the ranking number.

One rule that saves a lot of confusion: always re-test after you publish a change, on the real page, not the theme preview. A preview and a live page with all your apps loaded can score very differently, and the live page is the one your shoppers and Google see.

Frequently asked questions

Do images affect Core Web Vitals on Shopify?

Yes, heavily. Images are usually the Largest Contentful Paint element on a product page, so a big or lazy-loaded hero drives LCP up. Images without set dimensions also cause layout shift, which drives CLS up. INP, the third metric, is a JavaScript problem and images rarely affect it.

What is a good LCP for a Shopify store?

2.5 seconds or under is Google’s “good” threshold, measured at the 75th percentile of real visits. Between 2.5 and 4 seconds needs improvement, and over 4 seconds is poor. On a product page, hitting the good range usually comes down to compressing the hero image and loading it eagerly.

Should I lazy-load Shopify product images?

Lazy-load images below the fold, but never the main product image above the fold. Lazy-loading the hero delays the exact element LCP measures, which hurts your score. Load the first image eagerly and lazy-load gallery thumbnails and anything further down the page.

Does Shopify serve WebP automatically?

Shopify’s image CDN can serve modern formats like WebP based on the browser, so you generally do not convert files by hand. Your job is to upload a compressed, correctly sized source. Oversized originals still waste bandwidth even when the format is efficient, so compression before upload still matters.

Are Core Web Vitals a Google ranking factor?

Yes, but as a tiebreaker. Google says Core Web Vitals are used by its ranking systems, while stressing that a good score does not guarantee a top position. Relevance and helpfulness come first; page experience helps a genuinely useful page win against equally useful but slower ones.

Pick your single highest-traffic product template and run it through PageSpeed Insights right now. Read the Largest Contentful Paint element it names, and there is your first job: that one image, compressed, correctly sized, and loaded eagerly. Fix it on the template and you fix it on every product that uses it.

Co-Founder at Craftshift

You may also like