Core Web Vitals - What to Consider for 2022

Google is continuously trying to democratise the organic space of the SERPs, which is why the powerful search provider continues to develop and provide a number of tools to measure and report on site performance. One of the most recent tools to be launched aims to help site owners understand the core performance of the site to measure the experience users are receiving - Google has called these Core Web Vitals.

Essentially, Google introduced Core Web Vitals metrics into their algorithm in order to negatively impact pages that provide a poor user experience, particularly on mobile devices. But what exactly are Core Web Vitals? Why does it matter to website owners?  How do website owners test their own website? What can they do with the results? And what is set to change in 2022?

Google is planning a February to March 2022 rollout whereby Desktop will be included largely within CWV measurement. Until now Core Web Vitals reports have largely been leveraged for mobile sites as this is where the majority of traffic to websites tends to come from. People on their mobiles are on-the-go and looking for quick answers and information therefore the importance of page speed etc is essential on mobiles. Those on their desktop computer tend to have a little more time and patience. 

Google will release new tools aimed at desktop usability before the February CWV update. Expect to see updates to Google Search console with data for desktops as well as a lot of noise on what this may mean for users.

What are Core Web Vitals?

Google’s main priority is to “provide users with the most useful, accurate and accessible results for their searches.”

Forever updating, evolving and developing their algorithm, Google continually improves the results that appear on SERPs (search engine results pages) throughout each year. It shouldn’t come as a surprise that every update that is released to the world of search is catered towards the everyday user, their online experiences and solving their issues in the fastest way possible. 

So, what does Core Web Vitals (CWV for short) have to do with the users that create the searches? To put it as simply as possible, there are a set of specific factors that Google considers highly important in a webpage’s user experience, which together create an experience score. Three main metrics are used to assess the overall user experience of your website. These metrics are:

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

Scoring well in each of these important areas could help your websites’ SERPs visibility as well as the overall user experience of the website (UX performance).  Finding ways for users to have the best experience possible online is the most important consideration to Google when choosing which pages to rank in the SERPs.

Why does Core Web Vitals matter?

Why has Core Web Vitals suddenly become such a core measurement and is it considered a ranking factor? 

Google has been slowly evolving from desktop indexing to mobile index first to mobile index over recent years. This is simply because an increasing number of users now access the search via their mobile phones since we are now a world that is constantly on the go; our mobiles are the ideal device for conducting searches whilst commuting, exploring a new city and looking for the best places to visit, getting in touch with businesses, or simply for answering a burning question - it is all designed for the ultimate convenience and the best user experience.

Since gradually moving over to mobile-only, Google uncovered several issues that need to be improved by website owners to still be visible in the search. One of the main issues identified for mobile is page speed which can be affected by many aspects of a website build from large file sizes carried by image or video assets to common code scripts blocking the time it takes for a user to see the page's content they’ve requested.

Google has once again taken matters into their own hands by introducing the importance of Core Web Vitals, enabling everyone within the search industry to understand, measure and optimise their user experience and page speed. 

Receiving good results for Core Web Vitals tests comes with a myriad of benefits - from lightning-fast access to a site's content to being able to navigate a website faster and more efficiently, resulting in happy users and return visits. An article published to Search Engine Land, recently discusses a report that revealed nearly 70% of consumers say a website’s loading time affects their willingness to buy and Google’s own research states that 53% of visits are abandoned if a site takes longer than 3 seconds to load. 

What does this mean for your website? Will visibility be severely affected if you don’t have perfect scores on all of your pages? In short, no. Google has made CWV part of its ranking algorithm and therefore CWVs have become search signals however the impact on results goes way beyond improving traffic and SERP visibility. CWV improves conversion rates, brand interaction, customer experience and so much more. 

It is highly recommended to run regular Core Web Vital reports to highlight key areas of your website that need addressing and working on. This can create a to-do list for technical implementation in the following months. This process can take time but persistence and devotion to these areas, as well as many other important SEO aspects, can help to improve the visibility of your website, increase traffic and therefore increase conversions. In simple terms, if you focus on improving your website as soon as issues are noticed, it will prevent the risk of competitors jumping ahead of you in Google search.

