PageSpeed Insights now visually displays LCP and CLS elements as screenshots.
This is a function implemented by Lighthouse.
PageSpeed Insights now includes Lighthouse's element screenshots! https://t.co/WGqCEsyDZK— Lighthouse (@____lighthouse) April 27, 2021
Find your page's most important elements even more quickly; click on the screenshot to reveal the element in the context of the whole page 🔎🖼 pic.twitter.com/W6AKlHVbqV
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.
Click the thumbnail image to enlarge.
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.
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.
It is very helpful that the tools used for improvement become easier to use.