When a Shopify product page feels slow on mobile, start by looking at what the browser loads and when. Here are three checks you can run before changing the theme.
1. Find the LCP element
Run a mobile performance test and identify the Largest Contentful Paint (LCP) element. On a product page it might be the featured image, but the report will tell you which element actually counted for that run.
If it’s the main product image, make sure it appears in the initial HTML and loads eagerly. Consider fetchpriority="high" for that image when it’s the main LCP candidate. Keep offscreen gallery images lazy-loaded.
2. Check which image mobile visitors download
Open DevTools, select a mobile viewport, and reload with the Network panel open. Find the product image request and compare the downloaded image width with the space it occupies on screen, accounting for device pixel ratio.
In Liquid, use Shopify CDN image widths in your responsive markup. Make sure sizes describes the image’s rendered slot at each breakpoint so the browser can choose an appropriate srcset candidate. Include intrinsic width and height so the browser can reserve space before the image loads.
3. Scope scripts to the pages that need them
Look for scripts loaded globally that support a feature used on only one template. Before moving a script, check for shared entry points. A product gallery script might also power a quick view on collection pages.
After changing script loading, test variant selection, gallery navigation, quick view where applicable, and add to cart.
Verify the change
Repeat the mobile test under the same conditions and compare the median LCP. If the theme change is shared, check the homepage and a collection page too. Review real-user data when it’s available.
Top comments (0)