---
title: "LCP Element Finder - Identify Your Largest Contentful Paint · Unlighthouse"
canonical_url: "https://unlighthouse.dev/tools/lcp-finder"
last_updated: "2026-06-30T08:47:49.290Z"
meta:
  description: "Free LCP test tool. Find your Largest Contentful Paint element, see timing breakdowns, and get actionable recommendations to improve loading speed."
  "og:description": "Free LCP test tool. Find your Largest Contentful Paint element, see timing breakdowns, and get actionable recommendations to improve loading speed."
  "og:title": "LCP Element Finder - Identify Your Largest Contentful Paint · Unlighthouse"
---

</h1>

```

Unlighthouse on GitHub

# **LCP Element **Finder

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

**LCP Analysis**

Enter a URL to find the LCP element

## **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~~](https://web.dev/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

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~~](https://www.debugbear.com/docs/lcp-by-phase) and [~~web.dev~~](https://web.dev/articles/optimize-lcp)

### **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 **

0s**2.5s****4.0s**8s**Good****Meh****Poor**

Source: [~~web.dev/lcp~~](https://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](https://unlighthouse.dev/learn-lighthouse/lcp/slow-server-response) [**Render Blocking** CSS and sync JS block painting](https://unlighthouse.dev/learn-lighthouse/lcp/render-blocking-resources) [**No Priority** LCP image loads too late](https://unlighthouse.dev/learn-lighthouse/lcp/prioritize-lcp-image) [**Lazy Loaded** Critical image has loading="lazy"](https://unlighthouse.dev/learn-lighthouse/lcp/lcp-lazy-loaded) [**CSR Delay** JS must execute before LCP renders](https://unlighthouse.dev/learn-lighthouse/lcp/client-side-rendering) [**Custom Fonts** Web fonts delay text LCP](https://unlighthouse.dev/learn-lighthouse/cls/web-fonts-causing-foit)

### **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

## **Frequently Asked Questions **

<details>

<summary>**01**### **What is Largest Contentful Paint (LCP)?**

</summary>

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.

</details>

<details>

<summary>**02**### **How do I find my LCP element?**

</summary>

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.

</details>

<details>

<summary>**03**### **Why is my LCP image lazy-loaded?**

</summary>

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.

</details>

<details>

<summary>**04**### **How do I improve my LCP score?**

</summary>

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).

</details>

<details>

<summary>**05**### **What are the LCP sub-parts or phases?**

</summary>

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.

</details>

### **Check LCP Across Your Entire Site **

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

[**Get Started **](https://unlighthouse.dev/guide/getting-started/installation) [**LCP Deep Dive **](https://unlighthouse.dev/learn-lighthouse/lcp)