Google PageSpeed ​​Insights screenshots LCP and CLS elements

Written by Anil Patil, Published on May 1, 2021 4:14 pm, GMT+0530

Google PageSpeed ​​Insights screenshots LCP and CLS elements

Google PageSpeed Insights now visually displays LCP and CLS elements as screenshots.
This is a function implemented by Lighthouse.

Improve Google Page Speed Website on WordPress & Blogger


Boost Speed of your wordpress website, It is very helpful that the tools used for improvement become easier to use.

Visually check the LCP and CLS elements.

You can visually see the LCP and CLS elements in the PageSpeed Insights validation results.

Checking LCP elements

The ” Draw Maximum Content” element represents the element that is subject to LCP.
Thumbnail images are posted with HTML code.

Pagespeed Insights LCP

Click the thumbnail image to enlarge.

Google Pagespeed Insights LCP Score

Article first paragraph are subject to LCP

Checking CLS elements

“Keep the layout unchanged” represents an element of CLS.
Thumbnail images are posted in the same way as LCP.

Pagespeed Insights cls

Although it is minute, it was recognized that it caused a layout shift.

It’s much easier to see which element corresponds to LCP or CLS while it’s displayed on the page, compared to just the HTML code.

1 month half extended However, the core web vital is incorporated into the line King factors approaching the day.

Leave a Reply