Understanding Core Web Vitals

August 11, 2021

You’ve probably heard the term “core web vitals” and wondered what it really means. Worry not! In this article we’ll be going over the following questions:

  • What are Core Web Vitals?
  • What are the components of Core Web Vitals?
  • What can you do to improve these speed metrics?

What Are Core Web Vitals?

Core web vitals are a set of factors that Google looks at to determine how the overall user experience of the webpage is. These metrics may change and be more refined over time but current metrics measure visual load, visual stability, and interactivity.  

There are over 200 factors that Google looks at to determine your “page experience” score, but these core web vitals definitely play a role in how Google ranks different sites.

What are the components of the Core Web Vitals?

Largest Contentful Paint (LCP)

This measures loading performance and specifically refers to the single largest visible element that is loaded in the viewport. Typically, this element is an image but it could even be a few blocks of text. To ensure a good user experience, it is recommended that your LCP should appear within 2.5 seconds of when the page first begins to load.

First Input Delay (FID)

This measures interactivity and is recommended that pages should have an FID of 100 milliseconds or less. The FID is essentially the time it takes for a user to be able to actually interact with your webpage. Some examples of interactions range from choosing an option from a menu to even entering an email into a field. 

Cumulative Layout Shift (CLS)

Visual stability is measured by CLS and also contributes to a good user experience. If elements are constantly moving as the page loads then the page has too high of a CLS rating. The idea is that users shouldn’t have to re-learn where links are or click on something by accident.

What can be done to improve these speed metrics?

When attempting to lower the LCP on your pages, it may take some work to remove some of the larger images and clean up the code on your page. Some helpful tips include:

  • Using a better web hosting service
  • Setting up lazy loading to only load images when users scroll down
  • Removing unnecessary third-party scripts
  • Removing large elements

Since FID looks at not only how long it takes to load but also how long it takes for a user to do something on the page, its importance varies depending on the contents of the webpage. If your webpage was strictly content, like a blog post, then FID wouldn’t be too much of an issue. However, on sites like a login page, it’s important for users to be able to begin typing their credentials quickly. Some helpful tips to improve this include:

  • Minimizing JavaScript
  • Removing unnecessary third-party scripts
  • Using a browser cache

It’s noteworthy that CLS also applies to mobile devices. A few things that could help with minimizing CLS are:

  • Using set size attribute dimensions for different media types
  • Making sure ads have a reserved space on the site
  • Adding new UI elements below the fold to keep content in the same location

If all of this sounds a little bit complicated, we got you covered! We can help you out with a free audit and if you like our services, we can even help you implement these changes!