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

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 our visitors' experience. Studies have shown that 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).

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

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

Step 4 — Get the location of the LCP element!

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

Additional examples: LCP elements of some popular websites

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.

Lego.com

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

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.

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 your 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. If you want to learn more about LCP optimization regarding images, you can read this post: Optimizing the image element LCP.

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.