PerfMaster

Largest Contentful Paint (LCP)

The most important metric for measuring perceived load speed.

Check Your Site's Largest Contentful Paint

Enter your website URL on the homepage to see your real LCP performance data.

What is LCP?

Largest Contentful Paint (LCP) measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. It's one of the three Core Web Vitals and is crucial for user experience.

LCP Thresholds

≤ 2.5s

Good

≤ 4.0s

Needs Improvement

> 4.0s

Poor

Quick Wins for LCP

  1. Preload your hero image with fetchpriority="high"
  2. Use a CDN for all static assets
  3. Convert images to WebP format
  4. Remove unused JavaScript
  5. Enable gzip or Brotli compression

What Elements are Considered for LCP?

The types of elements considered for LCP are:

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

Common Causes of Poor LCP

1. Slow Server Response Times

If your server takes too long to respond, everything else is delayed. Time to First Byte (TTFB) directly impacts LCP.

2. Render-Blocking JavaScript and CSS

Large CSS and JavaScript files block the browser from rendering content. The browser must download, parse, and execute these before showing content.

3. Slow Resource Load Times

Large images or videos that take a long time to load will delay LCP if they are the largest element in the viewport.

4. Client-Side Rendering

If content is rendered entirely on the client, the browser must download, parse, and execute JavaScript before any content appears.

How to Improve LCP

1. Optimize Your Server

  • Use a Content Delivery Network (CDN)
  • Enable server-side caching
  • Optimize database queries
  • Use HTTP/2 or HTTP/3
  • Consider edge computing (Vercel Edge, Cloudflare Workers)

Example: Cache-Control header

Cache-Control: public, max-age=31536000, immutable

2. Eliminate Render-Blocking Resources

  • Inline critical CSS
  • Defer non-critical JavaScript with async or defer
  • Remove unused CSS and JavaScript
  • Minify and compress resources

Example: Defer non-critical JavaScript

<script src="app.js" defer></script>

3. Optimize Images

  • Use modern formats (WebP, AVIF)
  • Implement responsive images with srcset
  • Compress images without losing quality
  • Preload the LCP image
  • Use fetchpriority="high" for LCP images

Example: Preload LCP image

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

4. Use Server-Side Rendering (SSR)

  • Pre-render HTML on the server
  • Use frameworks like Next.js, Nuxt, or Remix
  • Implement static site generation (SSG) where possible
  • Consider Incremental Static Regeneration (ISR)

Measuring LCP

Using the web-vitals library

import { onLCP } from 'web-vitals';

onLCP((metric) => {
  console.log('LCP:', metric.value);

  // Send to analytics
  analytics.track('LCP', {
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    entries: metric.entries,
  });
});