How to Identify the LCP Element on Your Page

Identifying Your LCP Element

The first step in optimizing LCP is knowing which element is the LCP candidate. Without this information, you may optimize the wrong resource.

Method 1: Chrome DevTools Performance Panel

1. Open Chrome DevTools (F12)
2. Go to the Performance panel
3. Click the record button and reload the page
4. Stop recording after the page loads
5. In the Timings section, look for the LCP marker
6. Hover over it to see the element highlighted on the page
7. Click it for detailed timing information

Method 2: Web Vitals Chrome Extension

Install the Web Vitals extension from the Chrome Web Store. After page load, click the extension icon to see your LCP value and the element that triggered it.

Method 3: Performance Observer API

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
  console.log('LCP size:', lastEntry.size);
  console.log('LCP URL:', lastEntry.url);
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

Method 4: PageSpeed Insights

Run your URL through PageSpeed Insights (pagespeed.web.dev). The diagnostics section will identify the LCP element and show its load timing breakdown.

Common LCP Elements by Page Type

Page Type	Typical LCP Element
E-commerce PDP	Hero product image
Blog / Article	Featured image or H1 text
Landing Page	Hero banner image or video poster
Dashboard	Large data table or chart
Search Results	First result card text

LCP Candidates

Not every element is eligible to be an LCP candidate. Valid LCP elements include:

• <img> elements
• <image> inside SVG
• <video> poster images
• Elements with background-image loaded via url()
• Block-level elements containing text nodes