Detect the Largest Contentful Paint element using the browser Performance API, analyze the four LCP phases, and get actionable optimization recommendations for each phase.
Two tools: detect the LCP element on this page live using the Performance API, or analyze LCP phases from your known total LCP time.
PerformanceObserver API watches for largest-contentful-paint events in real time. The result updates as the page loads. Scroll down to trigger lazy-loaded images, then click Capture Result to freeze the final LCP.This tool uses the PerformanceObserver API with entry type largest-contentful-paint. Every time a new element becomes the largest visible element in the viewport, the browser reports it via this API. The final LCP is the last entry reported before user interaction or page load completes.
Note: LCP is only measured before the user first interacts with the page. After a click or keypress, no more LCP entries are reported — the last entry before interaction is the definitive LCP.
new PerformanceObserver(function(list) {
list.getEntries().forEach(function(e) {
console.log('LCP element:', e.element);
console.log('LCP time:', e.startTime, 'ms');
console.log('LCP size:', e.size, 'px²');
});
}).observe({type: 'largest-contentful-paint', buffered: true});
Enter your LCP timing data to visualize the 4 phases and get phase-specific optimization recommendations. Get these values from Chrome DevTools → Performance → LCP details.
LCP is the sum of four sequential phases. Optimizing the largest phase has the biggest impact on your total LCP score.
| Phase | Measured as | Good | Budget | Primary fix |
|---|---|---|---|---|
| TTFB | responseStart - requestStart (Navigation Timing) | <800ms | ≤40% of LCP | CDN, server caching, faster hosting |
| Load Delay | LCP resource fetchStart - responseStart | <200ms | ≤10% of LCP | Preload LCP image, avoid lazy-loading LCP |
| Load Duration | LCP resource responseEnd - fetchStart | <500ms | ≤25% of LCP | WebP/AVIF, compress, CDN, srcset |
| Render Delay | LCP startTime - LCP resource responseEnd | <200ms | ≤25% of LCP | No render-blocking JS, CSS, inline critical CSS |
| Total LCP | Sum of all 4 phases | <2.5s | Target | Needs Improvement: 2.5s–4s |
The browser considers specific element types when determining the Largest Contentful Paint candidate.
Images: <img> elements (including those inside <picture>), CSS background images set via url(), poster images on <video> elements. The element must be visible — not hidden with opacity:0, display:none, or outside the viewport.
Text: Block-level text elements — <p>, headings (<h1>–<h6>), <div> containing text. The "size" of a text LCP candidate is the area of text visible in the viewport, not the full element height.
<svg> elements, <canvas>, <video> (only the poster image counts), elements with opacity: 0, elements completely outside the viewport, and inline SVG images. LCP only measures content in the initial viewport (above the fold) — scrolling down does not retroactively change LCP.
The LCP candidate changes during page load — early in loading, a small image might be LCP, but as a larger hero image loads, the LCP element updates. The final LCP is what matters for the metric.
Optimization strategies for each LCP phase, ordered by impact.
Use a CDN (Content Delivery Network) to serve HTML from edge nodes close to users. Enable server-side page caching (Redis, Varnish, or static HTML generation). Use HTTP/2 or HTTP/3. Enable Brotli or gzip compression on HTML. Optimize database queries. Consider edge-side rendering or static generation (SSG).
Add <link rel="preload" as="image"> for the LCP image in the <head>. Never lazy-load the LCP image — remove loading="lazy" from it. For background images, use <link rel="preload"> since CSS background images are not discovered until CSS is parsed. Avoid server-side rendering delays that push image tags late in the HTML.
Convert hero images to WebP (30-35% smaller) or AVIF (50% smaller vs JPEG). Compress images aggressively — hero images rarely need to be over 100-150KB. Serve images from a CDN close to users. Use srcset and sizes to serve appropriately sized images per device. Consider image optimization services (Cloudinary, imgix, Cloudflare Images).
Remove render-blocking JavaScript from the <head> — use defer or async. Inline critical CSS for above-the-fold content. Remove or defer large CSS files. Ensure the LCP image is not hidden by JavaScript that runs after load. Check that there's no opacity: 0 animation waiting on JS initialization. Use Chrome DevTools Performance tab to trace what runs before LCP renders.