Technical SEOPublished22.05.2026

Largest Contentful Paint (LCP)

A Core Web Vitals metric measuring the load time of the largest visible element on a page. Directly affects Google rankings.

In brief

LCP (Largest Contentful Paint) is the time from page load start until the largest element in the viewport (image, video, or text block) is fully rendered. A lower LCP means users see the main content faster.

What is Largest Contentful Paint

LCP is a key Core Web Vitals metric that Google has used as a ranking signal since 2021. It measures the time from page load start until the largest visible element in the user's viewport is fully rendered.

LCP reflects perceived speed: when the main content appears quickly, users experience the page as fast — even if loading isn't fully complete.

LCP thresholds

RatingLCP timeAction
Good≤ 2.5 sMaintain — avoid regressions on updates
Needs Improvement2.5–4 sPrioritise loading of the hero element
Poor> 4 sCritical: full image, TTFB, and render optimisation needed
Google evaluates LCP using field data (real users from Chrome UX Report), not lab data. Lighthouse is useful for diagnosis, but ranking depends on CrUX.

What elements count as LCP

  • Images — <img> and <image> inside SVG
  • CSS background images — via background-image: url(...)
  • Videos — with a poster attribute; the browser uses the preview frame
  • Text blocks — if the largest element in the viewport: <p>, <h1>, <div> with text
The browser continuously updates the LCP candidate as the page loads. The final LCP value is recorded when the user first interacts with the page (scroll, click, key press).

How to improve LCP

Step 1Optimise the hero image

Use WebP/AVIF, add fetchpriority="high" to the LCP element, remove loading="lazy" from above-the-fold images.

Step 2Reduce server TTFB

Optimise server response time, enable a CDN, configure caching. A TTFB > 800 ms makes a good LCP nearly impossible.

Step 3Eliminate render-blocking resources

Move non-critical CSS and JS to the end, or use defer / async. Inline critical CSS directly in <head>.

Step 4Preload the LCP resource

Add <link rel="preload" as="image"> for an LCP image, or <link rel="preload" as="font"> if LCP is a text element in a custom font.

FAQ

Common questions

Yes. LCP is part of Core Web Vitals, which Google uses as a ranking signal since June 2021. It is particularly important for mobile search.
Use Google PageSpeed Insights (field data + Lighthouse), the Core Web Vitals report in Google Search Console, Chrome DevTools (Performance tab), or WebPageTest.
No. FCP (First Contentful Paint) marks when any first content appears. LCP marks when the largest element renders, which is closer to the user's perception of 'the page has loaded'.
Usually the hero image in the page header, or the first large H1 heading. You can see it in Lighthouse under 'Largest Contentful Paint element'.
Lab tests (Lighthouse) run the page in controlled conditions without cache. Field data (CrUX) reflects real users on real devices, networks, and locations — often slower than lab conditions.
Direct contacts

Discuss your project?

Share your goals and website context — I will suggest a practical next step.

pavlo.seo@proton.me@pavelbarushkaLinkedIn