Does this mean we have to stop everything we are doing and obsess over these metrics? The short answer is no, however it should be an integral part of any strategy with the aim to have the best scores possible. Even though it isn’t the most important factor, it is part of the overall journey to better visibility which as we said can, and is proven to positively impact your bottom line.

How do I test Core Web Vitals?

There are three considerations or metrics for the Core Web Vitals algorithm update, all of which test for different elements of a user’s experience of a web page.

#1 Largest Contentful Paint (LCP)

Largest Contentful Paint or LCP as it is often referred to for short refers to how long a page takes to load and be completely usable i.e content ready to read, images loaded and links clickable. If your website is loading a large number of high-resolution images (like a background for example) then it’s likely that the test will fail due to the time it takes to load. 

The target scores are as follows:

• Good: Under 2.5 Seconds
• Needs Improvement: Between 2.5 and 4 Seconds
• Poor: More than 4 Seconds

TIP: To improve the LCP score, consider resizing or compressing images and media where possible.

#2 First Input Delay (FID)

First Input Delay, or FID,  is the time taken for the server to start loading the page. In other words, when a user clicks a link from the Google search, it will measure how long it takes for the browser to load the desired page. 

This is considered an important aspect for Google, as not only is it frustrating for users to not know if their ‘click’ has been registered or not, but also Google doesn’t want to be seen as presenting a list of relevant websites to the users search intent that then fails to load in good time thus creating a bad impression of Google and bad user experience combined.

• Good: Under 0.1 seconds for a response
• Needs improvement: Between 0.1 and 0.3 seconds for a response
• Poor: Over 0.3 seconds for a response

TIP: To improve the FID score try reviewing any script-based files that can block the process of a page loading like JavaScrip and either split the bundle into critical and non-critical code or defer/asynchronously load the code whilst the rest of the page is rendered.

#3 Cumulative Layout Shift (CLS)

The Cumulative Layout Shift or CLS for short refers to how much the page “moves around” during page load. If you are unsure what we mean here - think about a time that you have visited a website and have made the first click on a page link only to realise you’ve unintentionally clicked on a banner ad that has suddenly appeared. This creates a poor user experience as it is not the result the user intended on receiving. 

The CLS test aims to score this type of performance to highlight issues and prevent situations like this from occurring.

Common issues that affect this score could be things like loading in a cookie policy bar, a pop-up alert box such as for subscribing to a newsletter, earning a discount, or images being loaded without their sizes having been defined.

This test gives a score based on how “far” elements move during a page load, so it isn’t based on time like the other two tests:

• Good: A score of less than 0.1
• Needs Improvement: A score of between 0.1 and 0.25
• Poor: A score of over 0.25

TIP: To improve the CLS score try including the size attributes of your images and video elements taking the guesswork out of where to place them on a given web page..

How can you test for Core Web Vitals issues?

When it comes to testing your website to provide you with your CWV score there are several tools that can be used that will test individual pages for their performance. Here are a few of our favourites for the most reliable results:

• Google Pagespeed Insights measures your website against an average of others within the index (this is known as field data)
• Google Search Console
• GTMetrix
• Lighthouse (Lighthouse measures a single page, in real-time, and is otherwise your Lab data).

Each of these tools will provide you with scores for each of the three vital metrics of Core Web Vitals (LCP, FID, CLS) on each page that you submit. These super-intelligent tools will provide you with a detailed breakdown of how the page can be improved as a stepping stone to enhancing your website's performance.

It’s important to note that the language these tools often provide can be highly technical - so if the information provided is too advanced to understand, speak to the experts if you require assistance in fixing anything.

What about testing for Core Web Vitals issues in bulk?

Testing one URL at a time is not the most efficient method of fixing an entire website. Indeed, most issues are site-wide rather than page-specific. So, often fixing a single issue can resolve your Core Web Vitals scores across the whole site.

There are a few good ways to check for Core Web Vitals issues in bulk:

