Largest Contentful Paint (LCP)

Oct 22, 2023

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Google defines this metric considers only above-the-fold content, meaning everything that appears without scrolling. To provide a good user experience, sites should strive to have the Largest Contentful Paint of 2.5 seconds or less.

How is an element's size determined?

The size of the element reported for Largest Contentful Paint is typically the size that's visible to the user within the viewport. So, an element that is partially above-the-fold (some part above-the-fold and some below-the-fold) can still be considered for LCP. In this case, the visible portion’s size (in pixels) is used to determine LCP.

Since LCP is based on the element’s visible portion on the screen, it can (and often does) vary based on the user’s screen size. This is why, LCP score could be different on desktop and mobile devices.

If the element extends outside of the viewport, or if any portion of the element is clipped or has non-visible overflow, those portions do not count toward the element's size. Web pages often load in stages, and as a result, it's possible that the largest element on the page might change.

What elements are considered?

The types of elements considered for Largest Contentful Paint are:

  • <img> elements
  • <image> elements inside an <svg> element
  • <video> elements with a poster image (the poster image load time is used)
  • An element with a background image loaded via the url() function (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text elements children.
  • The first frame painted for autoplaying <video> elements
  • The first frame of an animated image format, such as animated GIFs

What causes poor LCP?

  • Slow server response time: If your server takes too long to respond, the browser has to wait before it can start rendering any content, delaying the LCP element.
  • Unoptimized images: Large, uncompressed images or using formats like PNG/JPEG instead of modern formats like WebP can significantly increase load time for the LCP element.
  • Render blocking JS and CSS: When JavaScript or CSS files block the rendering process, the browser can't paint the LCP element until these resources are downloaded and processed.
  • Main thread blocked due to long tasks: If the main thread is busy executing JavaScript for more than 50ms, it prevents the browser from rendering the LCP element.
  • Client-side rendering: When content is rendered entirely on the client side using JavaScript, the LCP element won't appear in the initial HTML, forcing users to wait for JavaScript to execute before seeing content.

Optimizing LCP

  • Compress your images and then ship them.
  • Use Image CDNs (like Gumlet) - that dynamically serves images using optimized format(webp), size, etc.
  • Use an efficient cache policy using response headers like Cache-Control, so that the image is served from the browser's cache the second time and onwards.
  • Use lazy loading to lazy load offscreen(below the fold) images.
  • Defer any non-critical CSS and JS that might be blocking the main thread to speed up the loading of the main content of the webpage.
  • Minify and compress render-blocking resources such as CSS and JS.
  • Fasten server response time.
  • Identify the LCP element and preload the LCP image with a high fetchPriority so it starts loading with the stylesheet.
  • Use SSR or prerendering (SSG, ISR) so that the resource for LCP is discovered in the HTML document.
Manak Upadhyay