How To Improve, Fix & Optimize For LCP Issues In WordPress

Largest Contentful Paint (LCP) measures how long the biggest element in the first screen takes to appear, usually a hero image, a large heading or a video preview image. Google’s guidance treats 2.5 seconds or less as good, measured for 75% of real visits.

Step 1: Find your LCP element

In PageSpeed Insights, open the diagnostics and find “Largest Contentful Paint element”. It tells you exactly which image or text block is the LCP element on mobile. Fix that element first. Optimizing other images will not change LCP.

Step 2: Understand the four parts

Server response (TTFB): how long before the HTML arrives.
Resource load delay: how long before the browser even starts downloading the image.
Resource load duration: how long the image takes to download.
Element render delay: how long between download and display, often caused by blocking CSS or JavaScript.

Step 3: Apply the fixes

Do not lazy-load the hero image

Lazy loading is good for images further down the page, but it delays the image at the top. Make sure your hero image does not have loading="lazy", and tell the browser it is important:

<img src="hero.webp" width="1200" height="600" alt="Describe the image" fetchpriority="high">

Make the image easy for the browser to find

If the hero is a CSS background image, or is added by a JavaScript slider, the browser finds it late. Use a normal image tag, or preload it:

<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">

Right size, modern format

Do not upload a 4000-pixel photo for a 600-pixel slot. Resize it, export it as WebP or AVIF, and compress it. WordPress adds responsive srcset sizes automatically for images from the media library.

Avoid sliders and autoplay video at the top

Carousels and background videos load several heavy files before the first view. One static image usually loads much faster.

Remove what blocks rendering

Render-blocking CSS and JavaScript delay the display. See the FCP guide. Also check for fade-in animations that keep the main content hidden until a script runs.

If your LCP element is text

Fonts matter. Use font-display: swap and preload your main font.

Speed up the server

A slow TTFB leaves less time for everything else. See how to reduce TTFB.

Check the result

Re-run PageSpeed Insights and confirm the LCP time dropped. Real-user data is a rolling 28-day window, so the field result takes several weeks to fully reflect your changes.