Glossary · Performance

LCP (Largest Contentful Paint)

LCP is the time from navigation start until the largest image or text block in the viewport finishes rendering, a Core Web Vitals loading metric.

Updated October 6, 2026

LCP (Largest Contentful Paint) measures how long it takes for the largest visible image, video poster or block of text to render in the viewport. It approximates the moment a visitor feels the main content has loaded.

Why it matters

LCP is the loading metric in Core Web Vitals. Google's "good" threshold is 2.5 seconds or less at the 75th percentile of real visits. A slow LCP usually traces back to four things: a slow server response, render-blocking CSS or JavaScript, a late-discovered hero image, or an oversized image file.

Example

A product page has a 1.8 MB hero photo referenced only from a CSS background. The browser discovers it late, so LCP is 4.1 seconds. Moving it to an img tag, compressing it and adding a preload hint can cut this substantially:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" width="1200" height="600" alt="Product">

Common mistakes

  • Lazy loading the hero image. The LCP element should load eagerly and with high priority.
  • Optimizing only the image while TTFB is 1.5 seconds; the delay starts at the server.
  • Assuming the LCP element is the same on mobile and desktop. It often differs.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceFCP (First Contentful Paint)FCP is the time from navigation start until the browser renders the first piece of DOM content, such as text, an image or a non-white canvas.Glossary · PerformanceLighthouse ScoreThe Lighthouse performance score is a 0-100 rating computed from weighted lab metrics such as LCP, TBT and CLS, run in a simulated environment.Glossary · PerformancePageSpeed InsightsPageSpeed Insights is Google's free tool that reports a URL's real-user Core Web Vitals from CrUX alongside a Lighthouse lab test with fix suggestions.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.