Largest Contentful Paint is a Core Web Vitals metric that measures how long it takes the largest visible image or text block to render after a page starts loading. It indicates when the main content a visitor expects to see has likely appeared. LCP focuses on the initial viewport, so a fast score requires both prompt delivery of the key asset and a browser that can render it without delay.
Largest Contentful Paint
What Is Largest Contentful Paint?
Largest Contentful Paint, or LCP, is a Core Web Vitals metric that measures how long the largest visible image or text block takes to render after a page starts loading. It indicates that main content, such as a hero image, video poster, or headline, has appeared in the initial viewport.
LCP measures rendering, not downloading. An image may be downloaded but still have a slow LCP if CSS, JavaScript, fonts, or browser work delays its appearance.
What Is a Good LCP Score?
Google evaluates LCP using the 75th percentile of real-user page views. Review mobile and desktop results separately because network and device speed differ.
| LCP time | Assessment |
|---|---|
| 2.5 seconds or less | Good |
| More than 2.5 to 4 seconds | Needs improvement |
| More than 4 seconds | Poor |
How Largest Contentful Paint Works
The browser tracks eligible visible elements as the page loads. The largest candidate can change as content appears.
- A visitor opens a page and the server begins responding.
- The browser reads HTML and discovers images, stylesheets, scripts, and fonts.
- It downloads resources for the main visible content.
- It applies styles and renders eligible viewport images or text.
- It records the latest, largest candidate before the visitor interacts.
Largest Contentful Paint vs. First Contentful Paint
Both metrics track visible loading progress, but they answer different questions.
| Metric | What it marks | Typical focus |
|---|---|---|
| First Contentful Paint | The first text, image, or other content becomes visible. | Early server response and render-blocking resources. |
| Largest Contentful Paint | The largest important visible element finishes rendering. | The hero asset, its loading priority, and rendering path. |
Why Is My LCP Poor?
A slow score usually means the LCP element cannot render quickly.
- Slow server response delays HTML and discovered resources.
- The hero image loads late because it is hidden by scripts, lazy-loaded, or low priority.
- An oversized or poorly encoded image takes too long to transfer and decode.
- Render-blocking CSS, JavaScript, or web fonts delays rendering.
- Client-side rendering waits for JavaScript before producing main content.
- Other optimizations do not help if they do not affect the LCP element.
How to Diagnose and Improve LCP
Use evidence to find and fix the largest loading delay.
- Identify the reported LCP element in PageSpeed Insights or Chrome DevTools.
- Compare real-user field data with a controlled Lighthouse test.
- Inspect the network waterfall for server response, discovery, download, or rendering delays.
- Prioritize the hero asset, compress and size it appropriately, and avoid lazy-loading it.
- Remove or defer nonessential render-blocking resources.
- Retest on representative devices and networks, then monitor results after release.
LCP in Modern Web App Development
Reliable LCP needs route-level performance budgets, deliberate hero-asset choices, and release testing. Server rendering or pre-rendering can help when main content would otherwise wait for JavaScript. Include these choices in app design and development, not as a last-minute repair.
Teams using an AI web app builder or an AI website builder can define and test the first-screen experience early. Build faster-loading web apps with Emergent.
Start Building
on Emergent today
on Emergent today
Start Building
