How to improve Largest Contentful Paint (LCP)
By Ash, Founder, HosteazePublished 2 min read
The short answer
To improve Largest Contentful Paint, first find which element is your LCP, usually the hero image. Then cut the server response time with page caching, make sure the image isn't lazy-loaded and has fetchpriority set to high, shrink the image file, and remove render-blocking scripts. Aim for 2.5 seconds or less for three in four visits.
Largest Contentful Paint (LCP) is the time until the biggest thing in view, usually your hero photo or headline, appears on screen. It's one of Google's three Core Web Vitals, and a good score is 2.5 seconds or less. Most poor LCP scores come down to a few fixable causes, but you need to know which part of the load is slow before you start.
Where does LCP time actually go?
Google's web.dev guidance splits every LCP into four parts that add up to the total:
| Part | What it is | Rough target share | Usual fix |
|---|---|---|---|
| Time to first byte | Waiting for the server to send the HTML | About 40% | Page caching, faster hosting |
| Resource load delay | Gap before the browser starts fetching the image | Under 10% | Don't lazy-load it; set fetchpriority |
| Resource load duration | Downloading the image itself | About 40% | Smaller file, modern format |
| Element render delay | Gap between download and display | Under 10% | Remove render-blocking CSS and scripts |
This matters because fixes only help the part that's slow. Compressing an image that's waiting on a slow server barely moves LCP.
How do I find my LCP element?
- Open PageSpeed Insights (pagespeed.web.dev), enter your page and run the mobile test.
- Scroll to the diagnostics and open LCP breakdown. It names the LCP element and shows the time spent in each of the four parts.
- Note whether the element is an image or text, and which part is largest.
For a deeper look, our guide on how to test website speed explains the difference between this lab test and real-visitor data.
How do I fix each part?
- If time to first byte is large, add page caching first. Google treats 0.8 seconds or less as a good TTFB. See the best caching plugin for WordPress.
- If resource load delay is large, check the hero image isn't lazy-loaded. Look in the page source for
loading="lazy"on it, and turn off any plugin setting that lazy-loads every image. - Make sure the image is in the HTML as a normal image, not a CSS background set by a page builder. Background images are found late, because the browser has to load the stylesheet first. If you can't change that, preload it with
<link rel="preload" fetchpriority="high" as="image" href="...">. - If resource load duration is large, resize the image to the size it's shown at and save it as WebP or AVIF. Our guide on how to optimise images for the web has the settings.
- If element render delay is large, cut render-blocking code. Defer scripts that don't need to run first, remove unused CSS, and be wary of sliders and animation scripts that hide the hero until they've loaded.
What does WordPress already do for LCP?
Since WordPress 6.3, core adds fetchpriority="high" to the image it thinks is most likely your LCP, and skips lazy-loading on images likely to be in view. WordPress's own notes put the gain from fetchpriority at typically 5 to 10%. Some themes, page builders and optimisation plugins override this, so check the page source after any change.
If none of these fixes moves the needle, read why your WordPress site is slow for the bigger causes.
Step by step
1.Find your LCP element
Run the page through PageSpeed Insights and open the LCP breakdown to see which element is the LCP and where the time goes.
2.Cut server response time
Turn on page caching so the HTML arrives quickly. Aim for a time to first byte of 0.8 seconds or less.
3.Load the LCP image early
Make sure the hero image is in the HTML, isn't lazy-loaded and has fetchpriority="high".
4.Shrink the image
Resize it to the size it's displayed at and save it as WebP or AVIF.
5.Remove render-blocking code
Defer non-essential scripts and cut unused CSS so the image can appear as soon as it arrives.
Frequently asked questions
Why is my LCP fine on desktop but poor on mobile?
Mobile tests simulate a slower device on a mobile network, and real phones often are slower. Large images and heavy scripts hurt far more there. Serve smaller images to small screens, which WordPress does automatically through srcset for images added in the editor.
Should I lazy-load all images to improve LCP?
No. Lazy-loading images below the fold is good, but lazy-loading the LCP image makes LCP worse because the browser waits to fetch it. Google's web.dev guidance says never to lazy-load your LCP image.
Can text be the LCP element?
Yes. If your top of page is a big heading with no image, a text block can be the LCP. Then web fonts and render-blocking CSS matter most, because the text can't show until they've loaded.
