LCP Element Finder
Identify which element is your Largest Contentful Paint and get actionable fixes.
What is Largest Contentful Paint?
LCP measures how long it takes for the largest visible content element to render on screen. This is typically a hero image, headline, or large text block. Google uses LCP as one of the three Core Web Vitals that directly affect search rankings.
A good LCP score means users perceive your page as loaded quickly—even if other content is still loading in the background. The LCP element changes as the page loads, so the final LCP is measured when the largest element stops changing.
LCP Timeline
LCP marks when the largest element finishes rendering.
LCP Phases Breakdown
See how time is spent loading your largest element
Click Play to start
Time to First Byte
Phase 1 of 4
25%
Time waiting for the server to respond with the first byte of HTML.
How to optimize
- Use a CDN to serve content closer to users
- Enable server-side caching
Resource Load Delay
Phase 2 of 4
15%
Time between TTFB and when the browser starts loading the LCP resource.
How to optimize
- Add <link rel="preload"> for LCP image
- Avoid lazy-loading the LCP image
Resource Load Duration
Phase 3 of 4
25%
Time spent downloading the LCP image or video resource.
How to optimize
- Compress images with WebP or AVIF
- Use responsive images with srcset
Element Render Delay
Phase 4 of 4
35%
Time from resource loaded (or TTFB for text) until the element is painted.
How to optimize
- Reduce JavaScript bundle size
- Use font-display: optional for web fonts
LCP Scoring Thresholds
Google's LCP thresholds are based on real user data from millions of websites. To pass Core Web Vitals, 75% of page visits must have an LCP under 2.5 seconds.
Source: web.dev/lcp
Common LCP Elements
What typically becomes the LCP element
Large banner or header images above the fold
Large text headings on text-heavy pages
CSS background-image on large containers
Poster images for <video> elements
What Affects LCP
Common issues that slow down your LCP
Quick LCP Fixes
High-impact optimizations you can implement today
For Image LCP
- Add
fetchpriority="high" - Remove
loading="lazy" - Preload with
rel="preload" - Use WebP or AVIF formats
For Text LCP
- Preload critical fonts
- Use
font-display: optional - Inline critical CSS
- Remove render-blocking scripts
01What is Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is a Core Web Vital that measures loading performance. It marks the time when the largest content element (usually an image or text block) becomes visible in the viewport. A good LCP score is 2.5 seconds or less.
02How do I find my LCP element?
This tool identifies your LCP element automatically by running a Lighthouse audit. It shows you exactly which element is your LCP—typically a hero image, video poster, or large text heading—along with timing breakdowns and optimization recommendations.
03Why is my LCP image lazy-loaded?
Lazy-loading your LCP image is a common mistake that significantly hurts performance. Images above the fold (visible without scrolling) should load immediately with fetchpriority="high" and never use loading="lazy". This tool detects if your LCP is incorrectly lazy-loaded.
04How do I improve my LCP score?
To improve LCP: preload your LCP image with <link rel="preload">, add fetchpriority="high" to the LCP element, use modern image formats (WebP/AVIF), optimize server response time (TTFB), remove render-blocking resources, and ensure the LCP element is in the initial HTML (not injected by JavaScript).
05What are the LCP sub-parts or phases?
LCP consists of four phases: Time to First Byte (TTFB), Resource Load Delay (time from TTFB until the browser starts loading the LCP resource), Resource Load Time (time to download the LCP resource), and Element Render Delay (time from download complete until the element is painted). Optimizing each phase improves overall LCP.
Check LCP Across Your Entire Site
Your homepage might be fast, but what about product pages, blog posts, and landing pages?