Why Web Vitals Scores Are So Important and How to Monitor Them

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.

What are Web Vitals?

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 

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID) 
3. Cumulative Layout Shift (CLS)

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 (LCP)

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

Optimizing

Achieving a good LCP score can be accomplished by following the usual best practices:

• Ensure server response times are fast and located close to users
• Use a CDN to serve static content from edge servers
• Cache content that doesn’t change often
• Optimize CSS by minifying, inlining critical CSS and deferring the rest
• Limit client-side rendering with JavaScript where possible
• Where JavaScript is needed, optimize delivery by minifying, inlining critical JS and deferring the rest
• Compress images

First Input Delay (FID) 

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.

Optimizing

The biggest impact on FID is client-side JavaScript execution because a browser cannot respond to events if it’s busy processing code on the main thread. Some JavaScript on the front end cannot be avoided but there are a few techniques to ensure efficient delivery:

• Minify and compress JavaScript files
• Defer non-critical JavaScript with async or defer attributes
• Reduce overall execution time by making your code is as streamlined as possible
• Use code-splitting (serve JavaScript only when it is needed instead of one app.js file for the entire site)

Cumulative Layout Shift (CLS)

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. 

Optimizing

CLS is easy to optimize by following these tips:

• Limit dynamic content injection after page load
• If dynamic content injection is needed, set dimensions on the outer div
• Set dimensions (width and height) on images so the browser will reserve the space while the image loads
• Set dimensions on ads and embeds
• Avoid the use of Web fonts that replace the default font after loading 

Why Web Vitals Matter

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.’

Monitoring the Scores

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.

Conclusion

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.