What Is LCP? Largest Contentful Paint Explained (2026 Data)

Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element, typically a hero image or a block of text, to render on screen. Google's bar is 2.5 seconds or less for 75% of real visits. When we tested 115 Google page-1 results in October 2026, only 8.7% met it in the lab.

This guide explains what LCP means and how it differs from other performance metrics, then shows what the pages that actually rank look like when you measure them. The numbers come from a mobile Lighthouse run we did ourselves on 1 October 2026, and they change which fixes deserve your time first.

What Does LCP Mean?

Largest Contentful Paint is a user-centric performance metric that captures the moment when your page's most significant content becomes visible. The name breaks down simply:

• Largest: The biggest content element visible in the viewport
• Contentful: Meaningful content users actually care about
• Paint: The moment that content renders on screen

The LCP element can be:

• An image (including <img> tags, CSS background images, or images within <svg>)
• A block of text (paragraphs, headings, or other block-level elements)
• A video's poster image

LCP only considers content within the initial viewport. If your largest element sits below the fold, it won't factor into the LCP calculation—only what users see immediately matters.

What is the Difference Between LCP and FCP?

First Contentful Paint (FCP) and Largest Contentful Paint (LCP) measure different moments in the page loading process:

First Contentful Paint (FCP) captures when any content first appears—the moment users get visual feedback that something is loading. This could be a loading spinner, navigation bar, or placeholder text.

Largest Contentful Paint (LCP) marks when the main content becomes visible—the point users perceive the page as "loaded" and ready to use.

Think of them as two milestones in the user's journey:

1. FCP: "Something is happening!"
2. LCP: "The page looks ready!"

While FCP focuses on initial feedback, LCP measures when users can actually engage with your content. In Lighthouse's Performance score, LCP also weighs far more: 25% against FCP's 10% (Chrome for Developers).

What is a Good LCP Score?

Google defines three LCP performance categories:

• Good: 2.5 seconds or less—your target for optimal user experience
• Needs Improvement: 2.5 to 4 seconds—acceptable but worth optimizing
• Poor: Over 4 seconds—requires immediate attention

Google recommends that 75% of your page loads achieve the "Good" threshold. In web.dev's words, "a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices" (web.dev). This accounts for variation in user devices and network conditions while ensuring most visitors have a positive experience.

Most of the web is close but not there. According to the HTTP Archive Web Almanac 2025, 62% of mobile pages and 74% of desktop pages achieve a good LCP, based on real Chrome users in July 2025.

How Fast Is LCP on the Pages That Actually Rank?

Slower than most LCP guides suggest. On 1 October 2026 we ran mobile Lighthouse 13.5 on 115 Google page-1 results for 15 commercial US keywords, from payroll software to robot vacuums, using the same settings as our free website speed test. The median lab LCP was 10.0 seconds, and only 8.7% of the pages painted their main content within 2.5 seconds.

Two caveats belong next to those numbers. They are lab runs from one machine under Lighthouse's simulated slow mobile profile, so absolute times run higher than a fast connection sees. We checked the setup against Google: our own homepage scored a 7.8-second LCP in our run and 8.1 seconds in PageSpeed Insights the same morning. And position was unrelated to speed in this sample (Spearman's ρ = 0.04, not significant). Ranking pages are not fast pages; they are relevant pages that are often slow.

What the run did show clearly is what the LCP element is on pages that rank:

That matters because the fix depends on the element. A text LCP is usually waiting on fonts, CSS or JavaScript. An image LCP is usually waiting on the image request itself.

Why Does LCP Matter for SEO?

LCP became part of Google's ranking systems with the page experience update that began rolling out in June 2021. Google is clear on both halves of the story: "Core Web Vitals are used by our ranking systems", and "Google Search always seeks to show the most relevant content, even if the page experience is sub-par" (Google Search Central).

From an SEO perspective, LCP affects rankings in two ways:

Direct ranking signal: Google includes Core Web Vitals in its page experience systems. While content relevance still dominates, LCP can be the tiebreaker between similar pages, which fits our own data: across 115 page-1 results, speed did not predict position.

