SEO

LCP

Also called Largest Contentful Paint

The time until the largest visible element on a page has rendered, one of the three Core Web Vitals.

Quick facts: LCP

Category
SEO
Also called
Largest Contentful Paint
Level
Intermediate
Affects
Perceived speed, bounce on mobile, page experience signals
Where to see it
PageSpeed Insights, Search Console Core Web Vitals report, Chrome performance panel
In this article4
  1. What LCP measures
  2. Why LCP matters
  3. Common mistakes with LCP
  4. How to act on it

What LCP measures

Largest Contentful Paint records the moment the biggest visible thing on the screen finishes rendering. Not the moment the server responded, not the moment the last script finished — the moment a visitor could see the main item on the page. It is one of the three Core Web Vitals, and it stands in for the everyday question of when the page looked ready.

The browser picks the element itself, and it can change during loading. A heading may hold the title briefly until a hero image arrives and takes over. The element counted is whichever was largest at the point the visitor first interacted, or when loading settled. On most business sites that is a hero image, a background image, a large heading or a video poster frame.

It helps to think of the measurement in parts: how long the server took to send the first byte, how long before the browser even started fetching that element, how long the fetch itself took, and how long after that before it was painted. Each part has different fixes, and a page can be slow in only one of them.

Why LCP matters

It is the vital that visitors feel most directly. A page that shows its main content quickly feels usable even if work continues underneath; a page that sits blank while a large image downloads feels broken, and people leave before anything loads.

Search engines use it too, as part of page experience, drawn from real visits rather than a test run. That distinction matters in Nepal and across much of South Asia, where most visits arrive on mobile networks and mid-range Android phones. A hero image that appears instantly on an office connection can take a long, visible pause on a phone in a suburb of Kathmandu, and it is the phone’s experience that is recorded.

Common mistakes with LCP

The biggest is optimising against a laboratory test alone. A tool that loads the page once from a data centre tells you what could happen; the field data behind Search Console tells you what did happen to real visitors on their own devices and connections. They frequently disagree, and only one of them is what gets reported.

The next is lazy-loading the hero image. Deferring images below the fold is good practice, but a blanket rule defers the very element being measured, and the score gets worse. Fonts cause a similar trap: a heading that waits for a web font cannot be painted, so the page holds an empty space where the largest element should be.

Then there are the ordinary faults — an enormous uncompressed image, render-blocking stylesheets and scripts in the head, a slow server response before anything can start, and content built entirely in the browser so nothing paints until the JavaScript has run.

How to act on it

Identify the element first. PageSpeed Insights names it, and the browser’s performance panel shows it on your own page. Everything after that is aimed at that one element: size and compress it properly, serve a modern image format, tell the browser to fetch it early, and never lazy-load it.

Then clear the road in front of it. Cut or defer render-blocking resources, reduce the server’s response time with caching and a content delivery network, and let text display in a fallback font rather than waiting. Re-check against field data, not the lab score, and give it time — the reported figure covers a rolling window of real visits, so it moves after your fix, not with it. Where images are the culprit, lazy loading policy and page speed work usually go together, and the other Core Web Vitals improve alongside it.

Do and do not

Do

  • Find the actual LCP element before changing anything
  • Load the hero image eagerly with high fetch priority
  • Judge results on field data, not a single lab run

Do not

  • Lazy-load images that appear in the first screenful
  • Let a heading wait on a web font before painting
  • Test only on desktop when most visits are mobile

Questions people ask about this

Why is my Lighthouse LCP good but Search Console says it is poor?

Because they measure different things. Lighthouse runs the page once on a simulated device, in ideal conditions. Search Console reports what real visitors experienced, on their own phones and connections, gathered over a rolling window. Trust the field data, since that is what search engines use, and treat the lab tool as a way to diagnose causes rather than to grade the page.

Should I lazy-load my hero image to speed the page up?

No. Lazy loading is for images below the fold that a visitor may never scroll to. The hero image is almost always the element LCP measures, so deferring it delays the exact moment being scored. Load it eagerly, tell the browser to fetch it with high priority, and apply lazy loading only to images further down the page.

How long before an LCP fix shows up in reports?

Field data is collected over a rolling window of real visits, so improvements appear gradually rather than immediately. You will see the change in your own browser straight away, and in lab tools the same day, but the reported figure only shifts as enough new visits accumulate. Keep the fix in place and check again after several weeks.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.