What Is Largest Contentful Paint?
Abbreviation: LCPAlso known as: Largest visual element render time
Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element to load within the viewport.
Last reviewed: 6 August 2026 · Reviewed by iNet Ventures SEO Team
In plain English
LCP is the time it takes for the biggest visible thing on your page — usually a hero image, a video poster, or a large block of text — to appear. If the largest thing takes too long, the page feels slow even if smaller parts have loaded.
Technical definition
LCP is a web performance metric that reports the render time of the largest image, video, or block-level text element visible within the initial viewport, relative to when the page first started loading. It is one of Google's Core Web Vitals.
Quick example
If a product page's main hero image appears 2.8 seconds after navigation, that page's LCP is 2.8 seconds. If the image is the largest viewport element, anything that delays it increases the score.
Quick facts
| Meaning | The time until the largest visible element is rendered in the viewport |
|---|---|
| Main category | Technical SEO |
| Used by | Developers, performance engineers, SEOs, and site owners |
| Difficulty | Intermediate |
| Importance | High |
| Common examples | Hero images, product images, video posters, large headings, background images |
| Still relevant? | Yes. LCP is a confirmed Google ranking factor through the Core Web Vitals initiative. |
Why Largest Contentful Paint matters
LCP directly affects how fast a page feels. Slow LCP is one of the main reasons users abandon a page before it appears ready.
It is a confirmed ranking signal
Google uses LCP as part of the Core Web Vitals used in its page experience ranking systems.
It shapes first impressions
Users judge a site by how quickly the main content appears. A slow LCP makes a site feel unresponsive.
It reflects real user experience
Unlike synthetic lab tests, LCP is measured from real Chrome users in the field.
It often has high-impact fixes
Optimising the largest element usually means compressing one image or improving server response, which can yield large gains.
How it works
LCP begins when the page starts loading and ends when the largest viewport element is rendered.
- 1
The browser receives the HTML
Time to first byte and HTML parsing start the clock.
- 2
Render-blocking resources are fetched
CSS and scripts in the head can delay the start of rendering.
- 3
The largest visible element is identified
The browser tracks images, videos, and block-level text in the viewport and picks the largest.
- 4
The element renders
When that largest element is painted to screen, LCP is recorded.
Types and variations
LCP can differ by viewport, connection, and the largest visible element.
Image LCP
The largest visible element is an image, such as a hero, product photo, or background.
Video poster LCP
The LCP element is a poster image for a video, often large and above the fold.
Text LCP
A large block of text is the largest visible element, common on text-heavy pages.
Mobile vs desktop LCP
The same page may have different LCP elements and scores on mobile and desktop.
Field vs lab LCP
Field data comes from real users; lab data comes from controlled tests. Field data is what Google uses for ranking.
Real examples
Real-world examples of LCP problems and fixes.
A hero image with a placeholder and preload
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w" imagesizes="100vw">The hero image is preloaded, served in WebP, and sized to the viewport. The page LCP drops from 4.2 seconds to 1.9 seconds.
A text-first landing page
The largest visible element is a heading rendered with a system font. The text appears immediately, producing a sub-2.5-second LCP.
A 5 MB background image loaded without dimensions
The background image is heavy, not preloaded, and has no width or height attributes. It loads late and causes layout shifts.
A third-party script that blocks hero rendering
A large chat widget script is loaded in the head, blocking the render of the hero image and increasing LCP.
Best practices
A good LCP is under 2.5 seconds. Most improvements come from the largest image or the server.
What to do
- Compress and serve modern image formats like WebP or AVIF
- Size images close to their rendered dimensions
- Preload the LCP image with a <link rel="preload" as="image"> tag
- Improve server response time or use a CDN
- Minimise render-blocking CSS and JavaScript
- Remove or lazy-load non-essential above-the-fold resources
What to avoid
- Uploading huge, unoptimised hero images
- Waiting until JavaScript loads before displaying key content
- Putting large images far above a slow-loading font
- Using a slow host for the initial HTML request
- Ignoring field data from PageSpeed Insights or Search Console
Common mistakes
Optimising everything except the largest element
If the biggest thing is an uncompressed hero image, fixing smaller scripts will not move the LCP much.
Testing only in lab tools
Real-world LCP is what matters. Use Chrome User Experience Report or Search Console Core Web Vitals data.
Forgetting about mobile
Mobile viewports often have different largest elements. Test on real mobile devices and throttled networks.
Why LCP is a business metric, not a lab score
LCP is one of the clearest technical signals a site can send. A fast LCP says the site is ready; a slow one says it is not. Users form an impression within seconds, and that impression affects trust, bounce rate, and conversion. Because LCP is measured from real Chrome users, it also reflects the real world: mobile networks, slower devices, and ad-hoc browsing.
- LCP affects conversion as much as rankings
- It is a real-user metric, so field data is the truth
- The largest element is usually an image, so image optimisation is the biggest lever
- LCP, CLS, and INP together describe the full page experience
- Improving LCP is usually a one-time effort with lasting returns
How iNet Ventures approaches largest contentful paint
We treat LCP as a user-experience issue. We start with the biggest visible element and work backwards to the server.
Audit the LCP element
We use PageSpeed Insights and Search Console to identify the largest visible element on every key page.
Fix the image or text
We compress, preload, and size the LCP asset so it renders as early as possible.
Reduce render blocking
We defer non-critical scripts and split CSS so the main content is not waiting on the head.
Validate with real data
We monitor field LCP after changes and make sure the improvement is sustained.
Continue learning
Frequently asked questions
What is a good LCP score?
Google considers an LCP under 2.5 seconds to be good, 2.5 to 4.0 seconds as needing improvement, and over 4.0 seconds as poor.
Does LCP affect rankings?
Yes, as part of Core Web Vitals. It is one of the page experience signals, though content relevance and authority remain more important.
What elements count for LCP?
Images, video poster images, and block-level text elements like headings and paragraphs within the viewport all count.
Definitions and guidance are reviewed against Google Search documentation, industry usage, and iNet Ventures editorial standards.
- Written by:
- iNet Ventures Editorial Team
- Reviewed by:
- iNet Ventures SEO Team
- Published:
- 6 August 2024
- Last reviewed:
- 6 August 2026
Spotted something out of date or incorrect? Tell us and we will review and correct it.
Need links that actually hold up?
White-label link building and digital PR, priced per placement. Every link comes with a live URL and the context behind it.