Largest Contentful Paint (LCP) measures how long your biggest visible element takes to appear, and on most Shopify stores that element is the hero image. Which means most stores do not have a “site speed problem.” They have a one-image problem wearing a site speed costume.
This matters because slow paint is not a technical footnote, it is a conversion tax. A shopper who taps your ad and stares at a blank rectangle is deciding, right then, whether you are worth waiting for. Google’s own guidance calls for LCP under 2.5 seconds, and mobile shoppers on cellular are less patient than that number suggests.
Here is the hot take: do not buy a speed app yet. The speed app industry sells you minification, lazy loading, and preloading magic while a 4MB PNG exported straight from Photoshop sits at the top of your home page doing 80 percent of the damage. Fix the one asset first. It is free, it takes an afternoon, and it is usually the whole story.
The moment LCP measures
Same page, three moments in time. The clock stops when the biggest element paints, and the biggest element is almost always the hero.
Whether that last frame lands at 2.4 seconds or 6.8 is mostly decided by one file: the hero image’s format, dimensions, and weight.
The afternoon fix
- Find the culprit. Run your home page through PageSpeed Insights and look at the mobile score. It names the LCP element explicitly. Nine times out of ten, it is the hero.
- Weigh it. Aim for under 200KB for a full-width hero. If yours is over a megabyte, congratulations, you just found your speed strategy.
- Compress and convert. Drag the original into Squoosh, export as WebP, and eyeball the quality slider until just before you can tell the difference. Shopify’s CDN helps with resizing, but it cannot rescue a bloated source file with a huge intrinsic size.
- Right-size it. A 4000-pixel-wide image serving a 390-pixel-wide phone screen is pure waste. Upload something sane and let the theme’s srcset do its job.
- Do not lazy-load the hero. Lazy loading is for images below the fold. Lazy-loading your LCP element is asking the browser to please be slower.
Then re-run PageSpeed Insights and watch the LCP number drop. Repeat for your top collection pages and your bestseller product pages, since each template has its own biggest element. Total cost: zero dollars and one afternoon. We will get to image formats across the whole catalog later in the series; today is just the one image doing the most harm.
