Largest Contentful Paint (LCP) is the Core Web Vital that most closely matches what visitors mean when they say a page is “slow”. It marks the moment the biggest piece of content in the viewport, usually a hero image or headline, appears on screen. Until then, the page feels unfinished, no matter how much has technically loaded.
LCP is also the Core Web Vital many sites find hardest to pass, because it depends on everything in the loading chain: server response, how early the browser discovers the main image, how big that image is and whether anything blocks it from being painted. Fixing it means finding which link in that chain is slow.
Our Core Web Vitals overview introduces LCP alongside INP and CLS. This guide goes deeper: what counts as the LCP element, how to break LCP into its four sub-parts, how to diagnose which one is slow, and specific fixes for each.
Key Takeaways
- A good LCP is 2.5 seconds or less at the 75th percentile of page visits; over 4 seconds is poor.
- LCP breaks down into four sub-parts: Time to First Byte, resource load delay, resource load duration and element render delay.
- The most common fixable problem is late discovery of the LCP image, caused by lazy loading, JavaScript injection or CSS backgrounds.
- Use
fetchpriority="high"on the LCP image, never lazy-load it, and make sure it is in the initial HTML. - Optimise the whole chain. web.dev notes that a quick fix to a single part rarely makes a meaningful difference.
What counts as the LCP element?
According to web.dev, the elements considered for LCP are:
<img>elements (for animated images, the first frame)<image>elements inside an<svg><video>elements (the poster image or first frame, whichever is earlier)- Elements with a background image loaded via CSS
url() - Block-level elements containing text
Chrome excludes elements with zero opacity, full-viewport elements that are likely backgrounds, and low-entropy placeholder images. Only the part of an element visible in the viewport counts towards its size. The browser stops reporting new LCP candidates once the user taps, scrolls or presses a key, so the metric reflects the initial loading experience.
On many mobile pages the LCP element is a heading or paragraph rather than an image. That matters: text LCP is usually limited by TTFB, render-blocking CSS and web fonts, while image LCP is usually limited by discovery and download.
The four sub-parts of LCP
“Every single page can have its LCP value broken down into these four subparts.”
— web.dev, Optimize Largest Contentful Paint
| Sub-part | What it covers | Approx. share of LCP on a well-optimised page (web.dev) |
|---|---|---|
| Time to First Byte | Navigation start until the first byte of HTML arrives | ~40% |
| Resource load delay | First byte until the browser starts loading the LCP resource | <10% |
| Resource load duration | Time to download the LCP resource | ~40% |
| Element render delay | Resource loaded until the element is painted | <10% |
web.dev presents these proportions as guidelines rather than strict rules, and warns against converting them into fixed millisecond targets. The useful insight is the shape: almost all the time should be spent getting the HTML and downloading the image, with very little waiting in between. If resource load delay or element render delay is large, you have a prioritisation problem, not a bandwidth problem. For text LCP elements there is no resource to load, so the time is split between TTFB and render delay.
How to diagnose LCP: step by step
- Confirm it is a real problem. Check field data in Search Console’s Core Web Vitals report and PageSpeed Insights. Group failing URLs by template.
- Identify the LCP element on mobile and desktop. PageSpeed Insights and Lighthouse show it, and Chrome DevTools’ Performance panel marks it on the timeline. It can differ between devices.
- Read the LCP breakdown. The “LCP breakdown” insight in Lighthouse and the DevTools Performance panel split the time into the sub-parts above.
- Find the largest sub-part and apply the matching fixes below.
- Check the request priority of the LCP image in the DevTools Network panel. It should be requested early and at high priority.
- Retest in the lab, then monitor the field for about four weeks as Chrome UX Report data updates.
Fixes for each sub-part
1. Reduce Time to First Byte
If TTFB is a large share of LCP, start at the server: page caching, a CDN, fewer redirects and faster backend code. Our dedicated guide to Time to First Byte covers these in detail.
2. Eliminate resource load delay
This is the most common problem and often the easiest win. The browser’s preload scanner can only start downloading an image early if it can find it in the HTML. Images inserted by JavaScript, hidden behind data-src lazy-loading attributes, or set as CSS backgrounds are discovered late.
- Put the LCP image in the initial HTML as a normal
<img>withsrcorsrcset. - Never lazy-load it. web.dev states that lazy-loading the LCP image will always lead to unnecessary resource load delay.
- Add
fetchpriority="high"to the LCP image, and use it on only one or two images. - If the image must be a CSS background, preload it with high priority.
- Lower the priority of images that are not initially visible, such as later carousel slides.
<!-- LCP image discoverable and prioritised -->
<img src="hero-1200.webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w"
sizes="100vw" width="1200" height="600"
fetchpriority="high" alt="Customer using our booking app">
<!-- If the hero must be a CSS background -->
<link rel="preload" as="image" href="hero-1200.webp" fetchpriority="high">Priority hints can make a real difference. web.dev’s Fetch Priority article reports that in a Google Flights experiment, setting high priority on the LCP background image improved LCP from 2.6 seconds to 1.9 seconds. Your own results will depend on the page.
3. Shorten resource load duration
- Resize the image to its displayed size and serve responsive variants.
- Use efficient formats and compression; see our guides to image compression and WebP and AVIF.
- Serve images from a CDN, ideally on the same origin as the HTML to avoid an extra connection.
- Reduce competition for bandwidth: defer non-critical scripts and avoid preloading lots of other files.
4. Cut element render delay
- Remove render-blocking CSS and scripts from the head, inlining only a small amount of critical CSS.
- Break up long JavaScript tasks that occupy the main thread during load.
- For text LCP, make sure web fonts do not hide text for long; use
font-displayand preload the key font. - Avoid client-side rendering for the main content; consider server-side rendering or static generation.
- Remove anti-flicker snippets from A/B testing tools that hide the page until scripts load.
“It's rare that a quick fix to a single part of a page will result in a meaningful improvement to LCP.”
— web.dev, Optimize Largest Contentful Paint
LCP problems by page type
| Page type | Typical LCP element | Common cause | First fix to try |
|---|---|---|---|
| Homepage with slider | First slide image | Slider script injects images late | Render first slide in HTML with fetchpriority="high" |
| Product page | Main product photo | Oversized image, lazy-loaded by theme | Remove lazy loading on first image; resize and compress |
| Blog post | Featured image or H1 text | Render-blocking CSS and fonts | Critical CSS, font preload |
| Landing page built with page builder | Background hero image | CSS background discovered late | Switch to <img> or preload |
| JavaScript app | Content rendered by JS | Content waits for bundle download and execution | Server rendering or prerendering |
Common mistakes
- Lazy-loading every image, including the hero, often by a theme or plugin default.
- Adding
fetchpriority="high"to many images, which cancels out the benefit. - Optimising the desktop LCP element only, when mobile shows a different element.
- Relying on a lab score. Google uses field data; a fast test on fibre does not reflect a mid-range phone on mobile data.
- Preloading an image that is not the LCP element, which steals bandwidth from the one that is.
- Ignoring TTFB. If the HTML arrives late, image fixes can only do so much.
LCP is one of three metrics. Once it passes, check Cumulative Layout Shift, since late-loading hero images without dimensions are also a common cause of layout shifts, and see our wider page speed guide.
Related Guides
- Interaction to Next Paint (INP): How to Improve It
- Cumulative Layout Shift (CLS): How to Fix It
- How to Use PageSpeed Insights
Frequently Asked Questions
What is a good Largest Contentful Paint score?
2.5 seconds or less at the 75th percentile of page loads, measured separately for mobile and desktop. Above 4 seconds is poor.
What is the LCP element?
The largest image, video poster, background image or text block visible in the viewport during page load. PageSpeed Insights and Chrome DevTools identify it for you.
Should I lazy-load my hero image?
No. Lazy-loading the LCP image delays its download and worsens LCP. Load it eagerly with fetchpriority set to high.
Why is my LCP fine on desktop but poor on mobile?
Mobile devices have slower CPUs and networks, and the LCP element is often different on small screens. Check the mobile LCP element and its breakdown separately.
How long until LCP improvements show in Search Console?
Field data covers a rolling 28-day period, so improvements appear gradually over roughly four weeks after the fix goes live.
Conclusion
Improving LCP is a matter of finding the slow link in the chain. Break your LCP into its four sub-parts, fix discovery and priority first, then shrink the image, remove render-blocking code and speed up the server. If you need help getting your templates into the “good” range, our page speed optimization service specialises in Core Web Vitals, or get a free quote.
References
- Largest Contentful Paint (LCP) – web.dev
- Optimize Largest Contentful Paint – web.dev
- Optimize resource loading with the Fetch Priority API – web.dev
- Understanding Core Web Vitals and Google search results – Google Search Central
- About PageSpeed Insights – Google for Developers
- Largest Contentful Paint (LCP): What It Is and How to Improve It – Semrush Blog
