The Main Product Image and LCP on Shopify: What to Change

On most Shopify product pages the Largest Contentful Paint is the main product image, and it loads fastest when the browser finds it early, does not lazy load it and fetches it at high priority. Many themes build that image with Shopify’s image_tag filter without a fetch priority. AccessComply finds each page’s LCP image in a lab browser and flags it when it is lazy loaded or has neither fetchpriority="high" nor a preload. It fixes it only where exactly one tag in your theme is that image, which leaves out most product galleries, so this guide also gives the one line a developer can add.

Why the main image decides LCP on product pages

Largest Contentful Paint measures when the largest image or text block in view finishes rendering, and Google counts 2.5 seconds or less as good. On a product page that is almost always the first product photo. Google’s guide to optimizing LCP splits the time into four parts: the server’s first byte, the delay before the browser starts loading the image, the time the image takes to load, and the delay before it is drawn. The second part is where themes lose the most, and three rules from the same guide address it:

• Never lazy load the LCP image. Lazy loading makes the browser wait before it even starts the request.
• Mark it as the priority with fetchpriority="high", so it does not queue behind scripts and other images.
• Let the browser find it in the HTML. An image referenced only from CSS or JavaScript should be preloaded.

What the scan checks about the main image

The scan loads each page in a lab browser, reads which element the browser reported as the Largest Contentful Paint, and checks it:

The timing comes from one run in a lab browser, not from your shoppers’ visits, so treat it as a pointer to the cause rather than your score.

What Dawn does today

Dawn, Shopify’s reference theme, shows how a well built theme still ends up flagged. In version 16.0.0 the product gallery loads the first product image without lazy loading, which is right, but its image_tag call passes no fetch priority. Dawn’s image banner and slideshow do set fetchpriority to high for the first section on the page, so a home page hero is prioritized while a product photo is not. The result on a product page is an image that loads eagerly but at the browser’s default priority.

What the app changes, and when it cannot

After you approve, AccessComply adds fetchpriority="high" to the LCP image and removes loading="lazy" from it, as an attribute change on the exact image tag in your theme, with the theme backed up first and the page measured again afterwards.

It does this only when exactly one tag in your theme is that image, such as a banner written into a section with a fixed file. A product gallery is different: its tag is built from whatever product is being shown, so one photo on one page does not identify one line of code, and a change to the shared tag would reach every product. In that case the app leaves the theme alone and the finding stays on your list with the page it came from. That is the honest limit of editing a theme safely, and it is why speed fixes are fewer than speed findings on most stores.

The one line a developer can add

Shopify’s image_tag filter accepts HTML attributes as parameters, so the change belongs in the snippet that renders the first product image:

{{ product.featured_image | image_url: width: 1200 | image_tag: fetchpriority: 'high' }}

Keep it to the first image only: marking every gallery image as high priority makes them compete with each other again. The same filter also takes preload: true, which sends a preload hint as a Link header; Shopify’s documentation notes that without it, images in sections further down the page are set to lazy load automatically, which is what you want for everything below the first screen.

Check the result with real visits

A lab run tells you the cause; your shoppers tell you the result. Shopify’s web performance reports in the admin show Largest Contentful Paint from real visits over the past 30 days, rated good, moderate or poor. Change the image, wait for new visits, and compare.

The speed topic collects the related guides, and Shopify page speed: what AccessComply checks and fixes covers the other speed checks. The image fixes are rule based, so they come with every paid plan from $29 a month and count toward Free’s 3 fixes every 30 days. See pricing.

Sources

• web.dev, Optimize Largest Contentful Paint.
• web.dev, Web Vitals.
• Shopify developer documentation, image_tag.
• Shopify Help Center, Web performance reports.