Largest Contentful Paint (LCP) is one of the three key web performance metrics within Core Web Vitals. The other two metrics are Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS).
Largest Contentful Paint (LCP) tracks the time it takes for a webpage's largest visible content element to load and render on the screen entirely. In most cases, the element is a large image or video, but it can also be a block of text, <svg> elements, or rarely <iframe> content. The metric includes connection setup time, server response (Time to First Byte), redirects, and even unload times from a previous page, which can affect the measurement.
LCP focuses on when the largest visual element appears on the screen, providing a better sense of when the page feels ready for interaction. In contrast, First Contentful Paint (FCP) marks the moment the first visible content is displayed, signaling the start of the loading process.
| Good | Needs Improvement | Poor |
|---|---|---|
| ≥ 2.5 seconds | 2.5 - 4.0 seconds | < 4.0 seconds |
| The score indicates that the page loads quickly, providing a fast and positive user experience. | The score shows that the page is moderately fast but could be optimized further to enhance the user experience. | The score reflects slow loading time, negatively impacting the user experience and potentially increasing bounce rates. |
To measure Largest Contentful Paint (LCP), both field and lab tools are available:
| Field Tools | Lab Tools |
|---|---|
| PageSpeed Insights Chrome User Experience Report Google Search Console Web-vitals.js library Wattspeed - CruX Report | Google Lighthouse Chrome DevTools PageSpeed Insights Wattspeed - Lighthouse Report |
To effectively optimize the Largest Contentful Paint, it’s crucial to identify the specific LCP element to address, determine whether an LCP problem exists, and evaluate its severity if that’s the case.
| Strategy | Actions |
|---|---|
| Optimizing server response time | → use a Content Delivery Network (CDN). → reduce Time To First Byte (TTFB). → implement server-side caching. → optimize database queries and backend processing. |
| Reducing render-blocking resources | → implement lazy-loading for non-critical images. → compress images using modern formats (e.g., WebP). → preload key resources like fonts and above-the-fold images. → use responsive and correctly sized images. |
| Enhancing resource loading | → minimize and defer CSS and JavaScript. |
| Optimizing font loading | → use modern font formats (e.g., WOFF2). → preload key web fonts. → implement font-display: swap in CSS to avoid invisible text during load. → avoid invisible text during load. |
| Improving client-side performance | → use a faster JavaScript framework or library. → optimize CSS and JavaScript for faster rendering. → minimize the use of large third-party scripts. |
| Improving hosting and infrastructure | → choose a hosting provider with better performance. → optimize DNS resolution and reduce redirects. → use HTTP/2 or HTTP/3 for faster resource delivery. |