Theme image output and product media
Check the image markup of the theme for each location. The first visible product image and images far below in a collection need different loading decisions.
Check the theme-generated image URLs, sizes and alternative text for product media. The same original can be used in a small product card and a large gallery with different requirements.
Where to Check Settings in Shopify
Check the image output of the affected section and its use of image_url and image_tag. Compare requested width, responsive sources and alt text with the product medium. The largest original file does not have to be shipped to every screen size.
Example of this specific finding
Illustrative control case: Twenty images far below the first visible area load immediately. The large visible hero image, on the other hand, does not belong in the same delay rule.
follow-up audit in Shopify
Control the actually loaded variant in the mobile network protocol. The first visible product image does not move blanket behind lazy loading.
Suitable downstream images are loaded delayed and checked in the network protocol when scrolling. Continue to request visible key images in time.
Derogations and scope
Lack of lazy loading on the LCP image is often intentional. A blanket rule for all images can worsen the visible loading time.
Related: Shopify Online Store with Liquid-Theme. Hydrogen or other headless storefronts have their own rendering and hosting responsibilities.
Classify the general error
Definition, system-independent causes and further correction examples: Judge images by their position in the first screen
Configuration and test signal documentation
Shopify: image_tag and image attributes