The visitor: A slow main paint loses people before they read anything, and that is where the money is. Vodafone A/B-tested a landing page whose field LCP was 31% better and saw 8% more sales (web.dev case study).

What Factors Affect LCP Scores?

Google splits every LCP into four sub-parts, and each one points at a different fix (web.dev):

Four main factors feed those sub-parts:

1. Slow Server Response Time (TTFB)

Time to First Byte (TTFB) measures how long the server takes to respond to a browser request. Every millisecond of server delay directly adds to your LCP. Common causes include slow database queries, unoptimized server-side code, and poor hosting infrastructure.

2. Render-Blocking Resources

JavaScript and CSS files that block rendering prevent content from appearing until they're fully downloaded and processed. The browser can't paint anything until it processes these critical resources. On a text LCP this is usually the biggest delay: across the text-LCP pages in our sample, element render delay was the median 42.9% of the measured time.

3. Slow Resource Load Times

Large images, videos, and web fonts take time to download. An unoptimized hero image on a mobile connection can add seconds to your LCP.

4. Client-Side Rendering

Single-page applications built with React, Vue, or Angular often require JavaScript execution before displaying content. The browser must download, parse, and execute scripts before rendering—adding significant delay compared to server-rendered HTML.

How to Measure LCP

Before optimizing, you need accurate measurements. Three tools cover it:

SEOmator's Free Website Speed Test

SEOmator's free speed test runs a Google Lighthouse audit on any public URL. Enter your URL, select device type, and get the full report, including your LCP time and the element that produced it. It is lab data: one simulated load, not what your visitors experienced.

Google PageSpeed Insights

Google PageSpeed Insights combines lab data (simulated tests) with field data from real Chrome users. The field data shows how actual visitors experience your site, making it valuable for understanding real-world performance. It appears once a page or site has enough Chrome traffic.

Chrome DevTools

For identifying specific LCP elements, open Chrome DevTools (F12), go to the Performance tab, and record a page load. The tool highlights exactly which element triggers your LCP measurement, helping you focus optimization efforts.

8 Ways to Improve Your LCP Score

Work through these in order. The first three decide most LCPs:

1. Identify Your LCP Element

Before optimizing blindly, find out what's causing your LCP. In Chrome DevTools, right-click your page, select "Inspect," open the Performance tab, and click the reload button. The resulting timeline shows exactly which element triggers your LCP.

Don't assume it's the hero image. On the page-1 results we measured, the LCP element was text slightly more often than an image (47.0% against 42.6%). Knowing your specific element lets you target the right sub-part.

2. Make the LCP Image Load First

If your LCP element is an image, make sure the browser fetches it early and with priority:

• Never lazy-load it: web.dev puts it bluntly: "Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay." Keep loading="lazy" for below-the-fold images only.
• Add fetchpriority="high" to the LCP <img> so it jumps the download queue.
• Put it in the HTML: an image that only appears after JavaScript runs can't start loading until that script does. If you can't, preload it with <link rel="preload" as="image">.

3. Optimize Images

Then make the file itself cheaper to download:

• Compress images: Squoosh or ImageOptim can cut file size substantially without visible quality loss
• Use modern formats: WebP and AVIF are usually much smaller than JPEG and PNG at the same quality
• Serve the right size: use srcset so phones don't download a desktop-width hero
• Specify dimensions: Always include width and height attributes to prevent layout shifts

4. Eliminate Render-Blocking Resources

CSS and JavaScript in your <head> block rendering until they load. Solutions include:

• Inline critical CSS: Extract the CSS needed for above-fold content and inline it directly in the HTML
• Defer non-critical JavaScript: Add defer or async attributes to script tags that don't need immediate execution
• Remove unused CSS: Tools like PurgeCSS can identify and remove styles your page doesn't use

We hold our own site to this list. When we ran seomator.com through Lighthouse on 1 October 2026, the top items in the report were 253 KiB of unused JavaScript and render-blocking requests worth an estimated 150 ms.

5. Minify CSS, JavaScript, and HTML

