MediumSpeedMeasured

Main image on the first screen loads late on phones

The largest image on a phone’s first screen is set to lazy-load, so the browser starts downloading it only after laying out the page, and the first thing shoppers see appears late.

Checked on: homepage, product pages and collection pages · Zolvio’s check: “The first screen's main image loads late on phones”

Why it costs you sales

Lazy loading (loading="lazy") tells the browser to fetch an image only when it’s about to come into view. That saves data for images further down the page, but an image that’s already on the first screen then waits until the browser has laid out the page, so the main image shoppers see first arrives late.

That image is usually the page’s Largest Contentful Paint, one of Google’s Core Web Vitals, and Google’s web.dev guidance is not to lazy-load it.

How Zolvio detects it

Zolvio opens your homepage, collection pages and product pages at 375 pixels wide, the width of a typical phone, and finds the largest picture a shopper sees on the first screen, by the part of it that’s on screen (hidden pictures and ones fixed over the page are left out). The page is flagged when that picture is an image set to loading="lazy", covering at least 15% of the first screen, from an image file (not an inline or vector image).

When the browser’s own largest paint is another image, one that loads straight away and is about as big, that image is the first screen’s main one and the page passes. A page an A/B-testing app kept hidden isn’t judged, and neither is an image in a slideshow on a page that requests files from public code libraries (such as jsDelivr, unpkg or cdnjs), which the audit’s browser doesn’t load. The finding names the image, its size on screen and its share of the first screen.

This is a direct measurement, so it’s reported on every plan, including Free and audits with AI turned off. With AI review on, the AI agent also checks it against the audit’s evidence before it reaches your issue list.

How to fix it

  1. In the theme editor, open the first section of the page (a slideshow, an image banner or the product media) and turn off lazy loading for its image if the section has that setting.
  2. Otherwise, in Online Store → Themes → Edit code, find that section’s image_tag or <img> for the first image and set loading: 'eager' (and fetchpriority: 'high'), keeping loading="lazy" for images further down.
  3. Run the page through Google PageSpeed Insights on mobile: its Largest Contentful Paint element should no longer be lazily loaded.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Main image on the first screen loads late on phones” cost a Shopify store sales?

Lazy loading (loading="lazy") tells the browser to fetch an image only when it’s about to come into view. That saves data for images further down the page, but an image that’s already on the first screen then waits until the browser has laid out the page, so the main image shoppers see first arrives late. That image is usually the page’s Largest Contentful Paint, one of Google’s Core Web Vitals, and Google’s web.dev guidance is not to lazy-load it.

How does Zolvio detect “Main image on the first screen loads late on phones”?

Zolvio opens your homepage, collection pages and product pages at 375 pixels wide, the width of a typical phone, and finds the largest picture a shopper sees on the first screen, by the part of it that’s on screen (hidden pictures and ones fixed over the page are left out). The page is flagged when that picture is an image set to loading="lazy", covering at least 15% of the first screen, from an image file (not an inline or vector image). When the browser’s own largest paint is another image, one that loads straight away and is about as big, that image is the first screen’s main one and the page passes. A page an A/B-testing app kept hidden isn’t judged, and neither is an image in a slideshow on a page that requests files from public code libraries (such as jsDelivr, unpkg or cdnjs), which the audit’s browser doesn’t load. The finding names the image, its size on screen and its share of the first screen.

How do I fix “Main image on the first screen loads late on phones” on Shopify?

In the theme editor, open the first section of the page (a slideshow, an image banner or the product media) and turn off lazy loading for its image if the section has that setting. Otherwise, in Online Store → Themes → Edit code, find that section’s image_tag or <img> for the first image and set loading: 'eager' (and fetchpriority: 'high'), keeping loading="lazy" for images further down. Run the page through Google PageSpeed Insights on mobile: its Largest Contentful Paint element should no longer be lazily loaded.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Workflows — Go from an issue to its heatmap and recordings before you change anything.