Core Web Vitals – a vital aspect of user experience in 2021?

If you’re a digital marketing manager then you work day in, day out to ensure that your websites are working well for your organisation, and you’re always looking for new ways to make them better. Ensuring that you rank well in Google is no doubt always high on your agenda. In May 2021, Google is going to be introducing a significant change to its ranking algorithm, and unusually they’ve told everyone what it is in advance. How nice of them!

The new ranking factors are grouped together under the not so catchy name of Core Web Vitals. Let’s take a look at what they are, why they matter, and what you can do about it.

Core Web Vitals are what Google believes are central, measurable pillars of good user experience. In broad terms, the three factors that they’ve defined are loading speed, time to interactivity and visual stability. These three Core Web Vitals sit alongside other web vitals, including mobile friendliness, safe browsing (aka lack of malware), HTTPS and no intrusive interstitials (aka pop-ups). The Core Web Vitals will become Google ranking factors in 2021, so it’s important to ensure that you’re getting good scores, not just because they help your search rankings, but because they will improve user experience for your visitors.

Let’s take a look at them.

Largest Contentful Paint (LCP) is a measure of how long it takes for your largest visible piece of content to load, such as an image, video or block of text. In practice, it’s the time from typing the URL, or clicking the link, to feeling like the page has loaded. This is the point at which the visitor is able to both see and interact with the page, even if there are other, less visible things going on in the background. Google has defined the following ranges to define what they consider good performance as follows:

• Good – 2.5 seconds or less
• Needs improvement – 2.6 to 4 seconds
• Poor – over 4 seconds

Getting a score of good on every page of your website, not just on the homepage, is going to be a challenge for many website owners, and there is no magic bullet. But there are some general good practices that can help you to get there.

• Keep image sizes to a minimum
• Implement lazy loading for images
• Minify all the things
• Ensure you have fast web hosting, with a low TTFB and good caching in place
• Reducing render-blocking JS and CSS. This could be by reducing their size (by compressing them) or by deferring assets or parts of assets later in the load process
• Serve media from a CDN

In a happy coincidence, in addition to improving performance, most of these points will help reduce your website carbon emissions too.

First Input Delay (FID) is yet another piece of Google jargon that basically asks something quite intuitive. When a visitor tries to interact with something, how long does it take for that element to respond?

Interactions include things like the ability to click links, open accordions and fill in forms. This is especially important for pages where the core purpose of the page involves interaction, such as contact pages and login pages.

When people interact with a page, they have an expectation that things will happen more or less instantly, and if there is even a small noticeable lag it can be frustrating. The most common reason for delay when interacting with elements on a web page is that the browser is too busy “thinking” about other things, in most cases processing JavaScript.

The acceptable times for interaction are much shorter than the Largest Contentful Paint, and Google’s ranges for good practice are as follows:

• Good – 100 milliseconds or less
• Needs improvement – 101 to 300 milliseconds
• Poor – over 300 milliseconds

Some of the things that can help reduce Time to Interactivity are;

• Minimising or defering JavaScript
• Removing unwanted third-party scripts, as above
• Using browser cache, including PWA technology, to help visitors load pages faster

So, with LCP and FID, that’s the performance side of Core Web Vitals taken care of. The final Core Web Vital looks at a very different aspect of user experience, but still in the loading process of a website.

Cumulative Layout Shift is a measure of how stable your page layout is as your web page loads. If things keep jumping around the page while waiting for things such as images and adverts to load, then it creates a confusing experience for the user. This is less intuitive to measure than speed, and although Google does provide ranges of what it considers good, needs improvement, or poor, the measurement is somewhat abstract so the best thing is to test your web pages and pay really close attention to any elements that move or change as the page loads.

A few top tips here are:

• Pay attention – Spend time observing how your webpage loads on different devices to find out which elements, if any, are causing your layouts to shift. In many cases this might be images and media
• Set sizes – You can use the set size attribute to tell the browser how big each image or video should be displayed, before it is actually loaded, so that the page layout is stable from the beginning. Often, dynamic elements like sliders are only styled once the JavaScript has loaded and applied a class or restructured the HTML, typically after your core CSS has already been applied. To avoid layout shifts, create styles in your CSS that ensure the component’s dimensions match what they will be once the JavaScript has fired.
• Fix ad slots – Define the size and position of advert blocks on the page so that the browser reserves the space, even while waiting for the ads to load. The same applies for iframes. Of course getting rid of ad blocks and embeds will also resolve this issue and likely improve the performance metrics too

There are several ways to test your Core Web Vital scores, but the two most effective are Page Speed Insights and Google Search Console.

Using Google’s page speed insights tool you can test any webpage to see various performance metrics, including Core Web Vitals, which are highlighted with a little blue flag.

The scores are colour-coded, green for good, red for poor, so that you can easily see how well you’re doing. Note that Google uses both lab data and real world data (aka field data), in the page speed insights reports, and these scores can be different. In practice, Google is using the field data to define performance, but you may find that if your website has relatively low traffic, that Google doesn’t have enough real world data to report. In such cases, it seems that you won’t get any search ranking benefit from improving your Core Web Vitals, but it will still improve user experience and conversion rates so you can use the lab data to help you improve.

Note that the field data uses real user data from the past 28 days, so if you make changes to your website and test again immediately, you might not see your scores improve in the test results, but that doesn’t mean they haven’t improved. To know for sure, you need to wait the full 28 days and then do another test.

There’s now a menu item inside Google Search Console called Core Web Vitals, where you can view a report on field data for your whole website. This is much more comprehensive, because you can identify which pages perform the worst and therefore need the most attention, rather than looking at one page at a time using Page Speed Insights. The downside is that the Google Search Console report is based purely on real-world data, and so if Google doesn’t have enough data then this report may be empty.

Google has said that Core Web Vitals will be a search ranking factor from 2021, but Google uses loads of different factors in its search algorithm so Core Web Vitals alone are not going to push you to the top or bottom of Google. However, in an increasingly competitive web, every little thing helps to get your content seen and unlike most of Google’s ranking factors that are somewhat mysterious, this one is really clear. Google has literally told us what we need to improve, and given us the tools to measure it, so we shouldn’t look this gift horse in the mouth. In addition, Core Web Vitals will also be used by Google to determine which pages get prioritised in it’s Top Stories, which previously only gave priority to articles using AMP technology.

And we should consider why Google has been so kind too. They understand that even if content is king, the user experience in which that content is delivered to people also matters. By telling us about these metrics, they are incentivising us to make the web better for real people.

Of course not every website is going to achieve perfect scores overnight, but every little improvement we make is going to be beneficial for real people, and that’s what really matters.

The introduction of Core Web Vitals to Google’s ranking algorithm in 2021 highlights their commitment to champion good user experience. Although it is difficult to quantify good user experience in a generic metric, the Core Web Vitals are a good attempt to highlight some things that are universally good practice. Fast performance and layouts that don’t shift unpredictably can only be a good thing for users, and so embracing these factors and prioritising them in 2021 will not only help you to ensure good search rankings, but make life better for your visitors too.

As a team passionate about user experience and web performance, we think that Core Web Vitals will be good for the web, even if the terminology itself is not very user friendly!

If you’d like any advice or help improving your Core Web Vitals, get in touch for a chat.