• Google Search Console - Within Google Search Console lies a ‘Core Web Vitals’ tab, which breaks down your scores, per page and per device. Here, you can see which pages are failing on Desktop and which are failing on Mobile. There may be a difference in issues across device types!
• Screaming Frog - A popular SEO crawler (that we love!) is Screaming Frog. This allows users to see what Google sees. By adding the Google Pagespeed Insights API into the software, Screaming Frog is able to crawl the entire website and utilise the API to report back on Core Web Vitals data page by page. If your site is larger than 500 pages you will have to become a premium user to get your full site crawled (or contact an agency to do this for you). This data can then be exported for closer analysis and as a reference point to work from.

How does page speed affect conversion rate?

The good news with fixing Core Web Vitals issues is that your users will be thanking you too, not just Google! Studies have shown that a high number of users will abandon the page if it takes longer than 3 seconds to load. And according to Search Engine Journal: 22% of consumers say they’ll close the tab, and 14% say they’ll visit a competitor’s site.

Therefore if we can prevent users from wanting to click back, close the window or move on to a competitor's page, then naturally it will increase traffic to a page, improve visibility on Google and increase the chances of making a conversion. 
The same study showed:

• 32% increase to bounce rate if a page slows down by 2 seconds.
• 90% increase to bounce rate if a page slows down by 4 seconds.

This shows that it doesn’t take much for people to get fed up and abandon their search.

Other studies have shown similar results. Walmart, for example, saw their conversion rate increase by 2% for every 1 second of improvement in page load time.

There is a silver lining to all this, research also shows that ‘when encountering a slow website, almost half of consumers say they’ll try to refresh a page at least once.’ Therefore as long as you continually improve your website, you can rest assured that a lot of users will try loading your web page again before closing it completely.

What are the common issues which negatively impact Core Web Vitals scores?

So, you know what the Core Web Vitals metrics are, why they’re important and how to test them…what next? You need to be aware of the various website issues which can have a negative impact on your Core Web Vitals scores. By strengthening your understanding of what issues your website may face and how you can fix them, you have a better chance of increasing your scores and improving your search rankings. With a varied mix of clients, at Reflect Digital we are in a position to see all types of websites and have witnessed many common issues:

Largest Contentful Paint (Page Load Time) Issues

Page load time is not only for appeasing Google’s Core Web Vitals algorithm but also to ensure your users can promptly move from page to page with ease. Most websites fall into the ‘needs Improvement’ category and require little attention to move into a ‘Good’ score. However, for those pages that meet the ‘Poor’ score bracket, the issues are normally simple to resolve:

• Optimise high res images (Images with large file sizes) 

Images that are print-quality are not desirable on web pages as they are often ‘heavy’ and easily impact page load. If your CMS doesn’t have restrictions on image file size, it can be common for a banner image (for example) to be a much larger file size than it ever needs to be. 

How to fix: With the multitude of free online tools at your disposal, optimising your images couldn’t be easier! You can compress images using tools such as TinyJPG.com before loading via CMS, it really is as easy as the push of a button. If you are using TinyJPG, simply upload your image, sit back to watch the magic happen, and download your newly compressed image in seconds.

• Too large images (Images with large size dimensions) 

Another common CMS issue is the duplicity of an image and how it’s used widely across a website. An example of this is uploading images with a width of 3000 pixels, which is then used to display a thumbnail image (which could be 10% of the size!). This, naturally, results in a longer page load time because the image is 10x the size it ought to be.

How to fix: The easiest way to fix images with large size dimensions is to resize the imagery. You can then use different formats depending on what type of image you need, for example headers, banners, thumbnails or background images.

The process for resizing an image differs depending on what software you’re using but the process is similar for all of them. Take Windows 10 for example:

• Step 1: Open your image in the Photos app, click the ‘...’ button in the right-hand corner and click ‘resize’.

• Step 2: Select ‘define custom dimensions’.

• Step 3: Input your ideal width and height, select the quality and click ‘save resized copy’. Now you have a resized photo and a happy Google!

Find out more about resizing images on MacOS and ChromeOS.

First Input Delay (Response Time) Issues

The response time from a user making a click to actually seeing a change on their screen can also be a big cause of frustration. Fixing it for Google’s algorithm is great, but consider the benefits for your users, too. In our testing, most websites won’t fail this test unless there is a lot of ‘code bloat’ like third-party scripts or javascript blocking the rendering and downloading of a page. Normally, common issues are:

