By Craig Hyde and Garrett Vatcher
Web Vitals is a landmark announcement from Google that enables you to peak into their top secret ranking algorithm to see how they measure your site for one of their key website quality indicators: User Experience.
With Web Vitals, Google is specifying a set of 3 performance metrics to make up their “Core Web Vitals” that they use to make a judgement on whether or not your website has a good user experience. Google is also specifying a few leading indicator metrics in the Web Vitals specification that are not classified as “core.”
Google has been promoting the importance of website speed since their inception, so no surprise here. However, this is the first time they explicitly identify the specific performance metrics that are used to drive their search rankings.
This is a huge deal because before now, you had to sift through their mounds of (sometimes contradictory) information on the topic, take your best guess on needs to improve, and tinker with things in hopes of making the secret Google algorithm happy. While making a commercial website fast can still be challenging, at least now you have some guidelines on where to start.
The Core Web Vitals focus on three simple UX characteristics of a page:
The math behind the metrics can get tricky, but an understanding of what they’re trying to accomplish may help simplify things.
The Core Web Vitals metrics are as follows:
These Core Web Vitals are outcome metrics and a combination of other metrics may be used to act as leading indicators to predict user experience given a change.
Image: From Google
Largest Contentful Paint (LCP) measures page loading times as perceived by users. The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.
The purpose of LCP is to measure how long it takes the main content of the page to be displayed in the user’s browser, focusing on the user’s perceived experience instead of a long list of metrics that measure various steps of the load process.
Image: From Google
First Input Delay (FID) measures page responsiveness to user input. FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
This is important as even very small delays can be very frustrating to users.
Note, for testing purposes (without users) Total Blocking Time (TBT) is used as an alternative to measuring FID.
Image: From Google
Cumulative Layout Shift (CLS) measures page stability. CLS is based on a formula that tallies up how many times the components on the page move or “shift” around while the page is loading. Fewer shifts are better.
We have all had frustrating experiences with sites that jump around on you while the page is loading. Although the page may be ready for interaction, if elements are moving around on users, that will drive a poor user experience.
While the techniques of improving your site’s Web Vital metrics may be technically complex, the process is relatively simple. Here are some high level guidelines of how you can take action to make an impact on the Core Web Vitals measurements of your site. It’s worth noting that the Splunk Synthetic Monitoring platform has the ability to automatically find and recommend changes that improve website performance.
Tool support is still very limited as Web Vitals are so new, but Google has added Core Web Vitals support to a number of their tools so you view these metrics for testing. The Webpagetest community has added metric support in their tests as well. Commercial platforms like Splunk Synthetic Monitoring allow for more control and ability to drive UX best practices throughout an organization.
While a fantastic user experience indicators, keep in mind Google has created Web Vitals primarily focused on landing pages from Google. There exists a vast world of scenarios outside of that use case where measuring digital experience requires different approaches.
Some examples:
There will naturally be limitations with any metrics you choose, so think of Web Vitals a key part of a more holistic monitoring strategy.
Beyond Core Web Vitals, there are additional metrics that serve as “leading indicators” that can be very useful.
Overall, the Web Vitals announcement from Google is exciting and Google’s approach does a good job simplifying the nuanced topic that is User Experience. Web Vitals will change and adapt though. For instance, Google is currently on their 6th version of their Lighthouse Score (now driven by Web Vitals), and Google openly states that Web Vitals will change in the future. Read more on real user monitoring here.