LCP is part of the Core Web Vitals

How to find the LCP (Largest Contentful Paint) HTML Element

So Google Search Console has told you you have pages with poor LCP. Or you have run Google Lighthouse on a page that complains of a LCP longer than 4 seconds.

LCP, Largest Contentful Paint, is one of the new Core Web Vitals, which include FID (First Input Delay) and CLS (Cumulative Layout Shift). The Core Web Vitals are part of Google’s new ranking factor: Page Experience that will be implemented in 2021.

But which element on your page is the LCP?

Core Web Vitals

The Core Web Vitals measure the speed, interactivity and stability of a web page.

LCP is a measure of how quickly the main content or element of a web page renders on a device. If your website is set up with a Google Search Console profile you can find out what Googlebot thinks of your LCP, as well as the FID and CLS in the Core Web Vitals report.

LCPs over 4 seconds are Poor Performers

If your LCP is over 4 seconds, it will be reported as a Poor URL in the Report. There is a Report for Mobile and for Desktop.

If your LCP is poor like in the above GSC report then you’ll want to fix it before 2021 if not before.

Google will give you sample URLs that are representative of a page archetype with the issue. So your next step is to evaluate the page’s LCP to see if can be improved. To do that you have to first identify the HTML element that is the LCP. You can use Chrome Dev Tools to do this.

Using Chrome Dev Tools to Identify the LCP

Using the Performance tab we can run a recording of the web page’s render that will show us the LCP.

  • On MacOS you can open Chrome Dev Tools in the Chrome Browser using CMD SHIFT C
  • Be sure to select the device type, below I’ve selected iPhone X, you can also select Responsive and set the dimensions.
  • Then Click on the Performance Tab as shown below
  • Next you want to reload the page and start a recording. You can do this with clicking on the Reload Button that looks like a circular arrow.
  • Wait until the recorded profile is loaded and the locate the Timings row and the LCP icon.
Mouse over LCP icon to see which element is the LCP.

Now you can locate the HTML element that is being measured by the LCP:

  • Mouse over the LCP icon and watch the web page to see what element is being highlighted with information.
  • On the site (above) the LCP is the image above “Flu Vaccines”.

About the Author Kathy Alice

Kathy Alice Brown is a SEO expert specializing in Technical SEO and Content. In her spare time she loves to get outside.

Let’s Connect & I’ll Send You Your Ultimate 28 Point Page Performance Cheatsheet Instantly:

Leave a Comment: