How to Find the LCP Element?

The LCP metric stands among the most critical.

To optimize it, you must identify the "LCP element," the largest component visible to a specific user. The time it takes to render this element determines the LCP metric.

If you're aiming to optimize LCP, you need to pinpoint the LCP element on your website's most visited template pages.

There are several methods to identify LCP elements:

1) PageSpeed Insights#

You're probably familiar with this part of PageSpeed Insights...

...but to identify the LCP element, look for the “Largest Contentful Paint Element”:

See PageSpeed Insights.

PageSpeed Insights display results generated by the Lighthouse tool, which also powers our speed tester and is available in Chrome DevTools.

2) Lighthouse in the Browser#

Lighthouse powers PageSpeed Insights and is available in Chrome DevTools, and it also underlies our speed tester.

See Lighthouse.

3) Web Vitals Extension#

Simply install the Web Vitals extension and check the console in DevTools:

4) Performance Panel in DevTools#

This one's for the geeks:

Once you've found the LCP, the goal is to render it as quickly as possible on the page.

Achieve this by speeding up resources necessary for its rendering while deprioritizing downloading all other resources.

We discuss this further in our article on LCP optimization.