How image compression improves LCP and Core Web Vitals

Largest Contentful Paint records when the largest text block or image in the viewport finishes rendering. It is a proxy for the moment the page looks useful, and Google treats 2.5 seconds or less as good, measured at the 75th percentile of real visits.

Because a hero image is usually the largest element, LCP is often just a measure of how quickly one image arrives and decodes. That breaks down into four parts: how long the server took to respond, how long before the browser discovered the image, how long it took to download, and how long to render it.

Compression attacks the third directly and the fourth slightly. Preloading and fetchpriority attack the second. If your problem is the first — a slow server — no amount of image work will fix it, which is why it is worth measuring before optimising.

loading="lazy" tells the browser not to fetch an image until it approaches the viewport. For images further down a page this is genuinely valuable — most visitors never scroll to them.

Applied to the LCP image it is actively harmful. The browser deliberately delays the one request your score depends on, and the delay lands squarely in the metric. Blanket "lazy-load all images" advice, and plugins that apply it indiscriminately, cause this constantly.

The rule: lazy-load everything below the fold, never the hero.

Cumulative Layout Shift measures how much visible content moves during loading. An image without declared dimensions occupies no space until it arrives, and then suddenly occupies a great deal — pushing everything below it down the page, often just as someone is reading or tapping.

Setting width and height fixes it completely. Modern browsers use those attributes to compute an aspect ratio and reserve the correct box before a single byte arrives, and CSS such as width: 100%; height: auto still scales the image responsively. You are not fixing the layout by adding them — you are giving the browser the ratio.

The same applies to anything that arrives late: adverts, embeds and web fonts all shift layout unless space is reserved for them.

Interaction to Next Paint, which replaced First Input Delay in 2024, measures responsiveness to user input, with 200 ms or less counting as good. Images affect it only indirectly.

Decoding a large image occupies the main thread, and a page decoding many at once can be slow to respond to a tap. Very large images make this worse, as do heavy JavaScript image galleries. Serving appropriately sized files is the fix — again, resolution rather than quality.

1. Measure. Identify the LCP element and the largest requests. Field data beats lab data.
2. Fix the one image that matters. Resize, compress, remove lazy loading, add fetchpriority="high".
3. Add dimensions everywhere. This is cheap and usually resolves CLS outright.
4. Lazy-load everything below the fold. Not before it.
5. Convert to WebP. A free 25–35% once everything else is right.
6. Then look at fonts, scripts and server response.

Most sites get the majority of their improvement from steps two and three alone.