Fix LCP with image optimization

Largest Contentful Paint (LCP) measures how long the biggest visible element takes to load. On many pages that element is an image, such as a hero photo. This tutorial shows how to find it and speed it up.

What you need

• A page you want to improve.
• A tool that reports LCP, such as PageSpeed Insights or the Chrome DevTools performance panel.
• The MeloTools Image Optimizer plugin.

Step 1: find the LCP element

Run your page in a speed tool and look for the LCP element. If it is an image, note its file name, size, and format.

Step 2: reduce the file size

Large dimensions and heavy formats slow the LCP image. Resize it to the largest size it needs on screen, and convert it to WebP or AVIF. See Speed up WordPress with WebP and AVIF.

Step 3: avoid lazy loading the LCP image

Lazy loading is useful for images below the fold, but it can delay an image at the top of the page. Make sure your hero image loads right away.

Step 4: check other causes

Image size is only one cause of a slow LCP. Slow hosting, render-blocking scripts, and heavy fonts can also delay it. Fix the image first, then re-test to see what remains.

Step 5: clear caches and measure again

Clear your caches, run the same test, and compare the LCP before and after. Test on mobile settings, since that is where image size matters most.

Step 6: keep it fixed

Optimize new images when you upload them, and re-check key pages after theme or content changes. See How it works and Settings.