Core Web Vitals audit
Ten checks for the three metrics a field report will quote at you, plus the measurements that explain them. Start with the metrics themselves so you know which one is actually failing, then work through the causes rather than guessing. The important discipline here is separating lab from field. A trace on your machine tells you what happens on your machine, and the number in a field report came from real visitors on real networks. When the two disagree, neither is wrong and only one of them is the reason anyone is asking.
10 checksabout 71 min end to end
The metrics
- How to test core web vitals
Take all three at once so the work that follows is aimed at the one that is failing. - How to check LCP of a page
The paint the visitor is waiting for, and the metric most often fixed by changing what loads first rather than by making anything faster. - How to check CLS
The defect that disappears on a fast machine with a warm cache, which is every developer's machine.
What happens before the first paint
- How to check TTFB
Every millisecond here is spent before the browser has anything to draw, and it belongs to a different team than the rest of the list. - How to check render blocking resources
Names which requests actually delay the paint, which is a much shorter list than a static scan suggests. - How to check preload and preconnect hints
The fix for a late-discovered resource, and the easiest thing on the list to apply to the wrong one. - How to check DNS lookup time
A hostname added by a third-party tag costs a lookup on the first visit and appears in no markup diff.
What the page is made of
- How to check page size
Puts a cost on the render path, and makes a compression argument concrete. - How to check number of requests on a page
The cheapest signal that a build changed shape between two releases. - How to check if images are lazy loaded
Lazy loading helps the first paint and hurts it when the largest element is the thing being deferred.
Take it with you
The file is the same list as Markdown checkboxes, ready to paste into a release ticket or a pull request description.
Ticks are kept in this browser only. They are not sent anywhere and other people do not see them.