Largest Contentful Paint (LCP) is one of Google’s three Core Web Vitals and measures how quickly the largest visible piece of content on a web page appears after it’s opened. It’s measured in seconds from the start of the page load. LCP has been an official ranking factor since 2021 and delivers a comparatively simple answer to the question: when does the user see that something substantial has loaded? The largest element is usually a hero image, a video preview or a dominant block of text.
Thresholds
Google divides LCP values into three rating tiers:
| Value | Rating |
|---|---|
| ≤ 2.5 s | good (green) |
| 2.5 – 4 s | needs improvement (orange) |
| > 4 s | poor (red) |
The values apply to the 75th percentile of real user traffic, not the median and not the ideal value on a developer’s laptop. That means: three quarters of your visitors should reach the target LCP, otherwise the value flows negatively into the ranking.
Which element counts as the “largest contentful paint”?
The browser considers all visible elements in the viewport and determines the largest by pixel area. Candidates are:
<img>elements (incl.<picture>sources)<video>posters- Background images loaded via CSS
background-image - Block-level text nodes
Elements outside the initial viewport or hidden via display: none don’t count. Animations and lazily loaded content appearing after the first render can no longer lower the measured value either.
Typical causes of poor LCP
- A slow server response (TTFB): the HTML answer arrives too late and everything else backs up
- Render-blocking CSS or JavaScript: external stylesheets or synchronous scripts delay the first paint
- Unoptimised images: huge PNGs/JPGs without modern formats (WebP, AVIF) and without
srcset - Web fonts with FOIT: fonts that block rendering instead of displaying with a fallback
- A missing CDN: content travels around the globe instead of from the nearest edge node
- Client-side rendering without SSR: a React/Vue/Angular bundle that must first be loaded, parsed and executed before anything visible appears in the DOM at all
How is LCP optimised?
- Prioritise hero images with
fetchpriority="high"and an early<link rel="preload" as="image"> - Modernise images: WebP/AVIF, correct sizes via
srcset/sizes, sensibleloading="eager"for the LCP element - Relieve the render path: critical CSS inline, non-critical CSS asynchronous, JS with
defer/async - Speed up the server: caching, a CDN, edge rendering, fewer backend round trips
- Optimise fonts:
font-display: swap, local hosting, preloading of the most important variant - SSR or static generation instead of purely client-side rendering for JS-heavy pages
Tools for measuring
- Google PageSpeed Insights delivers both lab and field data (CrUX report)
- Lighthouse in the Chrome DevTools for local diagnosis
- Google Search Console: the Core Web Vitals report across real users
- web-vitals JS library for your own tracking in real user monitoring (RUM)
Frequently asked questions about LCP
What’s the difference between LCP and First Contentful Paint (FCP)? FCP measures when the first arbitrary element is rendered, even a spinner counts. LCP, in contrast, measures the largest, i.e. the more meaningful element. As a Core Web Vital, LCP matters more.
How often does the LCP value change? Search Console aggregates over 28 days. An optimisation therefore doesn’t show immediately but only fully affects the rating over several weeks.
Does only mobile LCP count, or desktop too? Both – Search Console reports mobile and desktop separately. Since Google indexes mobile-first, though, mobile LCP performance is particularly important.
Conclusion
LCP is the most direct answer to the question of how quickly a page builds up substantially – making it a central lever for both user perception and Google visibility. We’re happy to support you with analysing and optimising your website’s Core Web Vitals – get in touch for a no-obligation consultation.