Compress an image when its download time is a real bottleneck. For Largest Contentful Paint, first identify the element and determine whether the delay comes from discovery, downloading or rendering. For layout shifts, reserve space for the image. A smaller file alone cannot fix every loading delay or guarantee a better search position.
Identify the actual LCP element
LCP measures when the largest eligible image or text block becomes visible in the viewport. It is not always the hero photograph. Use a performance trace or PageSpeed Insights to identify the element for the page and device you are investigating. Google recommends LCP of 2.5 seconds or less for at least 75% of visits; one fast local test does not establish that result for all visitors.
Match the fix to the delay
| Observation | Useful next check |
|---|---|
| The image request starts late | Check lazy loading, JavaScript insertion and resource discovery |
| The request starts early but downloads slowly | Compare transfer size, dimensions, connection and caching |
| The image downloads but appears late | Inspect rendering work and hidden content |
| Content moves when the image appears | Reserve the correct aspect ratio or intrinsic dimensions |
Do not lazy-load the LCP image. Let below-the-fold images load lazily where appropriate. Prioritizing every image weakens the distinction between important and secondary resources, so choose priorities based on the actual page rather than adding them everywhere.
Reserve image space independently of compression
Provide width and height that represent the source aspect ratio, or reserve the intended layout ratio in CSS. Keep responsive styling consistent with that space. If a product card changes shape after its image arrives, exporting fewer bytes may shorten the wait but leaves the layout bug in place.
Compare before and after under the same conditions
- →Record the page, viewport, network conditions and cache state.
- →Change one likely bottleneck, such as the hero dimensions or its discovery path.
- →Repeat the same lab measurement and inspect the request timeline.
- →Check real-user field data over time when enough visits are available.
- →Recheck visual quality and layout rather than judging the result only by a score.
Image compression does not directly make the server send the initial HTML sooner. It also does not by itself solve interaction delays caused by JavaScript. Treat file size, server response time, rendering work and layout stability as related but distinct problems.