Core Web Vitals shows the three metrics Google ranks on — LCP, CLS and INP — measured live on the page you are viewing, rated against Google's thresholds, and traced back to the exact element behind each number.
Core Web Vitals decide part of how your pages rank, but the usual ways of measuring them are awkward. Lab tools score a synthetic load that nobody experiences. Search Console reports real users, four weeks late, grouped into URL buckets. Neither tells you which element on the page in front of you is the problem.
This tool measures the page you are actually looking at, as you use it. LCP, CLS and INP each get a tile with its value, a Good, Needs work or Poor rating against Google's published thresholds, and a bar showing where you sit. FCP and TTFB sit alongside them for context, because a slow LCP caused by a slow server is a different problem from one caused by a heavy image.
The definitions match what Chrome reports to CrUX, which matters if you intend to compare numbers with Search Console. CLS uses session windows — a window ends after a one-second gap or at five seconds, and the worst window wins — rather than naively adding every shift together. INP is the 98th percentile of your interaction latencies, which for a normal visit is simply the slowest interaction. LCP stops changing at your first interaction, exactly as Chrome does it.
Most usefully, every number is attributed. The panel names the largest-paint element, the elements that shifted and the slowest interactions, and a Show button scrolls to any of them and outlines it on the page. Instead of knowing that CLS is 0.31, you see the banner that is pushing your content down. Copy report hands you the whole thing as text for a ticket.
The three ranking metrics update as you use the page: scrolling moves CLS, clicking and typing move INP. Each is rated Good, Needs work or Poor against Google's thresholds.
Names the largest-paint element, the elements that shifted and the slowest interactions. Press Show to scroll to any of them and outline it directly on the page.
CLS uses session windows with a 1s gap and 5s cap, INP is the 98th percentile of interaction latencies, and LCP freezes at first interaction — so your numbers line up with Search Console.
First Contentful Paint and Time To First Byte sit beside the big three, so you can tell a slow server apart from a heavy hero image before you start optimising the wrong thing.
Lists your slowest interactions with the event type and the element involved, so a sluggish dropdown or filter can be found instead of guessed at.
One click copies every metric, rating and offending selector as plain text — ready to paste into a ticket, a pull request or a client email.
Confirm LCP, CLS and INP are in the green on a new template before it goes live, rather than finding out from Search Console a month later.
Search Console tells you a group of URLs fails CLS; open one of them with this tool and see exactly which element does the shifting.
Scroll the page and watch CLS climb, then press Show to outline the late-loading ad, banner or web font that is moving your content.
Click through filters, menus and modals, then read the slowest-interaction list to find which control is costing hundreds of milliseconds.
Record the numbers, deploy the fix, then measure the same page again and compare the two reports side by side.
Click the Core Web Vitals icon in the DevSuite Pro dock. Metric tiles appear straight away using whatever the page has already recorded.
LCP is only meaningful from the start of a page load, so reload with the panel open when you want a reading you can trust.
Scroll through the whole page to exercise CLS, and click, tap and type to generate INP measurements. The tiles update as you go.
Press Show next to the LCP element, a layout-shift source or a slow interaction. The page scrolls to it and outlines it so there is no ambiguity about which element is responsible.
Click Copy report for a plain-text summary of every metric, rating and selector. Press Reset to start CLS and INP again from scratch.
Install DevSuite Pro for free and unlock 71+ developer tools for your browser.
