How to debug LCP Core Web Vitals

by Wasalu Duckworth

First step of understand what is core web vitals should be to refer to the official page.

In short, core web vitals are a new Google metrics that will be part of all Google tools and starting May 2021 will be a ranking factor in Google Search. Therefore it is important to be ready and start working on improving the metrics before they become an issue.

In this article we will assume you are fairly familiar with what the metrics are and show you a few ways on how to debug and identify the exact elements causing the issue.

First thing you will need is a chrome browser and install the Web Vitals plugin. Once you have that set up you will already be able to see the metrics.

To get deeper insight on what exactly is happening and what elements and actions are triggering the scores you can enable the console log option for the module. You can do this in chrome://extension plugin options section. Once enable you will be able to drill into each metric and find each entry which contributes to the score. For example for largest contentful paint we can identify the img.post-card-image element.

For reference and further tips on documentation you can refer to the official guides for optimization: