RankpediaA plain-English encyclopedia of search

Largest Contentful Paint

Measures how long it takes for the largest visible content element in the viewport to render after a page starts loading.

If you have ever optimised images but still failed the LCP threshold, you already know that render-blocking resources and server latency matter just as much.

Key points

  • Optimise the LCP element itself: compress images, defer offscreen videos, and inline critical CSS.
  • Reduce server response time (TTFB) below 200ms to give the LCP element a head start.
  • Eliminate render-blocking CSS and JavaScript that delay the first paint of the largest element.
  • Use field data (Chrome User Experience Report) at the 75th percentile to measure real LCP.

A product page that missed the threshold on mobile

A Shopify store’s product page had an LCP of 4.2 seconds on mobile. The largest element was a 1.2 MB hero image. After compressing the image to 200 KB and deferring a third-party analytics script, LCP dropped to 2.1 seconds. On desktop, however, a large text block became the LCP element, requiring inline critical CSS to bring it below 2.5 seconds.

Three common mistakes with LCP optimisation

  • Ignoring render-blocking resources Many focus only on image compression while leaving CSS and JavaScript that block the first paint. These delay the LCP element even if the image is tiny.
  • Measuring only lab data Lighthouse scores in a controlled environment differ from real-user field data. Always check the 75th percentile in the Chrome User Experience Report.
  • Assuming the LCP element is fixed The largest element changes with viewport size and device. An image may be LCP on desktop but a text block on mobile.

Four factors that affect your LCP score

  • Server response time Time to First Byte (TTFB) sets the baseline. A slow server adds delay before any content can render.
  • Render-blocking resources CSS and JavaScript that block the critical rendering path push the LCP element later. Defer non-critical scripts to allow the browser to render the largest element sooner, a key improvement for Core Web Vitals.
  • Image optimisation Large, unoptimised images are a common LCP culprit. Using a lightbox image optimiser for SEO can help serve compressed images without slowing the LCP element.
  • Client-side rendering JavaScript-heavy frameworks can delay the largest element because they require client-side processing. Server-side rendering or static generation can improve LCP by delivering content faster, directly affecting this Core Web Vital.

Three things LCP is not

  • Not the full page load time LCP only measures the largest visible element above the fold. The page may still load other content afterwards.
  • Not a measure of visual stability That is cumulative layout shift (CLS), which tracks unexpected movement. LCP only cares about when the largest element appears.
  • Not a fixed element across sessions The LCP element can vary by user, device, and network because viewport size and content layout differ. Optimise for the most common scenario using field data from the Chrome User Experience Report.

Common questions

How to improve LCP on mobile?

Optimise images, reduce server response time, and eliminate render-blocking resources. Also consider lazy loading offscreen content and using a CDN.

What is the difference between first contentful paint and largest contentful paint?

First Contentful Paint (FCP) measures when any content first appears. LCP measures when the largest content element renders, better indicating perceived load.

Sources

  1. Google web.dev: Largest Contentful Paint (LCP) Official Google guide with definition, thresholds, and optimisation tips.
  2. Google Search Central / Core Web Vitals guidance Google's official documentation on Core Web Vitals and page experience signals.
  3. W3C LCP specification repository Technical specification and discussion of the LCP metric.
↑