Largest Contentful Paint (LCP)

What is the Largest Contentful Paint and why does it matter?

LCP is displayed in seconds. And estimates when the main content of a page is visible to users. It measures the perceived load speed of your page.

A fast LCP helps reassures users that the page is useful.

You should aim for an LCP of 2.5 seconds or less.

0 – 0.25 Green (fast)

2.5 – 4 Orange (moderate)

Over 4 Red (slow)

These are the elements on your page that are considered:

  • <img> elements
  • <image> inside <svg>
  • <video> (the poster image is used)
  • an element with a background image loaded via the url() function (opposed to CSS gradient)
  • block-level elements containing text notes or other inline-level test elements children.

* Images that occupy the entire viewport are not included

Four factors affect the LCP:

  1. Slow server response times
  2. Render-blocking JavaScript and CSS
  3. Resource loading times
  4. Client-side rendering

Learn more from Google: Largest Contentful Paint (LCP) and How to improve LCP and Optimise LCP

How to improve LCP