Web Vitals
User experience is key to success for any site online. Historically, however, UX has always been measured subjectively. In order to better quantify the experience of using a website, Google introduced Web Vitals, an initiative to give unified guidance for quality signals specific to user experience.
Let's go over what each of these metrics means and help you understand how performance is measured.
In This Guide:
What Are Core Web Vitals?
Think of these like vital signs at a doctor’s visit.
These are measurements to quickly check the pulse of a user’s experience, and quantify how healthy a site’s performance may be.
The Core Web Vitals are the subset of Web Vitals that matter the most and also the measurements that apply to every page on the internet.
Each Core Web Vital refers to a distinct component of a page’s user experience. While these will evolve over time, Google announced three Core Web Vitals they will be rolling out as a ranking factor in May 2021. These three vitals refer to loading, interactivity, and visual stability.
It’s likely that this ranking factor will be similar to others that Google has rolled out around site security, intrusive interstitials, and mobile-friendliness. Google will still try and serve the best search result for the user’s query. Pages that tend to pass the Core Web Vitals thresholds may see a slight increase in rankings as Google aims to serve a good user experience as well.
Core Web Vitals Report
You can evaluate your site’s performance and get a page-by-page breakdown of issues using the core web vitals report in Google Search Console. This report shows you how your page performs based on real world usage data or field data.
The Core Web Vitals report will show you three metrics:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shifts (CLS)
Image Courtesy: Google Support
Let’s learn more about what these metrics mean and how they affect user experience.
Loading: Largest Contentful Paint (LCP)
The core web vital measuring how loading impacts a user’s experience is called Largest Contentful Paint (LCP). Largest Contentful Paint is essentially the largest element that gets painted onto the browser, marking the point in the page load time when the main content has likely shown up for the user.
The LCP of a page should occur within 2.5s.
Interactivity: First Input Delay (FID)
The core web vital sign for interactivity is called First Input Delay (FID). Input Delay measures responsiveness. Rather than just measuring how quickly content loads onto a page, FID is designed to measure how quickly users can interact with that content.
Typically, input delay occurs if the browser’s main thread is busy processing something else, so it can’t yet respond to a user’s interaction.
What Causes FID Issues?
JavaScript is usually a big culprit here--if the browser is busy parsing a large JavaScript file or even loading style sheets in the background, there may be a delay in responding to the user’s interaction.
Consider the following timeline:
- Content is requested by the user
- The server responds and begins sending data (Time to First Byte)
- The browser begins painting the code onto the screen (First Contentful Paint)
- Other network requests run in the background
- The user clicks on an element
- The network requests finish and the content is finally interactive (Time to Interactive)
The delay between when the user first clicks or interacts with something and the page is finally interactive and able to respond is the FID.
FID should be less than 100ms.
Visual Stability: Cumulative Layout Shift (CLS)
The web vital designed to measure visual stability is Cumulative Layout Shift (CLS).
Visual stability is exactly what it sounds like: When content moves around on a page. Have you ever been reading an article only to have an ad or image load above what you’re reading, causing the content to move down on the screen? Even worse, ever go to click a link only to have something load and cause the link to move, meaning you’ve clicked the wrong thing?
CLS aims to provide a measurement for unexpected layout shifts so webmasters can keep an eye on how frequently users may encounter a poor user experience due to content shifting on the screen.
Measuring CLS can sound complicated, because it’s calculating how unstable elements appear between two different frames in loading the page, and the distance those elements have moved in relation to the size of the screen.
Multiplying those measurements produces the CLS score. A passing CLS score should be less than 0.1.
Measuring Core Web Vitals
To measure Core Web Vitals, it’s important to rely on a combination of both lab data (one-time tests) and field data (aggregate measurements of UX over time).
For lab data, Google provides core web vitals tools like Lighthouse and PageSpeed Insights. For field data, consider leaning on the Chrome team’s Chrome User Experience dashboard, which provides an aggregate measurement of a user’s experience over time.
Check Your Vital Signs
So now that you know what Core Web Vitals are, you may be wondering where to go from here. Back to our doctor’s office analogy: make sure to check your website’s vital signs regularly. Remember, improvements will come iteratively.
Use tools that help you measure Web Vitals over time to get a better understanding of how improvements to loading, interactivity, and visual stability are impacting your user experience overall.
Need help diagnosing or fixing website errors? Contact us and we can put you in touch with our Technical SEO team for help!
