How to improve WordPress LCP by optimizing images
A smaller file helps, but LCP also depends on discovery, priority, and HTML that reserves the image's space.
When the main image is the Largest Contentful Paint element, reducing its file size matters, but it is not the whole job. The browser also needs to discover it early, prioritize it correctly, and reserve space before the download completes.
Identify the LCP element first
Do not assume it is always the hero. Check browser performance tools or PageSpeed Insights. Mobile and desktop may identify different elements because the responsive layout changes.
Reduce network bytes
Resize to a sensible maximum, choose WebP or AVIF when the visual result is appropriate, and avoid unnecessarily high quality. Compressify can automate these decisions for new uploads and process the existing media library.
Make the image discoverable
An LCP image inserted late by JavaScript or hidden in a CSS background starts downloading later. Prefer an image element in the initial HTML. Do not lazy-load it when it appears in the first viewport, and reserve high priority for the main resource.
<img src="hero.webp" width="1280" height="720" fetchpriority="high" alt="...">Reserve its space
Width and height attributes let the browser calculate aspect ratio before receiving the file. This reduces layout movement and avoids repositioning the page when the image arrives.
Do not prioritize every image
Priority loses meaning when assigned to every thumbnail. Keep it for one or two critical resources. Below-the-fold images can use lazy loading so they do not compete with initial content.
Measure the complete LCP path
The final time includes server response, discovery delay, download, and render delay. If compression saves 200 ms but the resource remains undiscovered for a second, the main bottleneck is elsewhere. Repeat the trace after each change.
Checklist
- identify LCP on mobile and desktop;
- match dimensions to the design;
- validate format and quality;
- keep the image in initial HTML;
- avoid lazy loading above the fold;
- declare width and height;
- review caching and CDN behavior.
Compressify prepares the asset; the theme controls discovery, priority, and markup. Addressing both sides produces a durable improvement.
The web.dev LCP optimization guide explains why weight, discovery, download, and render delay need to be measured separately.
