A Guide to the Google Core Web Vitals Update

It is officially May, which means that the Core Web Vitals update is upon us. Is your website ready for the ongoing Google algorithm update? Let’s break down Core Web Vitals and how you can prepare your website for this change.

What are Core Web Vitals? 

So what are Core Web Vitals? Core Web Vitals are a subset of metrics that measure the technical performance of your website. Google uses them as a proxy for your user experience or the usability of your domain. There are three metrics to take note of:

• Largest Contentful Paint:

   

  The first metric is Largest Contentful Paint (LCP), which helps measure the load speed of your website.

• First Input Delay:

   

  The second metric is First Input Delay (FID), which helps measure the interactivity of your website.

• Cumulative Layout Shift:

   

  The third metric is Cumulative Layout Shift (CLS), which measures the visual stability of your website.

All three of these metrics are essential to your web performance and your customer experience. Let’s take a look at how you can measure your Core Web Vitals and make progress on getting ready for this algorithm update.

Measure Your Core Web Vitals

Preparing for the Core Web Vitals update requires insight on how your website is performing and where it needs improvement. There are two tools you can use to help—GooglePage Speed Insights and Google Search Console. 

GOOGLE PAGESPEED INSIGHTS

Google PageSpeed Insights will give you a summary of these Core Web Vitals metrics for any specific web page that you put into the tool. 

To get started, visit PageSpeed Insights, plug in your URL, and click the Analyze button. We will use our Saltbox Solutions website as an example.

Once the tool has finished running, it will give you a Lighthouse score from 0-100 based on the performance of your website. If you scroll down to the Lab Data section, this tool details your site performance for Largest Contentful Paint and Cumulative Layout Shift.

GOOGLE SEARCH CONSOLE

The second tool helpful for measuring Core Web Vitals is Google Search Console. Google Search Console will help you flag any pages on your website that might be a problem for this update. 

To view these insights, sign in to your Google Search Console Account. In the left-hand column, click on the Core Web Vitals tab.

This display will report any pages on your website that have issues with Core Web Vitals metrics. Using Google Search Console’s tool is a quick and easy way to pinpoint where your development team could focus on improvements. 

Now that you have insight into your Core Web Vitals—let’s break down each metric and how to improve your site’s performance.

Largest Contentful Paint

The first metric is Largest Contentful Paint. This metric reports on the render time of the largest image or text block visible within the viewport. When optimizing for Largest Contentful Paint, we want to strive to have this occur within the first 2.5 seconds of the page starting to load. 

So how can we accomplish this when measuring Largest Contentful Paint? There are a few elements here to consider. Primarily, image elements or video elements can have a significant impact on this measurement. To optimize for Largest Contentful Paint, we strongly recommend that you consider optimizing and compressing your image or video assets. It also might help to use a content delivery network that can speed up the server response time—sending these images faster to your users. 

First Input Delay

The second metric, First Input Delay, measures the time from a user’s first interaction with the page (when they click a link, tap on a button, or use a custom javascript powered control) to when their browser can begin processing event handlers in response to that interaction. 

Usually, the best way to optimize for First Input Delay is to ensure all your javascript or CSS interactivity is loaded quickly in the browser’s main thread. This will help your web page respond properly to user interactions.

Vs:

Cumulative Layout Shift

The final metric, Cumulative Layout Shift, measures the sum of all individual layout shift scores for every unexpected shift that occurs during the entire lifespan of the page. In layman’s terms, we are measuring how much your elements jump around the page after the page has become visible to the user. 

When optimizing for Cumulative Layout Shift, we strive to have a score of less than 0.1.  Some ways to improve your Cumulative Layout Shift include:

• Always using size attributes on your images or video elements.

• Try animating transitions in a way that provides context and continuity from state to state.

• Avoid inserting content above existing content (except if it is in response to direct user interaction).

Getting Ready for the Core Web Vitals Update

The Core Web Vitals update is a relatively complex change to the way the website technology works and behaves. This overview is just a fraction of what you probably need to know to be prepared for this update. For more help, you can check out the tools mentioned here in addition to articles/announcements from Google. Finally, be sure to partner with a developer who can help you navigate the complexities of this change. And remember—always be optimizing.