Image Delivery Is the Biggest LCP Win on Most Storefronts
When a storefront fails LCP, the instinct is to blame hosting or the framework. Usually the LCP element is a hero or product image, and the fix is in how that one image is produced, sized and prioritised — not in the stack underneath it.
Find the actual LCP element first
Do this before changing anything. It is frequently not what people assume: on category pages it is often the first product tile image rather than the banner, and on product pages it can be a gallery thumbnail if the main image lazy-loads. Optimising the wrong image produces a faster page and an unchanged score.
The four fixes that account for most of the gain
Stop lazy-loading the thing above the fold
Blanket lazy-loading is the most common self-inflicted LCP wound. Applying loading="lazy" to every image, including the hero, guarantees the browser deprioritises the one image the score depends on. Above-the-fold images should load eagerly; everything below should not.
Serve a size that matches the slot
Shipping a 2400px image into a 600px container wastes most of the bytes transferred. Responsive srcset with sensible breakpoints, and a sizes attribute that reflects the real layout, is unglamorous and consistently effective.
Use a modern format
AVIF and WebP are substantially smaller than JPEG at equivalent quality. Most platforms and CDNs can do this conversion on delivery, so the work is usually configuration rather than re-exporting a catalog.
Give the browser a priority hint
Preloading the LCP image, or marking it fetchpriority="high", moves it ahead of scripts and fonts in the queue. On a page carrying several third-party tags this alone can move LCP meaningfully, because the problem was never bandwidth — it was ordering.
Reserve the space while you are in there
Explicit width and height (or a CSS aspect ratio) on every image costs nothing and removes a whole class of layout shift. Doing it at the same time as the LCP work is efficient, since you are already touching the template.
What not to bother with first
Compressing images that sit below the fold does not improve LCP. Neither does shaving kilobytes off CSS while the hero image is still 900KB and lazy-loaded. Performance work rewards sequencing: find the element the metric is actually measuring, fix that, then measure again before choosing the next thing.
Verify in the field, not the lab
Lab tools are for diagnosis; field data is for knowing whether it worked. Image changes in particular show different results across devices and network conditions, so confirm the improvement in real-user data before calling it done.