# LCP

*Largest Contentful Paint*

LCP measures when the largest element in the viewport finishes rendering — usually the hero image or the headline. Google calls 2.5 seconds or less good, measured on real visits at the 75th percentile.

**Canonical:** https://spoko.space/glossary/lcp/  
**Language:** en  
**Category:** Performance  
**Also known as:** largest contentful paint, loading metric  
**Published:** 2026-09-22  
**Glossary:** https://spoko.space/glossary/

---
## What it is {#what-it-is}

The clock starts when the page begins to load and stops when the biggest thing in the visible area has been painted. Not when the page finished loading — when the part a visitor came to see appeared.

"Biggest" is decided by the browser, not by you, and it is almost always one of three things: the hero image, the first big headline, or a background image that turns out to be a real element. Everything below the fold is ignored: LCP is about the first screen.

## Why it matters if you are paying for a website {#why-it-matters-if-you-are-paying-for-a-website}

It is the number that tracks the moment a visitor stops looking at nothing. Whatever the total load time says, the page is useless until its main thing appears, and that is what LCP times.

It is also the Core Web Vitals metric most sites fail, and the one most worth fixing, because the fix usually improves the other two on the way.

## What actually moves it {#what-actually-moves-it}

Almost always deletion, not tuning.

On a migration off WordPress, the LCP does not improve because I compressed the pictures. It improves because the request no longer waits on plugin stylesheets, a font loader, a slider script and a cookie script, all of which block the browser from painting anything. Ship HTML that was finished before the request arrived and the hero has nothing to queue behind.

Two mistakes I find on nearly every audit. The hero image carries `loading="lazy"` — which tells the browser to wait before fetching the one image the metric is timing, usually because a plugin applied it to every image on the page. And the webfont is fetched by a stylesheet that is itself fetched by another stylesheet, so the headline cannot paint until two round trips have finished; on this site the font is preloaded alongside the document for exactly that reason.

The remaining time is the server. A slow first byte is a ceiling: no amount of front-end work gets the paint below the time the origin took to answer.

## What LCP is not {#what-lcp-is-not}

It is not page load time, and it is not a Lighthouse score. Lighthouse gives you a lab number from one simulated visit with no cookie banner and no marketing tags; the LCP that counts comes from real Chrome sessions over 28 days. The two disagree routinely, and when they do, the field data is the one Google uses.

## Related terms {#related-terms}

- [Core Web Vitals](https://spoko.space/glossary/core-web-vitals/): Core Web Vitals are the three metrics Google collects from real Chrome visits: LCP for loading, INP for responsiveness and CLS for visual stability. A URL passes when 75% of its visits are inside the good threshold. — Markdown: https://spoko.space/glossary/core-web-vitals.md
- [SSG](https://spoko.space/glossary/ssg/): Static site generation builds every page into a finished HTML file before anyone visits, so a request is answered by a file server instead of by code, a database query and a template rendered on the spot. — Markdown: https://spoko.space/glossary/ssg.md
- [CDN](https://spoko.space/glossary/cdn/): A CDN is a network of servers around the world that keep copies of your site and answer visitors from whichever one is nearest. It removes the distance between the visitor and the origin server — and only that. — Markdown: https://spoko.space/glossary/cdn.md
- [CLS](https://spoko.space/glossary/cls/): CLS scores how much a page jumps around while it loads, on a unitless scale where 0.1 or less is good. Every element that moves without the visitor causing it adds to the score, weighted by how far it moved and how much of the screen it took. — Markdown: https://spoko.space/glossary/cls.md

## Where I write about this {#related-posts}

- [Uper SEO Auditor](https://spoko.space/uper-seo-auditor/) — Markdown: https://spoko.space/uper-seo-auditor.md
  Chrome extension for SEO specialists and developers. Provides real-time debugging of Web Vitals, Schema.org, GTM, and JS errors directly in Chrome Side Panel.
- [Modern Website Design 2026 — Trends, Navigation and Inspiration](https://spoko.space/blog/modern-website-design-trends/) — Markdown: https://spoko.space/blog/modern-website-design-trends.md
  Bento grid, dark mode, kinetic typography, CSS scroll animations and the evolution of the hamburger menu — a practical guide to 2026 web design trends with examples and an inspiration list.
- [AEO — How to Optimize Your Website for AI and Answer Engines](https://spoko.space/blog/aeo-answer-engine-optimization/) — Markdown: https://spoko.space/blog/aeo-answer-engine-optimization.md
  Answer Engine Optimization, llms.txt, islands architecture, and speed as conversion currency. A practical guide to optimizing websites for language models and generative search.
- [10 Traits of an Effective Website | Conversion Optimization Guide](https://spoko.space/blog/effective-website/) — Markdown: https://spoko.space/blog/effective-website.md
  An effective website is one that converts visitors into customers. 10 concrete traits that decide the outcome — and how to verify each of them on your own site.

## See also {#see-also}

- [WordPress → Astro migration](https://spoko.space/wordpress-to-astro/)

## Sources {#sources}

- [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) — The definition, the thresholds and what counts as the LCP element.
- [Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp) — The four phases an LCP is made of, and which one to attack first.
