LCP
LCP measures when the largest above-the-fold element finishes rendering. Poor LCP hurts UX and Core Web Vitals performance.
Definition
LCP (Largest Contentful Paint) is a Core Web Vitals metric measuring when the largest above-the-fold element renders. Common bottlenecks include slow TTFB, heavy hero images, render-blocking resources, and fonts. Improving LCP means faster responses and faster critical resource loading.
Why it matters
- Directly impacts perceived first-load experience and conversion rates
- One of the three Core Web Vitals — Google uses it to evaluate page experience
- Poor LCP hurts SEO competitiveness (page experience is a ranking factor)
- LCP element is usually the hero image or main heading — first impression matters
- Mobile LCP is typically slower than desktop — requires special optimization
- LCP is directly affected by TTFB — slow server means slow LCP
- Good LCP reduces bounce rate and increases time on site
How to implement
- Reduce TTFB: use CDN, edge caching, SSG/prerender
- Optimize hero images: correct sizing, WebP/AVIF format, preload
- Use fetchpriority="high" to prioritize LCP element loading
- Remove render-blocking: defer non-critical JS/CSS with async/defer
- Inline critical CSS to avoid FOUC (Flash of Unstyled Content)
- Preload LCP images: <link rel="preload" as="image">
- Monitor LCP: use Lighthouse, CrUX, RUM for ongoing tracking
Examples
html
<!-- Preload hero image in <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Add fetchpriority to the image itself -->
<img src="/hero.webp" alt="Hero visual" fetchpriority="high" width="1200" height="600">html
// Monitor real LCP values
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP:', lastEntry.startTime.toFixed(0), 'ms');
console.log('LCP element:', lastEntry.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });Related
FAQ
Common questions about this term.