How do you improve LCP in WordPress? Largest Contentful Paint (LCP) measures how long the biggest visible element, usually the top image or heading, takes to appear. Google counts 2.5 seconds or less as good. To improve it, find the LCP element, make that image small and prioritised, serve the page quickly from a cache, remove code that blocks rendering and load fonts efficiently. Follow the steps below in order.
The five fixes that matter most
- Right-size the LCP image and use WebP.
- Do not lazy-load the LCP image; give it high priority.
- Use page caching and decent hosting for a fast first byte.
- Reduce render-blocking CSS and JavaScript.
- Load fonts without delaying text.
What LCP is and the target
LCP is one of the three Core Web Vitals. The “good” threshold is 2.5 seconds or less, measured for most real visitors. It is usually an image (a hero banner or featured image) or a large block of text. If that element appears late, the page feels slow even when everything else is quick.
Step 1: find your LCP element
Open the page in PageSpeed Insights and look for “Largest Contentful Paint element” in the diagnostics. Chrome DevTools also shows it in the Performance panel. Knowing the exact element keeps you from optimising the wrong thing.
Step 2: fix the image
- Size: do not upload a 3000-pixel photo for a 1200-pixel slot. Resize to the largest size shown.
- Format: use WebP (or AVIF). It is usually much smaller than JPEG at similar quality.
- Weight: as a guide we keep a hero image under about 40KB where the design allows.
- No lazy-loading: lazy-loading delays images, which is wrong for the first image. Turn it off for the top image.
- Priority: give the image a high fetch priority (the
fetchpriority="high"attribute) so the browser loads it first. - Dimensions: set width and height attributes to avoid layout shift.
Step 3: speed up the server response
If the server is slow to send the page, nothing else can start. Use page caching, a current PHP version and hosting that is not overloaded. Our guide to Time to First Byte explains how to measure it.
Step 4: remove render-blocking code
- Remove plugins that add CSS and JavaScript to every page when you only need them on one.
- Load non-critical JavaScript later (defer it).
- Inline only the small amount of CSS needed for the top of the page, if your setup supports it, and load the rest after.
- Avoid stacking several page builders or add-on packs.
Step 5: load fonts efficiently
Use as few font families and weights as you can, host them locally if possible and show a fallback font while they load, so text appears immediately.
Step 6: verify the fix
- Re-run PageSpeed Insights and check the LCP time and element.
- Test on mobile, where LCP is usually worse.
- Wait for Search Console field data to update; it uses about 28 days of real visits.
Elementor sites
If you use Elementor, apply the same rules and also use its performance options for loading fewer assets. Read Elementor vs Gutenberg for what affects speed. Our Elementor website design service builds with these rules from the start.
Frequently asked questions
What is a good LCP time?
Google considers 2.5 seconds or less good, 2.5 to 4 seconds needs improvement and more than 4 seconds poor, based on real visitors.
Why is my LCP slow on mobile?
Phones have slower processors and networks, so big images and heavy scripts hurt more. Optimise for mobile first.
Should I lazy-load all images?
Lazy-load images below the fold, but never the main image at the top, because it is usually your LCP element.
Will a caching plugin fix LCP?
It helps with server response, but cannot fix an oversized hero image or heavy scripts. Fix the image and code too.
How long does it take to see the improvement in Search Console?
Field data updates over about 28 days, so allow a few weeks.
Need help getting LCP under 2.5 seconds?
If you want an expert to do it, see our WordPress speed optimization service or contact us. Related reading: Core Web Vitals assessment failed.
