Largest Contentful Paint (LCP) measures how long it takes for the largest text block, image, or video poster in the viewport to finish rendering. It is one of the three Core Web Vitals and is reported by both lab tools and the Chrome User Experience Report.
Why it matters
LCP is Google's primary proxy for perceived load speed. The web.dev thresholds are clear: 2.5 seconds is good, 4.0 seconds is poor, and field LCP feeds directly into the page experience signals search engines use. A slow LCP usually means either the server is slow, the hero asset is heavy, or render-blocking resources are stalling layout — each of which also damages bounce rate and conversion. Because LCP is measured at the 75th percentile of real visits, a handful of fast lab runs is no substitute for monitoring how the metric performs in production.
How to fix
- Audit which element is the LCP candidate using Lighthouse or DevTools.
- Lower TTFB with caching, a CDN, and a faster origin.
- Preload the hero image with
<link rel="preload" as="image">and serve it in modern formats (AVIF, WebP). - Set explicit
widthandheighton images so layout doesn't push LCP later — this also helps CLS. - Avoid lazy-loading the hero image; lazy-load only below-the-fold media.
- Strip render-blocking JavaScript and inline the CSS needed for above-the-fold content.