Webvitals are an initiative by Google to give a unified guideline for measuring the quality of user experience on the web. They aim to simplify how performance and other metrics are measured and enable everyone to measure what's most important. A core aspect of them is that they are not only measurable in a lab environment but also in the field with real users.
Google now uses these in all their tools to rank web applications. So we should have a good understand of what they are and how to improve them. Important to note is that the list of Core Web Vitals will evolve over time. Right now there are three Core Web Vitals.
LCP (Largest Contentful Paint)
Target value: <= 2.5s
Measures the perceived load speed of a web page by measuring the time it takes to render the largest image or text block in the viewport.
Visit https://web.dev/lcp/ for more detailed information about the LCP.
FID (First Input Delay)
Target value: <= 100ms
Visit https://web.dev/fid/ for more detailed information about the FID.
CLS (Cumulative Layout Shift)
Target value: <= 0.1
Measures how much elements in a layout move without any user interaction, e.g. on initial page load. A move is only registered if the element was in the DOM before, i.e. it had a start position. Elements added newly to the DOM themselves don't count towards the CLS score but if they cause surrounding elements to move these will.
Visit https://web.dev/cls/ for more detailed information about the CLS and how it is calculated.
Note: Chrome Devtools and Lighthouse both can't measure FID because they are Lab tools. Measure TBT (Total Blocking Time) with them instead.
Inspecting Web Vitals on our own Website results in seemingly pretty good numbers.
However, they have pretty much no meaning, at lest for the FID value, since it is was just one user clicking as fast as he could on a button. The CLS score should not change for other users since everybody will get the same page. LCP on the other hand can increase a lot when using mobile connections for example.
In order to get convincing numbers for the Core Web Vitals according to Google you would have to measure them for all your visitors and calculate the 75th percentile segmented across mobile and desktop devices. To be able to do that the web-vitals npm package brings features for sending the recorded data to your monitoring services such as Grafana.
Once you found areas for improvements on your website you have to optimize them. Luckily Google provides us with detailed optimization techniques for each web vital:
They also offer an interesting list of common UX pitfalls and how to easily mitigate them.
Other Web Vitals
We have mentioned the three Core Web Vitals but there are plenty of other vital metrics to account for. These, however, all pay into one the Core Web Vitals in one way or the other. TTFB (Time To First Byte) and FCP (First Contentful Paint) for example both affect the loading experience and thus the LCP metric. FID on the other hand is dependent on TBT (Total Blocking Time) and TTI (Time To Interactive).
Here are a few additional resources that you might find useful: