Largest Contentful Paint (LCP) Metric: A Guide to Faster Web Loading

The world of the Largest Contentful Paint (LCP) metric is akin to the thrill of a high-speed racetrack—it’s an endless race against time. Let's navigate the twists and turns of our track to ensure we’re fully prepared. What will we discover?

• 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?

Meet the LCP Metric#

The LCP metric measures the time it takes for the largest element to appear on a page. This helps users assess the usefulness of a page.

This metric is part of Core Web Vitals, used for measuring website loading speed. Core Web Vitals are also one of the signals considered by Google in search ranking.

Keep LCP Under 2.5 Seconds#

For Largest Contentful Paint to be in the green, satisfactory zone, the value must be under 2.5 seconds. An LCP between 2.5 and 4 seconds is in the orange zone and requires adjustments. An LCP time above 4 seconds is considered unsatisfactory by Google.

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

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

These include reducing bounce rates, influencing e-commerce conversions, brand credibility, or search engine rankings.

On our clients' websites, the LCP metric often correlates with the conversion rate. We do this as part of conversion analysis.

What is the LCP Element?#

Simply put, it’s the largest visual element on a page that is displayed during the loading process in the user's main viewport. The LCP element is what the browser tracks and measures for display time.

The LCP element can be identified using developer tools like Lighthouse, the Performance Tab in DevTools, or the Web Vitals Chrome extension. You can delve into searching and testing (not just) LCP in my article Key Developer Skill: Testing Web Vitals in the Browser.

Elements that can be evaluated as the LCP element include:

• <img> elements
• <image> elements within <svg> elements
• <video> elements 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 children

Elements that cannot be LCP elements include:

• Elements with opacity: 0 and others that are invisible to the user.
• Elements that fill the entire viewport. These are considered more illustrative than content-rich.
• Placeholder images with low information content. This is to protect against LCP hacks where developers inserted a large, informationless image into the page. If you have doubts about the information content of your images, you can test them in the Image BPP calculator (bits per pixel).

The key is to identify the “LCP element.” Just be aware that in different resolutions, it may be a different element.

Check out how to find the LCP element.

How is the LCP Element Evaluated?#

For proper evaluation and optimization, it’s essential to understand how the LCP metric is calculated. The size of the LCP element visible on the user's screen is typically evaluated. Cropped parts, parts hidden using overflow:hidden, or properties like padding, margin, border, and others are not considered. If you want to dive deeper into LCP evaluation, there’s a good article on web.dev.

Measuring LCP on Your Own Website#

Reliable data sources for Core Web Vitals metrics are datasets from the Chrome UX Report (CrUX). You can work with this data for the entire domain or individual URLs.

Working with raw CrUX data is quite demanding on technical skills. Fortunately, we now have tools that process this data and display it in graphs automatically. These include Pagespeed.cz or Pagespeed Insights.

Basic data about the state of the LCP metric is provided by PageSpeed Insights. If you want an overview of progress over time, try our tester.

If you find the limitation to Chrome browser users too restricting, you can always resort to your own measurements using RUM (real user monitoring), or write your own data collection using JavaScript and the Performance Observer API.

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

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

We write about the differences between measurements on a separate page: synth vs. CrUX vs. RUM.

LCP Errors and Optimization Opportunities#

The LCP metric is quite complex. It’s important to realize that many factors can affect it. First and foremost, it involves resources critical for the first render:

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

Optimizing backend time (TTFB) often helps improve the LCP metric.

LCP also includes asynchronous resources, such as images or web fonts, which can form the LCP element. Therefore, LCP can also be influenced 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 the <video> tag.

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

Here are more tips for optimizing images on the web.

Here, lazy loading would help. Lazy-loaded images (all except the first) would aid in prioritizing the first image, which impacts LCP.

However, 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 are downloaded first in the browser. Images with lazy loading are downloaded later, even if they’re in the visible part of the viewport. If you have lazy loading on an image that is also the LCP element, it will be downloaded 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 Downloading#

A complex HTML structure or too many downloading files can cause our LCP element to download too late. Using the fetchpriority attribute, we can increase the priority of a selected downloading file. This will improve the LCP metric. However, use this technique with caution and test the impact thoroughly.

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

Preload LCP Element Web Font Resources#

If you find that a textual element is evaluated as the LCP element on a page, you need to ensure the fastest possible download and display of web font files. To achieve this goal, you can use preload techniques. A small warning: Use preload sparingly, so only preload the 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.

What You Should Remember About LCP#

• Largest Contentful Paint (LCP) is a metric measuring the time it takes for the largest visual element to appear on a page.
• Recommended values for LCP are under 2.5 seconds, 2.5 - 4 seconds require adjustments, and above 4 seconds, LCP is unsatisfactory.
• LCP is a key component of Core Web Vitals, affecting user experience and often the bounce rate, e-commerce conversions, or search engine rankings.
• When optimizing LCP, focus on improving the loading speed of critical resources, proper use of lazy loading, or using the fetchpriority attribute to increase file download priorities.

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

We Have Years of Experience in LCP Optimization#

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

Illustration from the main image: Unsplash.