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.
What do I need to know about Web Vitals?
The Core Web Vitals focus on three simple UX characteristics of a page:
- Loading Times
- Interactivity (i.e. Page Responsiveness)
- Visual Page Stability
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:
- Largest Contentful Paint (LCP)
- First Input Delay (FID) / Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
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.
What is Largest Contentful Paint (LCP)?
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.
What is First Input Delay (FID)?
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.
What is Cumulative Layout Shift (CLS)?
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.
How Do I Improve My Web Vitals?
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.
- Let your users guide your efforts. Look at your analytics to identify your most important pages and start there. Initial landing pages and core user flows are often the place to start looking.
- Optimize for visual stability and interactivity. Delay every non-essential piece of JavaScript to execute after the page is stable for the user. A marketing tag here, a custom font there are often good ideas in a vacuum, but regardless of what the tag vendors promise you, each one adds a bit of overhead on your site. The browser has to download, process, and render each file one by one. People are often surprised at how much time it takes to process all of their extra JavaScript files. Spend some time examining your waterfall to learn more.
- Serve smaller content from closer to the user. Use a CDN, preferably one with image management features that serves optimized content for each device. Then continually check to make sure the CDN is being leveraged and configured appropriately.
- Test and monitor to avoid performance creep. Over time, development hacks and hard coded images tend to sneak around the CDN and hurt user experience. Marketing teams always find the next JavaScript tag to put on the site. The easiest way to fix a performance issue is to prevent it from happening in the first place by testing in pre-production environments.
- Get professional help. Performance optimization can be a daunting task. If you’re looking for more help, the team here at Splunk Synthetic Monitoring has been helping make websites faster since 2010 and are happy to be of assistance.
Tools that Support Web Vitals
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.
Limitations of Web Vitals
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:
- Multi-Step User Flows – User flows are often crucial to the success of a web app (e.g. checkout flows, logins, web app transactions, etc). If you have core flows like this, you’ll likely have to do some user flow monitoring to test the complete picture of user experience.
- Single Page Apps – Core Web Vitals metrics are inherently focused on single page loads. When you leverage SPA frameworks your users will interact with a single page instead of loading new ones. So you may need to create your own timings or leverage something like Business Transactions to understand user experience of these apps.
- Web Service APIs – Web services don’t typically render in pages, so benchmarking will be more focused on functional availability, TTFB, and asset download times. More information on that can be found in this guide for monitoring APIs for performance.
- Mobile apps and other thick clients – These will require completely different instrumentation to measure performance.
There will naturally be limitations with any metrics you choose, so think of Web Vitals a key part of a more holistic monitoring strategy.
Other Metrics Besides Web Vitals to Follow
Beyond Core Web Vitals, there are additional metrics that serve as “leading indicators” that can be very useful.
- Time to First Byte (TTFB) – Measures responsiveness of web servers. Driver of LCP.
- First Contentful Paint (FCP) – Helps identify if there are render blocking resources slowing down the page load. Driver of LCP.
- Time to Interactive (TTI) – Measures the time from when the page starts loading to when it is capable of reliably responding to user input quickly. Key driver of FID.
In Conclusion
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.