• An excessive amount of third-party scripts being loaded

As a website grows, and more parties get involved with wanting to track every element of a page, so increases the number of tracking scripts being loaded on the page. Each javascript file or third-party script on the page can result in a delay before the browser can start loading the physical content on the page.

How to fix: Audit your third-party scripts and remove unnecessary/unused ones, or defer unused scripts where possible until after all the important elements of the page have loaded.

Cumulative Layout Shift (Visual Stability) Issues

During a page load, it’s now part of Google’s Core Web Vitals algorithm to check for the amount of ‘layout shift’ during page load. This means if your page moves around during page load, making it difficult for a user to click on anything until it’s settled down, then you are likely in a position to be failing this test. Common issues include:

• Poorly setup Cookie Policy Banners

Cookie policy banners are everywhere nowadays but they need to be pre-loaded just like any other critical element on the page. Often, however, they are injected via a plugin that adds a cookie policy banner for you, delaying the load of the rest of the page. 

How to fix: You can use Preload enhancements to ensure the cookie policy banner is ‘pre loaded’ during the rendering process. Preloading communicates to your browser that the resource, in this case, the Cookie Policy, is particularly important and needs to be loaded quicker than it would usually be discovered by the browser. Find out more about how to preload critical assets or speak to a developer to help add this for you.

• “10% Off” / “Subscribe To Our Newsletter” Pop Up Alert Boxes

Much in the same way as a cookie policy banner, these types of alert boxes provide the user with a discount for signing up to a newsletter or for their first purchase might well be a good offering for the customer. However for Google, if set up incorrectly it can land you in hot water with your CLS score. 

How to fix: As above, use preload enhancements to ensure the pop up is ‘pre loaded’ during the rendering process, or speak to a developer to help add this for you.

• Images with No Size Dimensions

Often, image files are presented on a page as-is, however, this results in them being loaded without the browser knowing how big the images will be - until it loads! This can result in a lot of layout shifts during page load and until all of the elements can be displayed in the intended order on a page. 

How to fix: All you need to do is tell the browser what it needs to know! You can do this by adding size attributes to the HTML of the most important images.

Adding width and height will inform the browser what size the image needs to load at, therefore helping it load faster. By adding in size attributes, your code should look similar to the following:

In your new HTML code, the numbers next to width and height represent the pixels. Find out more about adding attributes to images in HTML.

The future for Core Web Vitals

Core Web Vitals measurements are here to stay and an important aspect to Google’s considerations when ranking pages in the SERPS. As website owners, we must educate ourselves in a way that will help us prepare for issues related to user experience. 

It is rumoured that in February/ March 2022 there will be a new update to the Core Web Vitals algorithm that we need to be prepared for. There are several ways you can do this to ensure we are ready for the movement however big or small that may be. You can;

• Regularly read articles that can easily be found on the internet - a good place to start is Search Engine Land for immediate information on updates ( we will also alert you of updates via our blog and social channels too!)
• Sign up to Google alerts for mentions of Core Web Vitals, you can also set this to daily alerts to ensure you are really up to date! 
• Watch YouTube videos for step by step visual guides of what you can do or how results should/ shouldn’t look
• Seek the help of a digital marketing agency that can either teach you how to conduct these audits yourself or conduct them for you regularly to reduce the risk of being penalised.

We anticipate that the algorithm will continuously evolve to provide the ultimate user experience for visitors to your website. Changes may not be drastic but like with all Google updates, it is important to respect the algorithm rules and abide by them to achieve the best results within the search engine - which is the main goal for all businesses.

To Conclude….

Many months after the launch of the Core Web Vitals, we now know that it doesn’t have the impact we were originally warned about by Google. However, it is still a critical part of your strategy which will impact your return on investment if worked on regularly to improve user experience.  Happy users lead not only to conversions but repeat visits and enhanced ranking positions earning new ongoing business. 

So ensure your Core Web Vitals scores are being improved and monitored, yet don’t forget your E-A-T strategies and improving overall user experience, with main focus on mobile and without forgetting we do this all for the humans that are behind the screens. And if you need further support on how to set up the right SEO strategy, Reflect Digital can ensure you get to where you need to be!