LCP Element Finder

Identify which element is your Largest Contentful Paint and get actionable fixes.

LCP AnalysisCore Web Vital

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

0ms
Navigation
~800ms
FCP
2.5s
LCP ✓

LCP marks when the largest element finishes rendering.

LCP Phases Breakdown

See how time is spent loading your largest element

Slowed 4× for clarity
Total: 2500ms
0msLCP
TTFB
800ms
Load Delay
400ms
Load Time
600ms
Render Delay
700ms
TTFB800ms
Load Delay400ms
Load Time600ms
Render Delay700ms

Time to First Byte

Phase 1 of 4

800ms

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

400ms

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

600ms

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

700ms

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

Based on DebugBear and web.dev

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.

≤2.5s
Good
2.5-4s
Needs Work
>4s
Poor
LCP Score Distribution
0s2.5s4.0s8sGoodMehPoor

Source: web.dev/lcp

Common LCP Elements

What typically becomes the LCP element

Hero Images

Large banner or header images above the fold

H1 Headlines

Large text headings on text-heavy pages

Background Images

CSS background-image on large containers

Video Posters

Poster images for <video> elements

What Affects LCP

Common issues that slow down your LCP

Slow Server

Server response delays everything

Render Blocking

CSS and sync JS block painting

No Priority

LCP image loads too late

Lazy Loaded

Critical image has loading="lazy"

CSR Delay

JS must execute before LCP renders

Custom Fonts

Web fonts delay text 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

Check LCP Across Your Entire Site

Your homepage might be fast, but what about product pages, blog posts, and landing pages?

Get Started LCP Deep Dive