Guide to LCP: Largest Contentful Paint!

This post is part of the Core Web Vitals Guide series.

LCP, or "Largest Contentful Paint" indicates how long the largest content element on the page takes to load.
This is how the perceived loading time is determined.

Classification of the results

Classification	loading time
🟢 good	< 2.5 seconds
🟡 needs improvement	2.5 to 4 seconds
🔴 bad, need for action	> 4 seconds

What is assessed

Count as content element Images (inline or as background image), videos, or Text Blocks.

Most of the time, the largest element is loaded last.

Images are ranked by either their original size (intrinsic size) or their visible size (visible size), whichever is smaller.

For text, the largest block of text is counted, with only the text-node size counting. (corresponds to: small rectangle with text)

Not taken into account:

Elements outside the viewport (to this share)
Elements that have non-visible overflow/clipping
The box model (say margin, padding or border)

Opportunities for optimization

Slow server responses

Efficient caching
Establish third-party connections as early as possible so as not to delay the user experience by reloading during use.
CDN deployment

Render blocking JS/CSS

Reduce Critical JS/CSS (Critical Rendering Path)
Minify JS
move non-critical CSS/JS
(inline critical CSS)

Optimize resources

Deliver content elements (especially images and videos) in the appropriate size and the best formats.
Use Gzip compression
Adapting Serving (deliver content depending on network connection such as 3G or 4G)

Client side rendering

Use JS framework such as React or Angular to display content faster in the browser

More tips

Google itself lists other tips for optimizing LCP:
see web.dev/optimize-LCP

Further information / sources

see web.dev/LCP