Google’s New SEO Update: Their Most Important Yet?

The reason that Core Web Vitals are so important is that Google announced that they will be releasing an algorithm update focused on Core Web Vitals in May 2021. It’s almost unheard of for Google to publicly announce what they’re going to be focusing on in forthcoming updates. This tells us that the Core Web Vitals is due to have a huge organic impact.

Organic search is a huge channel for all online businesses, and dropping behind your rivals for valuable keywords will lead to huge potential revenue losses for businesses who do not assess, understand and address any issues.

Google is giving site owners, SEOers and web developers a window of opportunity to ensure web pages’ Core Web Vitals metrics are all up to scratch before the update rolls out. It is worth noting that Google is keen to reiterate that the content of the pages is still a lead ranking factor, but, hypothetically, speaking if two pages are essentially identical but one has better Core Web Vitals Google will rank it more favourably.

As a result, understanding Core Web Vitals, auditing your site accordingly, fixing any issue and staying ahead of the curve presents businesses with a great opportunity to gain an organic advantage over your competitors.

What are Core Web Vitals?

Core Web Vitals consist of three core metrics:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

If you’re not a SEOer or web developer the language google uses to define these metrics might seem a little confusing at first; what is a Cumulative Layout Shift (CLS)? Don’t worry once you break them down they’re actually pretty straight forward. To start things off we have broken down each of the metrics below to help make them a little clearer and easier to understand.

What is the Largest Contentful Paint (LCP) metric?

This is the name for the metric which measures the time it takes for the largest element of content to become visible as a web page loads.

Please note that LCP usually only measures the largest element of content that is visible above the fold.

What is the First Input Delay (FID) metric?

This is the metric used to measure the delay between the first instance a user interacts with the page and when the page is able to respond.

What is the Cumulative Layout Shift (CLS) metric?

This is a metric focused on the user experience of the site. Namely how often elements of the page change out of the blue. I’m sure we’ve all seen websites which during loading show one font and then switch to another once the page is fully rendered, this is an example of a page which will score poorly for the CLS metric.

How can you improve your Core Web Vitals?

One of the biggest potential banana skins surrounding Core Web Vitals, is that most of the work that needs to be done lurks behind the scenes and is unlikely to be seen by the end-user. Therefore, a lot of website owners will either be completely unaware of the metrics and their forthcoming importance, or they won’t prioritise them accordingly until after the algorithm update has been rolled out, meaning they’re essentially playing catch up from the beginning.

“Quality is doing right when no one is looking” – Henry Ford

Measurement

After you understand an issue the next step to fixing any problem is sizing it up so you can assign adequate time and resources to deal with it. Luckily, Google has a number of tools which make this super easy for us.

Google Search Console

First, there is a handy Core Web Vitals feature in Search Console to quickly and easily check how your website currently stands. Painting an overall picture of how many of your indexed URLs Google currently considers, poor, needing improvement or good versus the core web vitals metrics.

Google PageSpeed Insights Tool

The Google PageSpeed Insights tool is a great way to breakdown the individual core web vitals metrics for a particular web page. We would suggest approaching SEO by targeting opportunities with the biggest impact first. The PageSpeed Insights tool helps us to quickly identify the weakest metrics and the opportunities with the biggest impact.

The PageSpeed Insights Tool also breaks down the biggest opportunities to help the page load faster and, in many cases, improve the metrics, as well as diagnostics of the page’s biggest problems.

Google Lighthouse Test

The Google Lighthouse test is a great way of identifying issues associated with accessibility. The lighthouse test provides you with a score out of 100. Alongside the biggest opportunities for improvement, as you can see from the example below, the lighthouse test has identified the following accessibility issues with the page in question:

• [aria-hidden=”true”] elements contain focusable descendants
• Buttons do not have an accessible name
• Image elements do not have [alt] attributes
• Links do not have a discernible name
• Background and foreground colours do not have a sufficient contrast ratio.

Clicking on any of these opportunities within the tool expands the explanation of the issue and why it is important, the elements in question which are failing and a link to learn more.

Common Quick Fixes

We have outlined a common ‘quick fix’ to help to improve each of the Core Web Vital metrics below. However, it is worth noting that each website will have its own unique set of issues and considerations and there isn’t a boilerplate fix for all core web vitals. As a result, the solutions we have listed below are based on what we commonly see.

1. Retain space for resources to load – CLS

In order to prevent CLS, we recommend that adequate space is reserved for images, buttons and other elements, especially interactive elements, during the rendering of the page in order to prevent user frustration and improve their overall experience.

2. Ensure that the above the fold content’s key resources are pre-loaded – LCP

Through employing methods such as pre-loading on key elements it is possible to improve the time that it takes for the pages LCP element to load. Pre-loading essentially tells the browser to prioritise these elements first.

In order to pre-load elements, we advise utilising <link rel=”preload”> in order to turn links in preloaders for any element we want.

3. Minimise Long tasks – FID

Long tasks contribute to a page becoming unresponsive for the user. They are normally large chunks of code (Javascript) which slow the page down and block the main thread which in turn causes the page to freeze.

Unfortunately, there isn’t one set fix for minimising long tasks, however a good place to start is breaking up the code and serving it in smaller sections in order to spread the load.