The Core Web Vitals offer a useful way to identify challenges
users might face while they are on your pages.
But how can you debug issues with these metrics?
Well, it turns out you can very well start in your browser.
♪ [music] ♪
It's important to remember
that these metrics are taken from real user metrics,
so, people using your website in the real world.
However, when debugging this,
we can get a rough idea of what might cause problems
by looking at lab data.
This is data we can create
and measure using our own devices.
To start your debugging,
it makes sense to get a first impression of the status quo
using Lighthouse in our Chrome developer tools.
We open the developer tools in our browser
and navigate to the
There we can get an audit like this.
Note that the responsiveness metrics-- FID or INP--
are field metrics
and can't really be captured by Lighthouse.
Instead, we'll use Total Blocking Time
as an approximate indicator.
Lighthouse usually shows a set of recommendations
that can help improve the performance quite a bit already.
However, Lighthouse focuses on the performance
of the initial page load.
Let's take a look at a website here.
According to Lighthouse,
this website is doing very well in terms of performance.
But as I click on this button,
we can see that the browser stops responding to my clicks.
Oh, no, I don't want that many pizzas.
Ah, that's frustrating.
But because Lighthouse focuses on the initial load of the page,
which is, admittedly, fast,
it doesn't capture these issues.
So debugging layout shifts or responsiveness problems
are very hard to spot this way.
Time to bring out the bigger tools,
like the Performance panel.
This is what the Performance panel will show you
when you load a page and record the performance audit.
This might look a bit scary at first,
but, you know, let's break it down.
On the top, we have an overview of all activity in the browser tab,
including some screenshots,
a waterfall of all the network requests
and when they happened,
the Web Vitals timeline, if you enable it,
and additional detail info
on what is going on behind the scenes.
With this panel,
you can dig deeper into how the network request,
JavaScript code execution,
and the Core Web Vitals work together.
There are also the Performance insights,
which present this information in a more digestible timeline form.
The big difference to Lighthouse is
that you can record the performance
during interactions with the page,
and thus, uncover responsiveness issues or layout shifts easier.
So, in this video,
we looked at the DevTools
for debugging issues with Core Web Vitals.
And while field data is still important
to measure real users experience on your sites,
we do have a bunch of tools available
to identify issues just using lab data.
The big upside there is
that we can do that during development,
and as an ongoing process to identify issues as they come up,
rather than deploying something that is broken,
and then looking for a remedial.
I hope this was useful for some of you.
And if you are interested
in what other powers DevTools could give you,
let us know in the comments below,
and we might make another video about the others as well.
Stay safe, have fun, and bye-bye!
♪ [music] ♪