What Is Largest Contentful Paint (lcp)

When a visitor opens your page, they make an almost instant judgment: does the site feel ready to use, or does it feel slow? Largest Contentful Paint (LCP) measures one of the most important moments in that experience—the point when the main, largest piece of visible content has rendered in the viewport. Improving it can make your website feel faster, more polished, and more useful from the first second.

What Is Largest Contentful Paint?

Largest Contentful Paint is a web performance metric that records how long it takes for the largest visible content element to appear in the browser viewport. In practical terms, it helps answer a simple question: When does the page’s primary content look loaded to the user?

Unlike metrics that focus only on when the browser begins receiving data, LCP focuses on perceived loading performance. A page may technically start loading quickly while its most meaningful visual asset—a large hero image, article headline, product image, or introductory text block—appears much later. In that situation, the user’s experience can still feel slow.

LCP is especially important for landing pages, ecommerce product pages, blog posts, service pages, and homepages where a prominent above-the-fold element establishes the page’s purpose.

How Browsers Determine the LCP Element

The browser tracks eligible elements as the page renders and updates the LCP candidate whenever a larger visible item appears. The final LCP value is generally based on the largest qualifying element displayed before the user interacts with the page, scrolls, or otherwise moves away from the initial loading experience.

Common Largest Contentful Paint candidates include:

Hero images at the top of a homepage or landing page
Product images on ecommerce pages
Large headings, particularly on text-led pages
Paragraphs or text blocks that occupy substantial viewport space
Video poster images shown before a video starts
CSS background images used in prominent banners or hero sections

Because the LCP element varies by page template, device size, and viewport, optimization should begin with identification rather than guesswork. A desktop hero image may be the LCP element on one device, while a large mobile heading or responsive image becomes the LCP candidate on another.

LCP Thresholds and Its Role in Core Web Vitals

Google includes LCP in its Core Web Vitals, a group of user-experience metrics that also includes Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). Core Web Vitals help evaluate loading speed, visual stability, and responsiveness during real-world browsing sessions.

According to Google’s published guidance, a good LCP is 2.5 seconds or less. An LCP score between 2.5 and 4 seconds needs improvement, while a score above 4 seconds is considered poor. These assessments are typically evaluated at the 75th percentile of page visits across mobile and desktop data.

Good: 2.5 seconds or less
Needs improvement: More than 2.5 seconds and up to 4 seconds
Poor: More than 4 seconds

LCP is a Google Core Web Vital and is used as part of Google’s page experience-related ranking considerations. It should not be treated as an isolated SEO tactic, however. Strong search performance still depends on helpful content, crawlability, search intent alignment, technical SEO, internal linking, and authority. LCP supports those efforts by helping deliver a smoother user experience.

Why Largest Contentful Paint Is Slow

A poor LCP score often results from several small bottlenecks rather than one obvious problem. The key is determining what delays the largest visible element from being requested, downloaded, processed, or rendered.

Slow Server Response Time

If the server takes too long to send the initial HTML, every later resource is delayed. High time to first byte (TTFB) can stem from underpowered hosting, uncached dynamic pages, inefficient database queries, redirect chains, or excessive third-party processing.

Render-Blocking CSS and JavaScript

Browsers may delay rendering while they download and process stylesheets and JavaScript files. Large CSS bundles, unused styles, synchronous scripts, and heavy tag-manager implementations can keep the page’s main content from painting promptly.

Unoptimized Images

Oversized hero images are a frequent LCP issue. Uploading a massive source image, serving the same file to every device, using legacy formats, or failing to compress images can increase download time substantially. An image may also load late if it is injected through JavaScript instead of appearing directly in the initial HTML.

Client-Side Rendering Delays

JavaScript-heavy sites sometimes require scripts to execute before meaningful page content appears. With client-side rendering, the browser may receive a minimal document first and wait for application code, API calls, and component rendering before it can display the actual LCP element.

Incorrect Resource Priority

