How to fix a slow Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is the time it takes for the biggest piece of content in the first screen to appear, usually a hero image or a large headline. Google's target is 2.5 seconds or less for most of your visitors. Above 4 seconds is rated poor.

LCP is one of the three Core Web Vitals, so it matters for search as well as for the people waiting on your page.

Step 1: find your LCP element

You can't fix LCP without knowing what it is. Run your site through the Core Web Vitals checker: the report shows your LCP time on mobile and desktop, and Lighthouse identifies the element it measured. In Chrome DevTools, the Performance panel marks it too.

It is usually one of these:

• A hero image or background image
• A large heading or block of text
• A video poster image

Step 2: work out where the time goes

LCP time breaks down into four parts. Fix the biggest one first.

1. Server response (TTFB): how long before the browser gets the first byte of HTML.
2. Resource load delay: how long before the browser even starts downloading the LCP image.
3. Resource load time: how long the image itself takes to download.
4. Render delay: time spent waiting on CSS, fonts or JavaScript before it can be painted.

The fixes that help most

Make the image smaller

• Serve the image at the size it's displayed, not a 3,000-pixel original.
• Use modern formats such as WebP or AVIF.
• Use responsive images (srcset) so phones download a smaller file.

Let the browser find it early

• Don't lazy-load the LCP image. loading="lazy" on a hero image is one of the most common LCP mistakes.
• Add fetchpriority="high" to the LCP image.
• If the image is set in CSS (a background image), the browser only discovers it after the CSS loads. Use an <img> tag or preload it.

Speed up the server

• Cache full pages where you can, or put a CDN in front of the site.
• Check for slow database queries or plugins on the homepage.

Remove render-blocking resources

• Inline the small amount of CSS needed for the first screen and load the rest later.
• Defer scripts that aren't needed to show the first screen.
• Use font-display: swap so text isn't hidden while web fonts load.

Check the result

Lab tests vary a little between runs, so test two or three times after each change. Field data (from real Chrome users) takes up to 28 days to reflect improvements.

Run a free Core Web Vitals check before and after your changes, or read the wider guide to website performance.