SEO

LCP (Largest Contentful Paint)

Q: What is LCP (Largest Contentful Paint)?

LCP measures the time until the largest visible element in the viewport is rendered — usually a hero image or block of text. It is a core metric of the Core Web Vitals. Thresholds: under 2.5s ”good”, 2.5–4s ”needs improvement”, over 4s ”poor”.

Q: What typically delays LCP?

Four causes: (1) slow server response (TTFB), (2) render-blocking CSS/JS, (3) large, unoptimised images, (4) client-side rendering without SSR. Optimisation: TTFB under 600ms, CSS inlined for above the fold, images compressed plus lazy loading.

Q: How do you measure LCP?

Two ways: (1) field data from CrUX (real users, authoritative for ranking), (2) lab data from Lighthouse (simulated browser, for test iteration). Both show the largest visible element and the load time under ”Metrics → LCP”.

Q: How do you improve LCP by several seconds?

Through three big wins: (1) the hero image as AVIF with fetchpriority=high, (2) loading render-blocking CSS asynchronously, (3) optimising server response time (CDN, caching strategy). Each of these steps often brings an LCP improvement of 1–2 seconds.

Also known as: LCP, Largest Contentful Paint

The Largest Contentful Paint (LCP) is the Core Web Vitals metric that measures how long it takes for the largest visible element on a web page to be rendered — typically the hero image, the main H1 heading or a large block of text. It is the most important indicator of perceived speed and has been a direct Google ranking factor since 2021. Target: under 2.5 seconds (75th percentile) for ”Good”, 2.5–4 s for ”Needs improvement”, over 4 s for ”Poor”.

What LCP actually means

During rendering, the browser identifies the largest visible element (measured by rendered area, not by file size). The LCP is the timestamp at which this element is fully visible within the viewport. Example: a magazine page has a 1200×800 hero image. If the image is fully visible after 1.8 seconds, LCP = 1.8 s. If a long block of text rather than an image is the largest visible content, its timestamp applies.

Optimising LCP — the biggest levers

Convert the hero image to WebP/AVIF — an immediate 25–50 % reduction in file size.
Load the hero image eagerly (NOT lazily) — lazy loading on above-the-fold images kills LCP.
Preload for the hero image — <link rel="preload" as="image" href="hero.webp">.
CDN for image delivery — geographically closer edge servers reduce TTFB.
Server response time (TTFB) — poor server performance is the limiting factor.
Reduce render-blocking CSS and JS — it prevents early rendering of the hero element.
Web fonts with font-display: swap — no waiting for the font download when the LCP is text.

Common LCP killers

Lazy loading on the hero image.
A very large, uncompressed hero JPEG/PNG.
Banners triggered by the tag manager that render above the fold and block.
Slow server response (TTFB > 1 s).
Render-blocking scripts in the head.
Cookie banners that trigger layout shift and delay LCP.

Example from practice

Example: a magazine page had an LCP of 4.3 s (Poor). Analysis: a 1.8 MB JPEG hero image without compression, lazy loading set by mistake, three render-blocking scripts in the head. Three fixes: the hero was compressed to WebP (down to 280 KB), loading="eager" + fetchpriority="high" were set, and the scripts were moved to async/defer. After 4 weeks: LCP 1.9 s — all three measures were necessary; individually they would have delivered only 30–40 % of the improvement. The ranking effect was visible within 6 weeks.

Frequently asked questions

What is LCP (Largest Contentful Paint)?

LCP measures the time until the largest visible element in the viewport is rendered — usually a hero image or block of text. It is a core metric of the Core Web Vitals. Thresholds: under 2.5s ”good”, 2.5–4s ”needs improvement”, over 4s ”poor”.

What typically delays LCP?

Four causes: (1) slow server response (TTFB), (2) render-blocking CSS/JS, (3) large, unoptimised images, (4) client-side rendering without SSR. Optimisation: TTFB under 600ms, CSS inlined for above the fold, images compressed plus lazy loading.

How do you measure LCP?

Two ways: (1) field data from CrUX (real users, authoritative for ranking), (2) lab data from Lighthouse (simulated browser, for test iteration). Both show the largest visible element and the load time under ”Metrics → LCP”.

How do you improve LCP by several seconds?

Through three big wins: (1) the hero image as AVIF with fetchpriority=high, (2) loading render-blocking CSS asynchronously, (3) optimising server response time (CDN, caching strategy). Each of these steps often brings an LCP improvement of 1–2 seconds.

Used in Rankmio for

LCP audit in the SEO check

Go to the feature →

Last updated: 2026-06-17 · Browse all glossary entries