Your primary image or font can compete with less important resources. If the browser discovers the LCP asset late—or assigns bandwidth to analytics, widgets, sliders, and below-the-fold images first—the most important visible content may arrive too slowly.

How to Measure and Diagnose LCP

Use both lab data and real-user data. Lab tools simulate loading conditions and are excellent for debugging. Field data reflects actual visitors, devices, network connections, and browsing environments.

PageSpeed Insights: Provides performance diagnostics alongside Chrome User Experience Report (CrUX) field data when enough data is available. Review the LCP metric, opportunities, diagnostics, and identified LCP element.
Chrome DevTools: In the Performance panel, record a page load and inspect the LCP marker in the timeline. The Network panel can reveal delayed image requests, blocking files, and slow server responses.
Lighthouse: Run a performance audit in Chrome DevTools or PageSpeed Insights to identify the LCP element and receive actionable recommendations for render-blocking resources, image sizing, JavaScript execution, and caching.
Chrome User Experience Report data: CrUX provides field data from real Chrome users. It is particularly valuable for finding differences between lab tests and actual mobile performance.

When diagnosing LCP, trace the full loading path: initial server response, HTML delivery, browser discovery of the LCP resource, network request timing, download duration, decoding, and final render. This sequence reveals whether the real issue is hosting, code, image delivery, or prioritization.

Practical Ways to Improve LCP

Optimize the Critical Image

If a hero or product image is your LCP element, serve it at the displayed dimensions rather than relying on an unnecessarily large original file. Compress images carefully and use modern formats such as WebP or AVIF where appropriate. Implement responsive images with srcset and sizes so mobile users do not download desktop-sized assets.

Do not lazy-load the above-the-fold LCP image. Lazy loading is useful for offscreen media, but it can delay the most important visual asset when applied to a hero image.

Preload High-Priority Resources

Use resource preloading selectively for the actual LCP image, critical fonts, or other essential assets that the browser may discover too late. For image-based LCP elements, preload the correct responsive image candidate and consider priority hints such as fetchpriority="high". Avoid preloading everything; excessive preloads create competition and can reduce the benefit.

Reduce CSS and JavaScript Blocking

Inline only truly critical CSS where appropriate, defer nonessential scripts, remove unused code, minify assets, and split large JavaScript bundles. Delay chat widgets, social embeds, A/B testing scripts, and other third-party tools until after essential content is visible whenever possible.

Improve Hosting, Caching, and Delivery

Reduce TTFB with reliable hosting, server-side page caching, efficient database performance, and a content delivery network (CDN). Enable browser caching for static assets and use modern compression such as Brotli or GZIP. Server-side rendering or static generation can also help JavaScript frameworks deliver meaningful HTML faster.

Largest Contentful Paint FAQ

What is a good Largest Contentful Paint score?

Google’s stated benchmark for a good LCP is 2.5 seconds or less. Scores from 2.5 to 4 seconds need improvement, and scores above 4 seconds are considered poor.

What element counts as the Largest Contentful Paint on a webpage?

The LCP element is the largest eligible content item visible in the initial viewport. It may be a hero image, large heading, text block, video poster, product image, or prominent background image.

How do I find my website’s LCP element?

Run a PageSpeed Insights or Lighthouse report and review the LCP element details. For deeper analysis, record a page load in Chrome DevTools Performance panel and inspect the LCP event and associated resource requests.

Why is my LCP slow even when my page loads quickly?

A page can begin loading quickly while its main visible content remains delayed. The LCP asset may be blocked by CSS or JavaScript, discovered late, oversized, dependent on client-side rendering, or assigned low network priority.

Does LCP affect Google search rankings?

LCP is a Core Web Vital and forms part of Google’s page experience-related ranking considerations. Improving it is best viewed as part of a broader technical SEO and user-experience strategy rather than a standalone ranking solution.

Ready to see how your site stacks up? Run a free SEO audit and get a clear picture of what's holding your rankings back.