LCP (Largest Contentful Paint)

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.

Related

• Core Web Vitals
• TTFB
• Preload
• Image optimization
• टूल: Website speed test

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.