Summary
LCP element usually hero image/text block — time until largest paint in viewport. Optimize discovery (preload), TTFB, render-blocking resources, image format/size. Client-side nav may not update LCP same as load. Target < 2.5s good.
Code example
new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries[entries.length - 1];
console.log('LCP element:', last.element, 'at', last.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });
Key points
- LCP element usually hero image/text block — time until largest paint in viewport.
- Optimize discovery (preload), TTFB, render-blocking resources, image format/size.
- Client-side nav may not update LCP same as load.