Guide to LCP: Largest Contentful Paint!

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

Core Web Vitals Guide 🧑‍⚕️ - die wichtigsten Metriken im Web
Die Core Web Vitals: Einheitliche KPIs unabhängig vom Tool. Diese Werte sind zukünftig die Werte, nach denen man Performance bewerten wird; und damit die Werte, die wir mit Kund:innen kommunizieren werden.
LCP (Loading) visualisiert
Bildquelle: web.dev/LCP

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

see also:

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