Of the page speed metrics Google reports, Largest Contentful Paint (LCP) is the one most closely tied to what a visitor actually experiences: how long until the main content on the screen is visible. If it is slow, the page feels slow, whatever the technical details say.
In this guide we explain what LCP is and measures, what the LCP element is and how it changes, what a good value is, how it relates to the other Core Web Vitals, how it matters for SEO and conversion, how it differs from FCP, TTFB, Speed Index and load time, how to measure it (field and lab data, PageSpeed Insights, Search Console, Chrome DevTools), its four parts, why it is high, and a practical optimization checklist including WordPress and e-commerce cases.
What Does LCP Mean?
LCP stands for Largest Contentful Paint.
What Does Largest Contentful Paint Measure?
The time from the start of loading until the largest content element in the visible viewport is rendered.
What Is the LCP Element?
The largest visible image, video poster, background image loaded in CSS or block of text on the first screen. On many pages it is the hero image or the main heading.
How Does the LCP Element Change?
It can change while the page loads. A heading may be the largest element at first and an image that loads later may replace it.
What Is the Hero Area?
The large top section of a page, usually with the main image or heading.
What Should LCP Be?
Measured at the 75th percentile of page loads:
| LCP | Rating |
|---|---|
| 2.5 seconds or less | Good |
| 2.5 to 4.0 seconds | Needs improvement |
| More than 4.0 seconds | Poor |
Why the 75th Percentile?
So that most real users, not just the fastest ones, have a good experience.
Is LCP One of the Core Web Vitals?
Yes. The three are LCP (loading), INP (responsiveness) and CLS (visual stability). See what are Core Web Vitals.
Is LCP Important for SEO?
Core Web Vitals are part of Google’s page experience signals, but content relevance still matters most. Treat LCP as a user experience and conversion factor first. See technical SEO and mobile SEO.
Does LCP Affect the Conversion Rate?
Slow pages tend to lose visitors, so improving LCP often supports conversion, though the effect varies by site.
LCP vs. Other Metrics
- FCP (First Contentful Paint): when the first content appears.
- TTFB (Time to First Byte): how fast the server responds.
- Speed Index: how quickly the page content is visually populated.
- Load time: when everything has finished loading. LCP is not the same as load time.
How to Measure LCP
Field Data and Lab Data
- Field data comes from real users (such as the Chrome User Experience Report).
- Lab data comes from a simulated test.
Field data shows reality; lab data helps you debug. They often differ.
Measuring LCP with PageSpeed Insights
Enter a URL to see both field and lab results. See Google PageSpeed Insights.
Checking LCP in Search Console
The Core Web Vitals report groups URLs by status. See Google Search Console.
Finding the LCP Element with Chrome DevTools
In the Performance panel, the LCP marker shows which element it was.
The Four Parts of LCP
- TTFB: the time until the server starts responding.
- Resource load delay: the wait before the LCP resource starts downloading.
- Resource load duration: the time to download it.
- Element render delay: the wait between download and display.
Find the biggest part first; that is where optimization pays off most.
Why Is LCP High?
A slow server, redirects, a late-discovered hero image, an oversized image, render-blocking CSS and JavaScript, or an image lazy-loaded by mistake.
How to Optimize LCP
Reduce Server Response Time
- Use full-page caching.
- Use an object cache.
- Use a CDN. See what is a CDN.
- Reduce redirects.
Identify the LCP Image
Know exactly which image it is on each template.
Don’t Lazy-Load the LCP Image
Lazy loading everything, including the first image, delays it.
Use Fetch Priority
Mark the LCP image as high priority.
Preload the LCP Resource
Tell the browser to fetch it early.
Put the Image in the Initial HTML
If JavaScript inserts the image, the browser finds it late.
Consider an IMG Tag Instead of a CSS Background
An img element is discovered earlier than a CSS background image.
Optimize Image Size and Format
Right-size images and use modern formats such as WebP or AVIF. See what is JPEG.
Reduce Render-Blocking Resources
Minify CSS, defer non-critical JavaScript and inline critical CSS.
WordPress Tips
- Check hosting performance: PHP version, CPU, RAM, disk, database and concurrency. See what is hosting.
- Use a caching plugin: page cache, browser cache, CSS minification, JavaScript deferral, critical CSS, lazy loading, preload and database cleanup.
- Exclude the LCP image from lazy loading: by URL, CSS class, HTML ID or the first image(s).
- Optimize the featured image: on blog posts it is often the LCP; resize it, create WebP or AVIF, tune the quality and exclude it from lazy load.
- Check the Elementor hero area: a CSS background, slider, motion effect or entrance animation can delay the hero image.
- Clean up themes and plugins: remove, not just deactivate, unused ones such as sliders, pop-ups and statistics plugins.
- Review WordPress cron and background tasks: backups, image conversion, product sync, imports and security scans can slow the server.
See what is WordPress.
E-Commerce Tips
- Product gallery: load the first product image with high priority and lazy-load the rest.
- Category pages: with many images in the first view, the browser splits bandwidth between them; load only the first visible products eagerly.
Measuring After Changes
Retest the same URL, compare field data over the following weeks and keep a log of what you changed. For a wider audit, see how to do an SEO analysis and on-page SEO optimization.
Frequently Asked Questions
What is LCP?
Largest Contentful Paint: the time until the largest content element in the viewport is shown.
What is a good LCP?
2.5 seconds or less at the 75th percentile.
Is LCP a ranking factor?
Core Web Vitals are part of Google’s page experience signals, but they are one factor among many, and relevance still comes first.
What is the LCP element?
The largest image or text block visible on the first screen, often the hero image.
Why is my field LCP different from my lab LCP?
Field data reflects real users, devices and networks; lab data is a single simulated test.
Should I lazy-load images?
Yes for below-the-fold images, but not for the LCP image.
What is the quickest win for LCP?
Usually making sure the LCP image is discovered early, properly sized and not lazy-loaded, and improving server response time with caching and a CDN.
