Few things I’ve learned about Core Web Vitals and LCP

DanielJune 25, 2021June 30, 2021

These days a lot of the things I am working on are related to improvements for our main sales pages. Mostly improving core web vitals and LCP - largest contentful paint. And there are a few things I've discovered and wanted to share about this stuff:

1. the largest contentful paint element refers to the largest element from a size on-screen perspective. Not from a file size point of view. So, for example, if have a huge 4k jpeg if that image is rendered in 10x10px box then most likely it will not be considered the largest contentful paint element.

2. Lighthouse will point to the CSS selector that represents the largest contentful paint element. See the below screenshot.

3. don't hover your mouse on the tested web page while Lighthouse is running. It can take a bit till Lighthouse does its testing. If you run it locally be sure not to have the mouse on the webpage area as that will be considered a hover event and will mean that the user had interacted with the page, so the final score will be affected.

4. running a local test with Lighthouse can get quite resource-intensive for your machine. You can use pagespeedinsights. It is the hosted version of Lighthouse and you can test your pages so that your MacBook will not make the same noise as a Boeing taking off. However, keep in mind that this will only work for a live/public hosted version of your page. It will not work for your local environment.

5. about 25% of the Lighthouse is represent by the largest contentful paint. Found out this one from this presenation.

These are some of my recent smal findings. Hope they will save you some time!