Core Web Vitals: What You Need to Know and Do

In May 2021, Google will be introducing page experience as a new ranking factor. And while this has, for a long time, been important for user experience, it will now play an even bigger role.

Page experience will be measured using Core Web Vitals, and today we’re going to take a look at what these are, how they measure your site, and what you can do to prepare for the update.

What are Core Web Vitals?

Core Web Vitals are designed to measure how a user actually experiences a page. By identifying positive page experience signals via these metrics, Google will be able to adjust rankings appropriately. That means that, the better you score with Core Web Vitals, the more chance you have of ranking well.

Of course, it’s still important to continue providing good quality content for your users. Core Web Vitals are an additional asset to Search Engine Optimisation (SEO), not a replacement to everything you’ve done up until now.

To begin with, there will be three Core Web Vitals. However, it is expected in the future that these will change and increase in number, so it’s important to keep on top of any updates. I’ll be reporting on any future changes, so you can sign up to my newsletter to get news straight to your inbox.

The first Core Web Vitals coming into effect in May are:

Much of the work you need to do to improve your Core Web Vitals is technical, so it’s important to work closely with your web developer on this so that they can understand the requirements and make appropriate improvements and adjustments to your site.

Measuring and Auditing Core Web Vitals

Core Web Vitals in Google Search Console

There are a number of tools available for auditing your core web vitals, but the best place to start is with Google’s own tools, mainly Google Search Console and PageSpeed Insights.

Google Search Console

In Google Search Console, Core Web Vitals can be found in the Enhancement section of the menu.

The first thing to note is that Core Web Vitals can be vastly different for Mobile and Desktop sites, so it’s important to audit both, while giving mobile priority.

The report will break your pages down into three sections: Good, Need Improvement, and Poor. The report also gives you a handy breakdown of where the issues occur (i.e. which pages), and what’s causing the problem.

PageSpeed Insights

PageSpeed Insights will give you data that’s particularly relevant to the Largest Contentful Paint and First Input Delay metrics. Run your site through the tool and you’ll be presented with a list of possible improvements as well as details on potential load speed time savings.

Now we’ve looked at how to measure them, let’s take a look at each of the three Core Web Vitals in more detail, what exactly they are, and how you can improve in each area.

Largest Contentful Paint (LCP)

LCP measures the amount of time it takes for the largest element of a page to load. This can be an image, a block of text, or a video, and depends on how much of the viewport (the bit you see on your screen) it takes up. It has been introduced to identify when a page appears visually loaded for the user.

This metric is dynamic, which means that one element (such as a text header) may be the LCP first, and then another element loads (such as an image) and that becomes the LCP. The below image from Google explains this visually.

Largest Contentful Paint from Google

How To Improve LCP Score

LCP is ‘good’ when it occurs within 2.5 seconds of when the page first starts loading. Anything between that and 4 seconds needs improvement, and over 4 seconds is poor.

The following are common issues that will affect your LCP Score, and some ways you can make improvements

Slow server response time

  • Tell the browser what to prioritise loading first with preloaded key requests
  • Cache assets to prevent having to fully load them each time a page is opened
  • Optimise your server and/or upgrade your hosting provider

Render-blocking Javascript and CSS

  • Remove unnecessary Javascript and CSS
  • Delay non-essential elements

Slow-loading resources

Client-side rendering issues

  • Minimise the amount of rendering required by the user’s own device
  • Use pre-rendering
  • Reduce critical Javascript

First Input Delay (FID)

First Input Delay is how long it takes your page to respond when a user takes an action. For example, when a website visitor taps a button, does something happen immediately, or is there a lag?

FID can’t be measured if users aren’t reacting with your website and Google can’t predict the data. As a result, you may see drastic changes when measuring this particular Core Web Vital.

How To Improve FID Score

FID is ‘good’ when response is within 100 milliseconds of an action being taken. Anything between that and 300ms needs improvement, and longer is poor.

Some common issues you will find with FID – and how to improve them – are:

Heavy Javascript
Javascript is often important for the interactivity of your site, so it’s usually not possible to get rid of it completely. However, it always slows down page load, so you should find a balance between improving your FID score (and other Core Web Vitals) and ensuring your website does what it needs to do.

  • Improve your Javascript as far as possible while still ensuring your site is fit for purpose.
  • Break up long-running code into smaller tasks.

Third-party code

  • Limit third-party code as far as possible. Find a balance between what you want from your site and what is beneficial to your user.
  • Defer loading of non-essential scripts.

Data-fetching

  • Implement performance budgeting

Cumulative Layout Shift (CLS)

Cumulative Layout Shift is how much the layout of a page adjusts while it loads. Imagine, for example, that a user goes to tap a button and, because a new element has suddenly loaded, the button is now in a different location. It can be very frustrating when this happens.

This metric measures unexpected shifts only. That means, if you have content that is shown once a user takes an action (for example, they click ‘Read more’), this will not count towards your score.

Unlike the others, CLS isn’t a timed metric but is instead scored based on how much the content shifts during load.

How To Improve CLS Score

CLS is ‘good’ when the score is below 0.1. A score between 0.1 and 0.25 needs improvement, and higher than 0.25 is poor.

Here are some common issues and how to improve on them:

Ads, embeds and iframes

  • Create reserved space for these elements so they load within those confines

Undefined image sizes

  • Specify the width and height of all images so that the browser doesn’t have to work out what size it should be while loading.

Dynamically injected content

  • This is content such as ‘sign up to our newsletter’ banners and GDPR notices that pop up before a page is loaded and shift the content about. Avoid inserting these before page load unless they appear as the result of a user interaction.

Web fonts

When downloading web fonts, your page can, during load, show either unformatted text or ‘invisible’ text until the right text is rendered.

  • Use font-display to adjust the rendering behaviour
  • Utilise the Font Loading API to reduce the amount of time needed to download the required fonts.

Conclusion

In May 2021, page experience will be another ranking factor and Core Web Vitals provide ways to measure how your site is performing. This is relevant to all website owners and will need quite a lot of technical work, so make sure your web developer is aware of requirements. Do the work now to be in the best position when the changes come into effect.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email