Largest Contentful Paint (LCP) Metric: A Guide to Faster Page Loads

The world of the Largest Contentful Paint (LCP) metric is akin to the adrenaline-fuelled realm of motor racing – it's a relentless battle against time. Let's navigate the twists and turns of our racetrack to ensure we're as prepared as can be. So, what will we learn?

• What is the LCP metric?
• What are its recommended values?
• Why is it important?
• How is the LCP metric calculated?
• How and where do we recommend measuring it?
• What are common mistakes and optimization opportunities?

Introducing the LCP Metric#

The LCP metric measures the time taken for the largest element on the page to become visible. This helps users assess the usefulness of a page.

This metric is part of the Core Web Vitals used for measuring the loading speed of web pages. Core Web Vitals are also among the signals Google considers when ranking search results.

Keep LCP Under 2.5 Seconds#

If you want your Largest Contentful Paint to fall within the acceptable "green" zone, it must be under 2.5 seconds. An LCP between 2.5 and 4 seconds lands in the "amber" zone and needs adjustments. An LCP time exceeding 4 seconds is rated as unsatisfactory by Google.

	Good	Needs Improvement	Poor
LCP	≤ 2.5 s	2.5 - 4 s	> 4 s

The Largest Contentful Paint (LCP) metric is important for several key reasons that significantly impact the overall user experience and the success of a website.

These include reducing bounce rates, influencing e-commerce conversions, boosting brand trust, and improving search result rankings.

On our clients' websites, the LCP metric often correlates with the conversion rate. We explore this in our conversion analysis.

What is the LCP Element?#

Simply put, it's the largest visual element on the page that appears during the loading process in the user's main viewport. The LCP element is what the browser tracks, measuring the time it takes to render.

You can identify the LCP element using a variety of developer tools – Lighthouse, the Performance Tab in DevTools, or the Web Vitals Chrome extension. For a detailed look into finding and testing (not just) LCP, read my article Key Developer Skill: Testing Web Vitals in the Browser.

Potential LCP elements include:

• <img> elements
• <image> element within an <svg> element
• <video> element with a "poster" image
• Background images using the background-image property (CSS gradient is ignored)
• Block-level elements containing text or other inline-level text descendants

Conversely, the following elements cannot be LCP elements:

• Elements with opacity: 0 or others that are invisible to the user.
• Elements that fill the entire viewport, considered illustrative rather than content.
• Placeholder images with low informational content. This guards against LCP hacks, where developers insert a large image devoid of information. If you're unsure about the information level of your images, you can test them using the Image BPP calculator.

The key is identifying the “LCP element”. Note, it may differ across various resolutions.

See how to find the LCP element.

How is the LCP Element Evaluated?#

To properly evaluate and optimize, one needs to understand how the LCP metric is calculated. Typically, it involves assessing the visible size of the LCP element on the user's screen. Clipped parts, sections hidden with overflow:hidden, and properties like padding, margin, border, etc., are not considered. For a more in-depth dive into LCP evaluation, there's an excellent article on web.dev.

Measuring LCP on Your Website#

Reliable data sources on Core Web Vitals metrics include datasets from the Chrome UX Report (CrUX). These datasets can be utilized for an entire domain or individual URLs. A detailed breakdown of LCP values at the origin level is shown in a histogram.

Working with raw CrUX data requires a fair amount of technical skill. Fortunately, we have tools that process and display this data in graphs automatically, such as PageSpeed.ONE or PageSpeed Insights.

Basic data on the status of the LCP metric can be obtained from our web speed test or PageSpeed Insights. For an overview of development over time, try our web speed test.

If you're finding the Chrome user limitation too restrictive, you can always opt for your own measurements using RUM (Real User Monitoring) or write custom data collection via JavaScript and the Performance Observer API.

Google Search Console is one of the sources that provide crucial information on prioritizing LCP optimization.

Another option is synthetic measurements, which you can secure using tools like SpeedCurve, Google Lighthouse, WebPageTest, and others.

We discuss the differences between these measurements on a dedicated page: synth vs. CrUX vs. RUM.

LCP Mistakes and Optimization Opportunities#

The LCP metric is rather complex. One must realize that numerous factors can influence it. Primarily, it involves resources critical for first render:

• Backend response time (the TTFB metric).
• HTML size and complexity.
• The size of CSS and other critical resources.

Backend response time (TTFB) optimization often helps improve the LCP metric.

LCP also accounts for asynchronous resources, such as images or web fonts, which may comprise the LCP element. Thus, LCP can also be affected by:

• The format, physical and data size of the image itself.
• The size of font files, etc.
• The presence of an image in the poster attribute of a <video> tag.

In general, keep all times and sizes as low as possible. Our secret tip? Use lazy loading for images and use it well.

Find more tips for web image optimization.

Here, lazy loading would help. Lazily loaded images (all except the first) would prioritize the first image, impacting LCP.

You can also improve LCP with more complex adjustments, which we'll describe below:

Lazy Loading Can Harm LCP#

The rule is that images without lazy loading download first in the browser. Images with lazy loading download later, even when visible in the viewport. If you have lazy loading on an image that is also the LCP element, it downloads much later, increasing LCP time. Therefore, remove lazy loading from LCP elements on your site and add lazy loading to all other elements:

<img src="image-non-lcp.webp" loading="lazy" alt="Image" />

Fetch Priority Boosts File Download#

A complex HTML structure or too many files being downloaded can delay our LCP element. Using the fetchpriority attribute, we can increase the priority of a selected file download. This improves the LCP metric. However, use this technique cautiously and test its impact thoroughly.

<img src="image.webp" fetchpriority="high" alt="" />

Preload Web Font Resources for LCP Elements#

If you find that a text element is evaluated as the LCP element on your page, you must ensure the fastest possible download of web font files and their display. To achieve this, you can use preload techniques. A small note: Use preload sparingly, so preload only that single font cut that affects LCP:

<link rel="preload" href="font-1.woff2" as="font" type="font/woff2" crossorigin />

Check out our text on LCP optimization.

Key LCP Takeaways#

• Largest Contentful Paint (LCP) is a metric measuring the time it takes for the largest visual element to appear on the page.
• Recommended LCP values are under 2.5 seconds; 2.5 - 4 seconds require adjustments, and over 4 seconds is unsatisfactory.
• LCP is a critical part of Core Web Vitals, affecting user experience and often influencing website bounce rates, e-commerce conversions, or search engine positions.
• In optimizing LCP, focus on improving the loading speed of critical resources, correctly using lazy loading, or utilizing the fetchpriority attribute to increase file download priority.

The LCP metric is part of our unified speed metric, PageSpeed.ONE Score (SPS).

We Have Years of Experience Optimizing LCP#

Our long-term collaboration with the Footshop.cz project began with LCP optimizations. Here, among other things, we fine-tuned the transition from client-side rendering cached via Service Worker to server-side rendering. The result is 2.5× better LCP speed on mobiles.

Image from the main picture: Unsplash.