Core Web Vitals

Largest Contentful Paint (LCP) Guide

Definition

Largest Contentful Paint (LCP) is a user-centric performance metric that measures the time from when a page starts loading until the largest content element visible within the viewport is fully rendered.

Also known as: LCP

Explained

What LCP Measures

Image elements: <img> tags and CSS background images
Video poster images: thumbnail images for video content
Block-level elements: text nodes or inline text elements
SVG elements: scalable vector graphics within containers

Why LCP Matters for SEO

As a Core Web Vital, LCP directly influences Google's Page Experience signals and organic rankings. It correlates with engagement metrics such as time on page, pages per session, and conversion rates. Google treats LCP as a tie-breaker between equally relevant results, and sites with LCP under 2.5 seconds can see better ranking positions, lower bounce rates, and higher conversions.

Key Optimization Factors

Reduce server response time (TTFB) using CDNs and caching
Prioritize LCP resources with <link rel='preload'> and resource hints
Optimize images with WebP/AVIF, responsive sizing, and compression
Eliminate render-blocking CSS and JavaScript
Optimize font loading with font-display: swap and preloading
Manage third-party scripts to avoid main-thread blocking

Performance Thresholds

Good: under 2.5 seconds
Needs Improvement: 2.5 to 4 seconds
Poor: over 4 seconds

Example

On an e-commerce product page, LCP typically measures the hero product image loading time.