Web Vitals : Google’s Top Metrics for Website Performance

The way your customers experience your website determines the success of your business. If users can’t find your website, can’t load it, or can’t find accurate information on it, they’ll go to your competitors. Business owners and web designers have been tirelessly applying new search engine optimization tactics to their sites in hopes of attracting and retaining customers. Until now, there were no official guidelines on making an effective website.

Google recently unveiled Web Vitals: Essential Metrics for a Healthy Site. We now have clear guidelines and metrics straight from the source. Here’s everything you need to know about Web Vitals and how to improve your website’s performance.

What Are Web Vitals?

Before the release of Web Vitals, there were tools that designers used to create optimized websites for performance and user experience. The problem was that these tools weren’t user-friendly. The average business owner with no design experience had frequent difficulties optimizing their websites.

Google realized this problem and made Web Vitals with the average business owner in mind. They are intended to be simple, clear, and usable.

The main metrics included in this launch are the Core Web Vitals. Every business owner should put energy and effort into understanding these vitals and implementing them into their site. These metrics reflect the real user experience on your website.

First, there’s Largest Contentful Paint (LCP) which measures loading speed. It also measures when the largest visual content on the page is visible to users. According to Google, the best LCP occurs within 2.5 seconds of a user clicking your page in the Google results.

Second, there’s First Input Delay (FID). This measures interactivity. It tracks the user’s first impression of your site through responsiveness and interactivity. Your website should have an FID score of less than 100 milliseconds.

Third, there’s Cumulative Layout Shift (CLS) which measures stability. In other words, how stable the images, embeds, and other visual elements are on a site. Aim to have a CLS score of less than 0.1.

Google has published ample information on each of these vitals which you can see at their corresponding links. Each metric is measured on a scale divided by Good, Needs Improvement, and Poor.

Supplemental Vitals

Besides the Core Web Vitals to work on, business owners should be aware of supplemental vitals that Google also deems important. While they shouldn’t be your main focus, they are important elements of successful web performance.

Here are the additional Web Vitals and their corresponding Google links for information:

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Total Blocking Time (TBT)
• Time to Interactive (TTI)

When measuring LCP, it’s helpful to track TTFB and FCP. Both metrics track elements that relate to loading speeds. They can help you diagnose issues like lagging server response times and render-blocking resources.

You can diagnose interactivity issues by tracking TBT and TTI. However, Google has not included them in the Core Vitals because they are not measurable in the field.

Tools for Measuring Web Vitals

There are several tools that Google recommends for tracking your website’s Core Web Vitals and Supplemental Web Vitals.

The first tool is found on the same page as Google’s Workbox, Puppeteer, Lighthouse, and Chrome DevTools. It’s called Chrome User Experience Report and it collects user data on the various Web Vitals. Once you sync your browser to the tool, it automatically gathers data on user experience. It measures and produces data on all three Core Web Vitals.

The second tool for measuring vitals is in JavaScript and uses standard APIs. You can measure each vital by calling any single function. However, this method is only useful for business owners that can code.

If you wish to track these metrics in a lab environment, Google suggests using Lighthouse or Chrome DevTools. These tools are excellent for assessing how effective a website feature will be before launching it to your users. However, lab measurements are not meant to replace field measurements.

How to Improve Your Scores

If you want your website to provide the best user experience and performance possible, tracking your scores is key. You must monitor your Core Web Vitals so you know which ones to channel your efforts into improving.

When it comes to Largest Contentful Paint (LCP), several issues could be holding back your score. Each issue has its own solution. For example, the longer it takes for a server to send content to the browser, the longer it takes for large elements to show up on the page. You can use TTFB to measure your response times and then optimize your time by routing users to a CDN nearby or by serving HTML pages cache-first.

Google provides an excellent resource for optimizing your LCP score here.

What if your First Input Delay (FID) score needs improving? The most common cause of a poor FID score is all-consuming JavaScript. The browser can’t respond to the user’s requests if it’s busy executing heavy JavaScript. So, the best way to clean up this problem is by reducing the execution time of your JavaScript, or by breaking up long tasks. You could also get a web worker like Workway or Workerize to reduce thread-blocking time.

Google published a detailed guide to optimizing FID and reducing script density here.

The final Core Web Vital you may wish to improve is the Cumulative Layout Shift (CLS). This issue is extremely frustrating for users as they attempt to click features on your website that suddenly relocate on the page. It can be caused by images, iframes, or embeds that don’t have dimensions as well as having web actions waiting for a network response. These issues can be simple to solve. Make sure you’re adding dimensions (width and height) to your images and embeds. You also want to ensure you’re leaving enough space for your embeds on the page.

Read Google’s suggestions for optimizing your CLS score here.

The Future of Web Vitals

The Web Vitals guidelines are new features that Google instated this year. As with any new launch, there are going to be changes and updates as more data from users is collected. You can expect to see updates on these new features that may require you to adjust your best practices. The best thing you can do as a web designer or business owner is to stay on top of any upcoming changes by checking the public changelogs published by Google. Here, you’ll find a directory of the various features included in Web Vitals as well as the most recent updates.