How to Improve Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible piece of content to appear on screen, usually a hero image, a large heading, or a block of text. It is the Core Web Vital that reflects how fast a page feels like it has loaded. A good LCP is 2.5 seconds or less, and over 4 seconds is considered poor, measured for the majority of your visitors.

Step 1: Find your LCP element

Speed-testing tools and Chrome's developer tools identify which element is the LCP for a page. It's often a hero image, a banner, or a large paragraph. The fix depends on what it is. Test on mobile as well as desktop, since the element and timings can differ. See how to test website speed.

Step 2: Understand the four parts

LCP time is made up of:

Time to First Byte: how long the server takes to respond. See what is TTFB
Resource load delay: how long before the browser starts fetching the LCP resource
Resource load time: how long that image or file takes to download
Element render delay: the time between download and actually painting it

Find which part is longest and tackle it first.

Fixes for a slow server

Use caching, a CDN, and decent hosting. See page caching explained and what is a CDN.

Fixes for late discovery

If the hero image is set by a CSS background or loaded by JavaScript, the browser finds it late. Put important images in the HTML as regular image elements so the browser sees them early. You can also give the LCP image a high fetch priority so it jumps the queue.

Never lazy-load the LCP image. Lazy loading is for images below the fold. See lazy loading images.

Fixes for heavy images

Compress and resize to the displayed size. See how to compress images for the web
Use modern formats such as WebP or AVIF with fallbacks. See WebP vs AVIF vs JPEG
Serve responsive image sizes so phones don't download desktop images
Avoid enormous slider or video backgrounds above the fold

Fixes for render delay

Render-blocking CSS and JavaScript can hold up painting even after the image arrives. Reduce what loads in the head, defer non-essential scripts, and inline small amounts of critical CSS. See render-blocking resources explained and minifying CSS and JavaScript.

Web fonts can also delay text. Use sensible font loading. See choosing web fonts without slowing your site.

Fixes for text LCP

If a heading or paragraph is your LCP, make sure fonts load quickly and that the text isn't hidden until a script runs.

Beware client-side rendering

Pages that rely on JavaScript to build all content can be slow to show anything. Delivering key content in the initial HTML helps.

Cut third-party delays

Tag managers, chat widgets, and ads can compete for resources. See third-party scripts and website speed.

Check real-user results

Lab tests help you debug, but real visitors' data decides whether you pass. Look at field data in Search Console and keep monitoring after changes.

The bottom line

Identify your LCP element, find which phase is slow, and fix it: faster server, early-discovered and well-compressed image, and fewer blockers. Aim for 2.5 seconds or less.