Grupa Insight

Largest Contentful Paint (LCP)

Home→Słownik→Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) to metryka Core Web Vitals mierząca czas potrzebny do pełnego wyrenderowania największego widocznego elementu treści na stronie. Odzwierciedla postrzeganą szybkość ładowania z perspektywy użytkownika. Google uznaje LCP poniżej 2,5 sekundy za dobry, 2,5–4,0 sekundy za wymagający poprawy, a powyżej 4,0 sekundy za słaby.

LCP thresholds

Google defines three performance bands for LCP:

  • Good: under 2.5 seconds
  • Needs improvement: 2.5 to 4.0 seconds
  • Poor: over 4.0 seconds

LCP is measured from the moment the page starts loading to when the largest content element becomes visible. The largest element is typically a hero image, a large heading, or a video poster.

What causes poor LCP

The most common causes of slow LCP:

Slow server response time — if the server takes too long to respond, everything downstream is delayed. A Time to First Byte (TTFB) above 600ms typically degrades LCP.

Render-blocking resources — CSS and JavaScript files that block rendering delay when the browser can paint content. Unused scripts and stylesheets loaded in the document head are common offenders.

Unoptimized images — large, uncompressed images without modern formats (WebP, AVIF) or without proper sizing significantly delay LCP when the LCP element is an image.

Client-side rendering — pages that rely heavily on JavaScript to render content have poor LCP because the browser must download, parse, and execute JS before painting.

No preloading of LCP element — if the LCP image is not preloaded, the browser discovers it late in the loading process.

How to improve LCP

  • Use server-side rendering (SSR) or static generation (SSG) instead of client-side rendering
  • Preload the LCP image using a link rel="preload" tag
  • Serve images in WebP or AVIF format with next/image or equivalent
  • Use a CDN to reduce server response time
  • Remove render-blocking scripts and stylesheets
  • Implement efficient caching at the CDN and server level

Grupa Insight implementation example

Grupa Insight's own website achieves LCP of 2.1 seconds on mobile in PageSpeed Insights — built on Next.js 14 with server-side rendering, deployed on Vercel CDN, with all images served via next/image with WebP optimization and preloading of the hero element. This is the same approach used in client implementations.

How to measure LCP

  • PageSpeed Insights: pagespeed.web.dev — lab measurement for any URL
  • Google Search Console: Core Web Vitals report — real user data across the site
  • Chrome DevTools: Performance tab — detailed waterfall showing LCP timing
  • web.dev/measure — free lab measurement with recommendations

Source

LCP is documented at web.dev/lcp and in Google Search Central at developers.google.com/search/docs/appearance/core-web-vitals