Minification removes whitespace, comments, and unnecessary characters from your code. Most build tools (Webpack, Vite, Next.js) handle this automatically in production builds, so check that it's switched on before spending time elsewhere.

6. Improve Server Response Time

web.dev's guidance is that "most sites should strive to have a TTFB of 0.8 seconds or less" (web.dev). Strategies include:

• Upgrade hosting: Move from shared hosting to VPS or dedicated servers
• Optimize databases: Add indexes, optimize queries, implement connection pooling
• Use server-side caching: Cache rendered HTML to avoid regenerating pages on every request
• Enable compression: Gzip or Brotli compression shrinks text responses considerably

You can check whether caching and compression headers are actually set with our HTTP header checker.

7. Implement a CDN and Browser Caching

A Content Delivery Network serves your files from servers closest to each user, which shortens TTFB for a distant audience. Proper cache headers let returning visitors load your site almost instantly: set Cache-Control headers with appropriate max-age values, typically one year for versioned static assets and shorter durations for HTML.

8. Consider Server-Side Rendering

If you're using a JavaScript framework, server-side rendering (SSR) sends fully-rendered HTML to browsers instead of requiring client-side JavaScript execution. This dramatically improves LCP for content-heavy sites. Frameworks like Next.js, Nuxt, and SvelteKit make SSR implementation straightforward.

Frequently Asked Questions

What is a bad LCP score?

An LCP over 4 seconds is considered "poor" by Google's standards. At this level, you're likely losing visitors before they see your main content. Even scores between 2.5 and 4 seconds ("needs improvement") should be prioritized for optimization.

Does LCP affect mobile and desktop rankings differently?

Google measures Core Web Vitals separately for mobile and desktop visits, so each device's field data is judged on its own. Mobile is usually the harder one: connections are slower and devices less powerful, which is why the Web Almanac finds 62% of mobile pages with a good LCP against 74% on desktop.

Can I have different LCP elements on mobile vs desktop?

Yes, and this is common. A desktop hero image might be hidden on mobile, making a text heading the LCP element instead. Test both viewport sizes to understand your actual LCP elements for each device type.

How often should I measure LCP?

Monitor LCP continuously using Google Search Console's Core Web Vitals report or Real User Monitoring (RUM) tools. Run lab tests after any deployment that changes above-fold content, images, or loading behavior.

Why did my LCP get worse after adding more content?

Adding larger images, more JavaScript, or render-blocking resources directly impacts LCP. When expanding content, always test performance impact and optimize new assets before deployment.

Should I preload or use fetchpriority for the LCP image?

Use fetchpriority="high" when the image is already in the HTML; it raises the priority of a request the browser has already found. Use <link rel="preload" as="image"> when the image is discovered late, for example as a CSS background or an image inserted by JavaScript. Never lazy-load it.

Key Takeaways

• Target LCP of 2.5 seconds or less for 75% of page loads to meet Google's "Good" threshold
• Most ranking pages miss it in the lab: only 8.7% of 115 page-1 results we tested on 1 October 2026 did
• Identify the element first: on ranking pages it was text (47.0%) about as often as an image (42.6%)
• For image LCPs, add fetchpriority="high" and never lazy-load; 16.3% of image-LCP pages in our sample did
• Eliminate render-blocking resources by inlining critical CSS and deferring JavaScript
• Fix LCP for visitors first: Google says relevance outranks page experience

Conclusion

Largest Contentful Paint measures when your page's main content becomes visible—the moment users perceive your site as "loaded." As a Core Web Vitals metric, LCP feeds Google's ranking systems, but our October 2026 measurements show relevance still decides who ranks; speed decides who stays.

The path to better LCP is straightforward: identify your LCP element, optimize how it loads, and remove anything that delays rendering. For an image LCP that means priority and no lazy-loading; for a text LCP it means CSS, fonts and JavaScript.

Start by measuring your current LCP with SEOmator's speed test or Google PageSpeed Insights. Then apply the strategies in this guide, prioritizing changes to your specific LCP element.

Related Articles:

• How Page Load Speed Impacts SEO
• Top 10 Technical SEO Issues