LCP is the Core Web Vital WordPress sites fail most often. It measures when the biggest element above the fold — usually a hero image or headline — finishes rendering. Good LCP is 2.5 seconds or less on mobile.
Step 1: Find your LCP element
In PageSpeed Insights, open the “Largest Contentful Paint element” diagnostic. It shows the exact HTML snippet. Maki shows it too, along with the file name you need for the next steps.
Step 2: Make sure it isn't lazy-loaded
WordPress core, your theme, and optimization plugins all lazy-load images. If the LCP image has loading="lazy", the browser deliberately waits. Exclude it in your plugin settings — exact steps for Perfmatters, WP Rocket, LiteSpeed Cache and Autoptimize are in this fix.
Step 3: Shrink it
Serve the image in WebP or AVIF, at the size it's actually displayed. A 1600px-wide WebP hero is usually under 150KB. Optimize the LCP image.
Step 4: Tell the browser it's important
Add fetchpriority="high" to the image, or preload it. Perfmatters, WP Rocket and most modern themes have a setting for this.
Step 5: Remove what's in front of it
Render-blocking CSS and slow server responses delay everything, including LCP. See render-blocking CSS and server response time.
Step 6: Re-test
Lab results change immediately; field data takes up to 28 days. Re-run your scan after each change so you know which one actually helped.
