Blog home
How to find the Largest Contentful Paint element? A complete guide.

How to find the Largest Contentful Paint element? A complete guide.

Laurent Cazanove · June 20, 2022 · 5 min read

What is the LCP (Largest Contentful Paint) element?

There are multiple ways to measure the speed of a webpage. What matters most for User Experience is the page’s perceived speed. But when landing on a website, only a small portion of the page will actually be visible. This is the part that needs to load fast; comparatively, the total page loading time is less important.

In other words, while it’s okay (and recommended!) to lazy load what is off-screen, the initial viewport should load fast. Because that’s what users will see first. And that’s what their perception of the page responsiveness will be based on.

To standardize the benchmark of this “perceived loading time”, Google introduced the Largest Contentful Paint metric (LCP) as part of their Core Web Vitals. But why Largest? Simply put, your LCP time is the time it takes to load the so-called LCP element. That is, the largest element in pixels.

Google interprets LCP with the following values:

  • Good – Loads in <= 2.5s
  • Needs Improvement – Loads between 2.5s–4s
  • Poor – Loads for > 4s

Now, why should you care about LCP optimization? First, because it boosts SEO by improving the results for Google’s Core Web Vitals. Moreover, on top of being an objective per se, it is also a good benchmark for UX. By optimizing the LCP, we’re effectively improving the experience of our visitors. As studies have shown, this has an immediate effect on lowering bounce rate and increasing conversions.

The first step necessary to optimize the LCP time is to identify the Largest Contentful Paint element. In practice, the LCP element is usually one of the following:

  • Hero section image or video
  • Background image
  • Video thumbnail
  • Image carousel
  • Text

In the next section, we will see how to find the LCP element using some popular websites as examples.

How to find the LCP element?

This section will walk you through finding the LCP element. We will use the Google Chrome browser here, but it works with any modern browser (Safari, Mozilla and the others). We’ll start by finding the LCP element on the Forbes website, then repeat the process for Netflix, Lego, and Ikea.

Finding the LCP element of a page

Step 0 — Open the page of interest in your browser.

In our example, it’s https://www.forbes.com/.

Step 1 — Open the Developer Tools.

In Chrome, open the top right menu > More Tools > Developer Tools (or press Ctrl+Shift+I).

Google Chrome Developer Tools
Google Chrome Developer Tools

Step 2 — Navigate to the Performance tab and click on the Reload button.

Performance tab of Google Chrome Developer Tools
Performance tab of Google Chrome Developer Tools

Step 3 — Once the page is loaded, hover on the LCP option under the timings row. Check the image below for reference.

LCP time in Google Chrome Developer Tools
LCP time in Google Chrome Developer Tools

Step 4 — Get the location of the LCP element!

LCP element in Google Chrome Developer Tools
LCP element in Google Chrome Developer Tools

As we see, the LCP element of Forbes homepage is the image illustrating the featured article.

Netflix.com

After repeating the same steps as in the guide above, we observe that the LCP element of Netflix homepage is the hero section image.

Netflix home page LCP element
Netflix home page LCP element

Lego.com

The LCP element of Lego homepage is the h2 title text “Celebrate our anniversary with us”.

Lego home page LCP element
Lego home page LCP element

Ikea.com

Short auto-play videos in the hero section are often used to boost engagement – but their weight can explode the LCP time. In order to improve the perceived load speed, Ikea.com uses a placeholder image that takes the space of the short video while the video is loading. This lightweight 8.5 Kb placeholder image becomes the LCP element. This optimization technique contributes to an excellent LCP score of 1.1 seconds on mobile.

Ikea home page LCP element
Ikea home page LCP element

Conclusion

As we’ve seen, using the Developer Tools to identify the LCP element is straightforward. The challenge is the subsequent optimizations needed to improve LCP score, especially when the LCP element can take different forms.

While using more powerful servers or delivering assets from a CDN are the obvious response to latency issues, optimizing the LCP for media content requires more fine-tuning. In our upcoming guide, we will dive into optimizing LCP for the most common case: images and videos.

We will add the link to the guide here when it is published. So stay tuned to learn the key factors to boosting your SEO and page performance. You can also subscribe to our newsletter to get the guide emailed to you as soon as it’s ready.