Webvitals 101
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.
Core Web Vitals
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
Measures the time it takes the browser to respond to the first user input after rendering a website. Only clicks, taps and key strokes are considered interactions in this metric. Zooming and scrolling are considered as animations which can be offloaded to other threads. Since javascript is single threaded user input can only be handled when the main thread is idle. When it has to parse and evaluate big javascript files, however, user input will be delayed until the main thread is idle again. This delay can be measured but is highly dependent on the user behavior and the website, thus giving the measured values a meaning is not that easy.
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.
Tooling
All the above metrics can be measured using Javascript and Browser APIs but there are already great tools around which do all these complicated calculations for you.
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.
Optimization Techniques
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).
Useful Links
Here are a few additional resources that you might find useful:
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund