Skip to main content Skip to course navigation

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