5 Minutes To: Google’s Core Web Vitals

featured image

Last year, Google announced 3 new metrics for sizing up your website’s overall user experience (UX). You might be familiar with some of the Web Vitals that Google considers, such as mobile-friendliness, safe browsing, HTTPS, and having no intrusive interstitials (the advertisements that appear while a website or page is downloading). 

Why does Google care so much about your user experience? Well, Google’s always wanted to provide the best experience for their users, and for the online version of the Yellow Pages that means helping users to find the information they’re looking for in as few clicks as possible. Now, they can’t control the information that you have on your site, but these Core Web Vitals (as well as other factors) help Google present the best sites to the searcher. A bad page experience can prevent a user from being able to find the information they’re looking for.

These new metrics will be coming into play within the next few weeks and will act as official ranking factors, providing a holistic view of the quality of a user’s experience. Getting familiar with them should be a priority for any marketer. 

 

Largest Contentful Paint

The first of these metrics is Largest Contentful Paint (LCP), or how long it takes the largest content element on a page to load from the point of view of the users. In other words, it helps you understand how long it takes for your most important piece of content to render on screen.

Now, we shouldn’t confuse this with any other page speed measurements like TTFB (Time To First Byte) and First Contentful Paint, because these metrics don’t necessarily represent what it’s like for the user when they open up your page. LCP, on the other hand, measures what really matters from a user’s perspective: being able to see and interact with your page. 

We already know how important it is to have a fast website. Users won’t wait around while your site loads – they’ll go and find somewhere that they can get their answers quickly and easily. So, consider LCP as an extension of page speed that takes into account user experience. 

Ideally, you want every page to hit LCP in 2.5 seconds. If you find you’re struggling to hit this, there are a couple of things you can do:

  • Strip back any non-critical JavaScript, CSS, or third-party scripts. This means things like minifying your CSS (removing unnecessary characters), taking out any unused CSS, and only having the minimum required amount of JavaScript. 
  • Review any of your larger assets. Where possible, you want to optimise and compress any images, preload any important resources, and cache assets.
  • Set up “Lazy Loading”, so you only load images when someone scrolls down the page and actually needs to see them.

 

First Input Delay

Once your user can see your page elements, the next thing they’ll want to do is interact with your page. This is what First Input Delay (FID) covers: the time it takes for a user to be able to interact with your page, whether that’s choosing an option from a menu, clicking on a link in the navigation bar, or entering their login details.

FID is an interesting metric, as it won’t be crucial for every site. For pages that just contain content – blog posts, news articles, etc. – FID isn’t a big deal. There’s no need to interact with the page, you’re just scrolling. If your site is mostly content, don’t be worried if you’re seeing bad scores here. However, FID is more important for login pages, sign-in pages, or anywhere where you have to quickly click on something. 

When you’re looking at your score, you want it to be less than 100ms. You can reduce it by using a similar process to LCP, namely: minimising or deferring JavaScript (it’s almost impossible to interact with a page while it’s still loading up JavaScript), removing any non-critical, third-party scripts, and using a browser cache to help you load quicker.

 

Cumulative Layout Shift

Our final metric is Cumulative Layout Shift (CLS) which focuses on visual stability. 

You know that feeling when you’re reading an article or blog, and after a few seconds, a new asset is introduced and shifts everything around? It’s a pain! That’s why our last metric wants to encourage site owners to minimise this shift so that users don’t have to re-memorise the page layout while they’re already engaged. Most of the time, it’s just annoying, but sometimes it can cause real issues; say if it happens on a purchase page. 

The culprit can be one of many things: an image or video with unknown dimensions, a third-party ad, or a dynamically resizing widget. CLS tells you how often this is impacting real-time users. Ideally, then, you want this measurement to be below 0.1. If you’re struggling to get there, there are a couple of things you can do:

  • Add any additional UI elements that go beyond the core of what you absolutely need below the fold.
  • Ensure any ad elements have a space reserved to load into. This will prevent ads from shifting things out of the way as they load, as they already have a designated area to be.
  • Similarly, set any asset dimensions so that your page already knows where assets will need to go, and will leave space for them.

If you haven’t already, I highly recommend brushing up on the Google articles about the Core Web Vitals to make sure that you have everything you need to navigate these new metrics. You can even see your performance towards them in Google Search Console, so you can get an idea of your site’s benchmark.