Google recently announced Web Vitals with a post on web.dev as metrics to quantify user experience (UX) of a web page and opportunities to improve. Anyone that has optimized a website to align with Google advice will know it can be difficult to get consistent direction on what to focus on. Web Vitals are an effort to remove this ambiguity with one set of best practices to follow. Website owners should optimize the scores and monitor them over time to ensure they remain above the advised thresholds.
Hundreds of factors can influence how a web page loads, such as page size, network speed, server location, compression, etc. It’s impossible to have good scores for every metric and choosing which items to focus on is a challenge because it’s not clear which metrics carry more weight.
Google has a variety of tools to help webmasters make these decisions such as PageSpeed Insights, Lighthouse, Chrome UX Report, Search Console, Chrome Dev Tools and WebPageTest. However, these have evolved differently over time and report things in different ways.
For example, PageSpeed Insights offers a performance score from 1-100 while Test My Site reports performance as loading time in seconds so these examinations cannot be compared.
Web Vitals are the solution to this problem – three metrics that matter the most for measuring UX
They are replicated across lots of Google tools and provide a unified view of a website’s UX and performance.
A key aspect of Web Vitals is that while they are just three metrics, they represent broader categories that relate to UX and performance. For example, LCP is the time it takes for the largest elements to be painted on the screen. If you achieve a good LCP score, then it’s safe to assume other performance indicators that precede the LCP event are optimized. This is the beauty of web vitals and we’ll discuss each one in more detail below.
Largest Contentful Paint is a performance measurement. It represents the moment the largest and most meaningful element is rendered on the screen and when the page is ready for the user to interact with. A good score is 2.5 seconds on mobile and desktop.
Image courtesy of web.dev
Achieving a good LCP score can be accomplished by following the usual best practices:
First Input Delay is a responsiveness measurement. It measures how long it takes for a page to respond after a user has interacted with it. Clicking on a page and getting a delay before a response is an extremely frustrating experience. FID quantifies this process and sets a threshold of less than 100ms as good.
Cumulative Layout Shift measures visual stability. This is a new metric that measures how much a page shifts or moves after loading. If you ever tried to click on something but the page moved just as your finger pressed the button, you will be familiar with how bad the UX is as it forces you to find the element and attempt the click a second time. Even worse is when you try to click but a page shift causes you to click on something else.
Image courtesy of web.dev
In the image above, imagine you had started reading the first line only for it to jump down the screen. This is Cumulative Layout Shift and Google recommends a CLS score of less than 0.1 to achieve good status.
CLS is easy to optimize by following these tips:
Vitals are an initiative from Google so when evaluating the UX of a site, it’s highly likely they use Vitals scores as a factor in their decision. If Google thinks your site performs well, they will look upon it favorably and this may lead to positive results in the search engine results pages (SERPs).
Vitals are important because they represent a broader range of metrics that influence UX on a site. To achieve good Web Vitals scores, many other key performance indicators need to have good grades so your website will be healthy overall if your Vitals are in the green zone.
If you are in any doubt about the importance Google now places on Web Vitals, just visit the Web Vitals homepage and you will see the phrase ‘Essential metrics for a healthy site.’
Understanding Vitals and optimizing the score is only half the battle. You need to ensure the scores remain good by checking them regularly. The easiest way is pasting a URL into PageSpeed Insights every so often or viewing the high-level data in search console. Both of these approaches place the onus on you so if you forget to check, the scores may be low for some time.
If you want automated and regular updates, PageSpeedPlus tracks PageSpeed and Web Vitals scores on an hourly basis. It logs these over time and sends alerts when they fall. It’s very easy to set up and helps to monitor your Vitals scores at a page level so you can see exactly how each page on your site is scoring.
However, stopping them from dropping in the first place rather than fixing after they go live will have a greater overall impact on your search presence. If you work in an organization, PageSpeed and Web Vitals scores should be treated as a cross-team effort. To put UX at the heart of all decisions you should make the reports visible to all stakeholders. This will help to align development, design, SEO and Marketing teams and reduce the likelihood of something going live that negatively impacts scores.
Web Vitals are a refreshing change in how UX is calculated by Google. It’s now much easier to get consistent advice across all of their tools and know what to change on a website to align with their recommendations. It is clear that Google places importance on Web Vitals so if you want to improve your search presence, you should focus on them. Hopefully, this guide will help you get started and set up monitoring to track the scores over time.