What the metric measures
Largest contentful paint marks the time when the biggest visible element in the viewport finishes rendering. That element is usually a hero image, a large block of text, or a video poster. A good target is under two and a half seconds for most of your users.
- The largest element is chosen from what is visible without scrolling.
- The clock starts when the page begins loading.
- Late layout changes can move which element counts.
Where the time goes
The paint is delayed by four phases, and each is a place to cut time. First the browser must discover the resource, then wait for the server, then download it, then render it.
- Slow server response delays everything that follows.
- Late discovery happens when the image is hidden behind script or a background style.
- Heavy resources take long to download on slow networks.
- Render blocking stylesheets and fonts hold up the paint.
Practical fixes
- Mark the hero image with a high fetch priority so it loads first.
- Reference the hero in plain markup so the preload scanner finds it early.
- Compress and right size the image and serve a modern format.
- Remove render blocking resources from the critical path.
Key idea
Largest contentful paint improves when you help the browser discover, fetch, and render the biggest visible element as early as possible.