Introduction

Vitality as a product focuses heavily on Web Vitals as a way to understand a user's experience on your website. In this post, we'll cover these measures and why you need to think about them.

What are Web Vitals?

Web Vitals is an initiative by Google that provides a set of guidelines and metrics to help web developers create websites that offer an excellent user experience. These guidelines focus on loading performance, interactivity, and visual stability, which are crucial elements in providing a seamless and enjoyable browsing experience for users.

What are the metrics?

There are a number of web vitals, divided into Core Web Vitals and other supplemental metrics. Core Web Vitals are the most critical metrics that every website should aim to optimize. As of now, they include the following:

• Largest Contentful Paint (LCP): This metric measures the loading performance of a page. It calculates the time it takes for the largest content element (e.g., image or text block) to become visible on the screen. A good LCP score is under 2.5 seconds.
• First Input Delay (FID): FID measures the interactivity of a page. It calculates the time between a user's first interaction with a page (e.g., clicking a button or link) and when the browser can respond to that interaction. A good FID score is less than 100 milliseconds.
• Cumulative Layout Shift (CLS): CLS measures the visual stability of a page. It calculates the total sum of unexpected layout shifts that occur while the page is loading. A good CLS score is less than 0.1.

Why should I care?

Put simply - because your users do. It's no fun to use a website that takes forever to load (LCP), or that's slow to respond to interactions (FID), or that jumps around the screen as you're trying to read it (CLS).

Google has also made it clear that they will be using these metrics to rank websites in search results.

How can I measure them?

There are a number of ways to measure these metrics. You can use the Chrome User Experience Report which leverages Google's, em, extensive data collection to provide a global view of how users are experiencing the web. You can also kick off a PageSpeed Insights test to get a report on how your site is performing.

Chrome DevTools also provides a number of tools to help you measure these metrics. You can use the Performance tab to get a breakdown of the metrics for a given page load. You can also use the Lighthouse tab to get a report on how your site is performing. This is always worth doing locally when trying to figure out if what you're working on is going to perform well.

A terrific product that runs lighthouse style tests on a regular basis is DebugBear. It will run tests on your site and provide you with a report on how it's performing. It also provides a number of other performance related features, such as a performance budget, and a performance score.

Unfortunately, measuring these metrics from a subset of powerful machines, or by running one off tests doesn't give a truly accurate measure. As an example, the Chrome User Experience Report is based on data from a very small subset of users who have opted into data collection.

That's why we've built Vitality. We run JS in the each user's browser and report these metrics to give an accurate view of how your users are experiencing your site. As an example, if you're building a site that's only accessible within your company's network then Vitality will show up issues like slow DNS queries. If you're migrating from a JS-heavy approach to a server-rendered approach (like Astro) then Vitality will show you the impact of that change - hopefully showing a slightly longer TTFB but a much faster rendering phase and better CLS score.

Conclusion

We're very excited by the recent focus on website performance. After a decade of focus on developer experience over user experience, the changing landscape of the web is forcing us to think about how we build websites. We're excited to be part of this change and to help you build websites that your users will love.

You can sign up for a free 30-day trial of Vitality here.