Core Web Vitals - LCP - An in-depth Look

It's no secret that I'm really enthusiastic about Core Web Vitals. Why? Because in the past, we had multiple very cryptic metrics to measure a site's performance. In contrast, there are only three metrics used for Core Web Vitals, which makes them simple, while being relevant to a visitor's experience on the site.

In this post we will take a deeper look into the Largest Contentful Paint (LCP) core web vital.

What is LCP?

To put it very simply, LCP is all about how quickly a website loads. Over time there had been several approaches to determine when enough content is present on a site for it to be useful to a visitor. According to the LCP metric, this is when the largest visible contentful element on a site is fully rendered.

Then what is a contentful element? Basically anything counts as long as it's not whitespace like padding an margin (so no, adding a large empty element to improve a site's LCP does not work). Typically the element will be either a block of text or an image, but videos would also be possible.

How is LCP measured?

LCP is basically a timing, how long does it take from sending a request to the server until the LCP element is rendered on the page.

If this timing is good if it is below 2.5 seconds. If it is greater than 2.5 seconds, you should improve it and anything above 4 seconds can be considered as a terrible LCP timing.

Examples

To get a better feel for the different shapes of LCP elements, let's look at a few examples from different websites.

Netlfix LCP

In the case of Netflix's landing page, we find one of the most typical LCP elements out there. Netflix has a hero image as its LCP element.

It is safe to say that nearly every page that uses an hero image, will have the image as the LCP element. So if that is the case for your page, you really need to make sure that your hero image is optimized!

Gatsby Blog LCP

What about minimalistic blog pages? What will be our LCP element if we do not show hero images? In such a case, it might not be immediately obvious when we're looking at the page, but the relevant element will be the largest visible block of text.

What's also interesting about this page is, that it actually contains larger elements, but their size is mainly due to whitespace, which doesn't count for LCP. Therefore the blog post's description is actually the largest element visible.

Portfolio Site LCP

Since we're already on my website, it just feels natural to look at the LCP of my landing page. While I use a background image (with lots of opacity in it) on the desktop view. The mobile view only contains text. In this case there's little surprise that the large hero text is the LCP element.

It's interesting to note that the LCP element should typically be your main element and the thing your visitors should look at and interact with first. More on this in the next part.

Why is LCP an important metric

In the beginning of the article I mentioned that core web vitals (which includes LCP) are user-centric metics and we just touched on this point.

So what is the point between LCP? And why do we measure the Largest element and not something like the first contentful element or similar metrics we had in the past?

Well, it all comes down to user experience and hierarchy within a page. If a site follows typical design best practices, there will be a hierarchy between elements and, often, larger elements will be the starting point of a user's journey. Therefore, the user journey can only really begin once the LCP element is fully rendered.

But let's say, this wasn't the case and the LCP element is not something you need to interact with (like hero images). Even in this case, we really need the LCP element to be rendered quickly. No matter what kind of element appears on a page as the LCP element, if a user is already interacting with an element on the page and suddenly a much larger element pops up on the page, they will lose their focus.

How to test your LCP

There are a ton of ways to test the LCP of a site, probably the fastest and easiest way is to use Google's Pagespeed Insights. This page provided by Google runs a performance check on a website and provides several metrics, including LCP.

Alternatively if you need deeper insights into your page's performance, you can use Google Lighthouse, which comes with the chrome developer tools.

What's especially cool if you want to dive really deep into how your page is rendered is the profiler tab in your chrome tools. It marks the LCP element for your (that's what I used for the images in this article).

Summary

I hope this gave you a good overview over the LCP metric. In this article we discussed that LCP is the time it takes to render the largest contentful element on a page. That this timing should be below 2.5 seconds and that in many cases hero images will act as the LCP element.

LCP is also a user-centric metric and is highly important for your website's performance score.

If you want to learn more about this metric, you should totally check out the following links:

If you enjoyed this article, you might also want to check out some of my other blog posts on Core Web Vitals: Core Web Vitals - CLS - Cumulative Layout Shift
Core Web Vitals - FID - First Input Delay
Core Web Vitals - E-commerce\

Sources:
Core Web Vitals on web.dev