Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest visible element on a page, usually a hero image, video poster or main heading block, to appear on screen. It is Google’s main measure of perceived loading speed.
What is a good LCP score?
- Good: 2.5 seconds or less.
- Needs improvement: between 2.5 and 4 seconds.
- Poor: more than 4 seconds.
Google judges this at the 75th percentile of real visits, so most of your visitors, including those on slower phones and connections, need a fast experience.
What counts as the LCP element
The LCP element is the largest image, video poster, background image or text block visible in the viewport when the page loads. On most websites it is the hero image or the main headline. PageSpeed Insights and Chrome DevTools both show which element was measured, which is the first thing to check.
The four parts of LCP
LCP time can be broken into four phases. Knowing which is slow tells you what to fix:
- Time to First Byte (TTFB): how long the server takes to start sending the page.
- Resource load delay: the time before the browser starts downloading the LCP image.
- Resource load time: how long the image takes to download.
- Element render delay: the time between download and the element appearing, often caused by blocking CSS or JavaScript.
How to improve LCP
- Improve server response time with good hosting, caching and a content delivery network (CDN).
- Optimise the LCP image: compress it, use modern formats such as WebP or AVIF, and serve the right size for each screen with srcset. See Image SEO.
- Do not lazy-load the hero image. Lazy loading is great for images further down the page but delays the main one.
- Preload or prioritise the LCP image with fetchpriority=”high” so the browser downloads it early.
- Remove render-blocking resources: inline critical CSS, defer non-essential JavaScript and reduce unused CSS.
- Avoid client-side rendering for main content, so the browser does not wait for JavaScript before showing it (see Rendering).
- Limit heavy sliders and video backgrounds above the fold.
- Optimise web fonts when the LCP element is text, using font-display: swap and preloading key fonts.
LCP on WordPress sites
On WordPress, slow LCP is commonly caused by heavy page builders, unoptimised hero images, too many plugins and cheap shared hosting. A caching plugin, image optimisation, a CDN and a lightweight theme usually make the biggest difference. Check that your optimisation plugin is not lazy-loading the hero image.
Measuring improvements
Test changes in PageSpeed Insights or Lighthouse for immediate lab results, then watch the field data in the Core Web Vitals report in Google Search Console over the following 28 days. Mobile LCP is usually the hardest to pass, so focus there first. If you also need to understand why lab and field results differ, my article on Core Web Vitals failing despite a high PageSpeed score explains it.
For a wider view of performance, see the Page Speed entry.
Further reading: web.dev’s guide to Largest Contentful Paint.
Key Takeaways
- LCP measures when the main content appears; aim for 2.5 seconds or less.
- Find the LCP element first, usually the hero image or headline.
- Fast hosting, caching and a CDN reduce server delay.
- Compress and prioritise the hero image, and never lazy-load it.
- Remove render-blocking CSS and JavaScript.
Related Terms
Not sure how your own site measures up? Request a free SEO review, or keep learning in the SEO Encyclopedia.