Back

Largest Contentful Paint (LCP)

What is LCP ?

Largest Contentful Paint is one of the essential metrics of Core Web Vitals. LCP measures the amount of time it takes to display the largest portion of page content on the screen.  

It is important to distinguish LCP from FCP (First Contentful Paint) which, as described by the W3C, corresponds to the "moment when the browser renders the first element of the DOM (Document Object Model) content which is either text, image, SVG or canvas-like element".

What is a good LCP ?

A LCP under 2.5 seconds provides a very good experience, which means that your user experience can be degraded if the display time of the largest portion of the page content displayed on the screen exceeds 2.5 seconds.

With which elements is the LCP calculated ?

The elements taken into account for the calculation of the LCP are :

  • the elements <img>
  • the <video> elements (the poster image is used)
  • the <image> elements located inside a <svg> element
  • elements with a background image loaded by the url() function
  • "block" type elements including text

How to optimize LCP ?

Improve server response time by :

  • optimizing your server
  • using a CDN
  • caching your resources
  • primarily serving cached HTML pages
  • establishing pre-connections with third parties

Act on the analysis of HTML markup by the server to make it more efficient by :

  • reducing CSS blocking time
  • minifying the CSS
  • differing from non-critical CSS
  • tilting critical CSS
  • reducing JavaScript blocking time

But other resources can affect the speed of the display. It is possible to improve this process by :

  • optimizing and compressing images
  • preloading important resources
  • compressing text files
  • caching resources

The use of client-side JavaScript can have negative effects on LCP. It is possible to optimize this process by :

  • reducing critical JavaScript
  • using Server-Side rendering
  • using pre-rendering
Back