What Largest Contentful Paint measures
Largest Contentful Paint, or LCP, measures when the largest visible element of a page appears, usually an image or a heading. Up to 2.5 seconds is good.
How it works
LCP is one of the three Core Web Vitals. It measures from the moment the page is requested until the largest element on the first screen has been drawn: an image, the poster image of a video or a block of text. For visitors, this is the moment the page is "there".
Up to 2500 ms is good, over 4000 ms counts as poor, each for three out of four page views.
The time is made up of four parts:
- Server response: until the first byte of the HTML arrives.
- Load delay: until the browser discovers the LCP image and requests it.
- Load duration: until the image has been transferred.
- Render delay: until the browser actually shows it, for example because scripts or stylesheets are still missing.
If the largest element is text, parts 2 and 3 drop out, but the font comes into play.
What matters
- A fast server response. Everything starts with the first byte, see server response time.
- An LCP image that is found early. It belongs in the HTML as an
<img>, not as a CSS background and not added by a script. It gets noloading="lazy", butfetchpriority="high". - A small LCP image. The right size and a modern format, see images.
- Nothing that holds up drawing. Blocking scripts and stylesheets delay even an image that has already loaded, see render-blocking resources.
- For text, the font. Without
font-display, text stays invisible until the font has loaded, see web fonts.
<img src="hero-1200.webp" fetchpriority="high" width="1200" height="600" alt="…">How to improve it
PageSpeed Insights names the page's LCP element in its diagnostics. Check which of the four parts takes the most time and start there. Sliders on the first screen often delay LCP because a script only puts the first image in place. Whether the hero image loads lazily or is set as a background is usually decided by the theme; your agency can change that.