In 2021, Google made a big change to how it ranks websites in the search results. What they did was take a closer look at something called Core Web Vitals. They then refined and improved them further in 2022.

Although Core Web Vitals sounds like something from a Shortland Street episode, it’s a major change in how Google ranks your website. So, read on to learn exactly what they are so your website can rank higher in the Google search results in 2023!

Core Web Vitals make poorly coded, slow websites pay a heavy price in search results.

To help you get started, we have put together a guide that helps answer the burning questions:

1. What are Core Web Vitals?

2. What do Core Web Vitals mean for my Digital Marketing Strategy?

3. How do Core Web Vitals work?

4. How do I improve my Core Web Vitals score?

1. What are Core Web Vitals?

Core Web Vitals are made up of three metrics that analyse a visitors experience on your website. Loading time, page interactivity, and visual stability.

In other words, it looks at how fast your website loads, whether text and images dance all over the place and how quickly you can start using the website when it first appears on your screen.

Before we continue, we would recommend adding the Lighthouse Chrome Extension and generate a report by loading the extension in your Google Chrome web browser.

This report will give you a quick overview of how your website’s Core Web Vitals are looking, see below for an example of our website on a Desktop setting. You can switch it to score the Mobile experience too and it’s important that scores for both are as close to 100 and in the green as much as possible.

Alternatively, if your website is using Google Search Console you can see the results without the chrome extension. Look in the Enhancements section on the left-hand menu and you’ll find Core Web Vitals.

You can see the details it provides using the traffic light colours. Red of course means bad! The details section is really helpful and guides you straight to the issues, no guessing game here just identifying and fixing – if it’s all green, you are good to go.

2. What do Core Web Vitals mean for my Digital Marketing Strategy?

Google have identified that these three metrics are a vital part of a website experience. Simply put, Google does not want to send people to poorly coded, slow websites any more.

Their intention is clearly to improve the internet experience for everyone and they firmly believe that Core Web Vitals is the way to go. To be honest with you, we agree with them on this one.

Core Web Vitals became a key ranking factor in June of 2021. Since then, websites all around the world have taken a hit on their rankings.

Unless you want your website to fall way down on the search engine result pages (SERPs) – and stay there – you need to improve your Core Web Vitals. If you do, riches are to be made.

Netzwelt improved their Core Web Vitals and saw advertising revenues increase by 18% and page views by 27%. Likewise, when a website meets the Core Web Vitals thresholds, research showed that visitors were 24% less likely to abandon the page load. Results like these are game changers for most businesses.

Content generation is not King maker anymore

Given just how much Google are rewarding websites that achieve the Core Web Vital thresholds, our recommendation would be to focus less on heavy content-driven marketing strategies now.

Lots of unoriginal content that lack quality or context is bad for ranking anyway. But with the rise of Core Web Vitals, that approach is even more dated and likely to cost you in the long term.

Instead, focus on delivering a fast, smooth and responsive browsing experience with the content you already have.

A Core Web Vitals centric approach is much more likely to rank you ahead of your competitors who are still stuck in 2015.

This is not to say stop creating content, far from it, but if the content is being pumped out in huge volumes with the sole intention to influence ranking – it will all be for nothing without good scores on your Core Web Vitals.

3. How do Core Web Vitals work?

So what are the key metrics of Core Web Vitals? They include, the LCP, FID and CLS. We’ll explain exactly what these metrics are below:

Largest Contentful Paint (LCP)

The LCP metric looks at the overall loading time across your whole website. This means, the amount of time passed in seconds from the moment you land on the website until the largest image or section has loaded.

Naturally, this takes longer than your FID but you’ll want to get the overall loading time of your website down to 2.5 seconds or below.

After researching many websites over the years, we have come across some that take up to an extraordinary 30 seconds to fully load. In the age of ultra-fast fibre internet, that’s a lifetime and Google knows this too. Which is why they will start to make websites like that pay a heavy price by lowering their rank in search engine results pages (SERPs).

First Input Delay (FID)

Do you remember a recent experience when you landed on a website and no matter how many times you press a button nothing happened? It was frustrating, right? This is why Google has made this a key part of the Core Web Vitals.

First impressions count, and this is no different in the digital space. When you land on a website, you want to be able to take action almost immediately.

FID measures the time in milliseconds that it takes from clicking on a link on the website (Button, Menu etc) to being able to take action on the webpage. The lower the number, the better the experience it will be for your site visitors and Google will reward you for this.

Cumulative Layout Shift (CLS)

Don’t you just hate it when you’re reading an article on a web page and all of sudden, the text moves around? Or worse yet, when you’re banging your mouse furiously to close a pop up and you accidentally click it because it moved suddenly? Not a fun experience was it.

The CLS metric gives you an idea of how often, and how badly, this scenario is impacting the user experience. If text and/or images are suddenly dancing all around the page whilst someone is browsing it, then your Core Web Vitals score will be negatively impacted. The content which is doing this is considered an ‘unstable element’.

How much they move around the screen can be noted in percentages. i.e a popup moved down on my mobile phone screen by 25%. The CLS score however is calculated in fractions, granted this may seem complicated at first but it’s much easier to work out when you start in percentages and then just convert them into fractions. We’ll show you!

So how is the CLS Score calculated?

The CLS score is calculated from the impact and distance fractions of how much an unstable element has shifted on your screen (or viewport).

So, using an example, an unstable element moves 75% of the total viewport, so its impact fraction is 0.75. As the unstable element has moved by 25% of the viewport height, this results in a distance fraction of 0.25. So the layout shift score would be 0.75 * 0.25 = 0.1875.

From this example, the score would mean the webpage falls within the ‘needs improvement’ grade.

4. How do I improve my Core Web Vitals score?

Now that you have a better understanding of what Core Web Vitals actually are, why they should matter to you and hopefully had a look at your website’s overall score. You’ll want to know what you can do to improve them.

You are now at the stage when you’ll want to start discussing these things with your website developer. The solutions to many of these issues are quite technical, sure some are a quick fix but others might take time depending on the platform you use.

However, to make sure you’re prepared with the right information, we have covered a few things below which you can share with them to get started. If you don’t have a website developer on speed dial, remember that we would be happy to help so reach out to us for your FREE consultation.

How to stop things dancing around your webpages

There is nothing more frustrating than text dancing around a webpage whilst you’re trying to read it. To help you address this here are a few things your web developer should consider:

Add the exact height and width for all the images used on the website to the code. This will ensure the web browser knows exactly how much space is available to load the image and will prevent it from continuously determining it each time the page loads.

Use containers, these are basically designated boxes for Ads on your webpages to load in. We have seen so many times, particularly on news websites, where an article gets pushed down after we started reading it to make room for the display ads. It’s a common mistake to overlook these, containers really help to improve the structure of a webpage so nothing loads where it shouldn’t and then gets moved around afterwards.

Why is website loading time important?

The number one reason visitors will leave your website is if it loads too slowly. Think about it, would you be willing to wait upwards of 30 seconds for a website to load these days?

We wouldn’t and from our experience, most people wouldn’t either.

The worst part though is the impact this will cause to your Brand’s reputation in the long-term if the status quo remains.

Nearly 60% of visitors will abandon a website if they experience more than 3 seconds of load time, and the majority will not return either. With a knock-on effect they may share this negative experience with others and deter them from engaging with your brand too.

This is why slow loading times, especially the initial loading phase when your site visitors are most likely just staring at a blank white page – is particularly damaging for a business. In other words, getting that initial loading time down is intimately tied to succeeding online.

Famously Jeff Bezos, the founder of Amazon, spent millions of dollars to get Amazon’s initial loading time to below 1 second because he knew it would cost Amazon billions of dollars more in lost revenue if he didn’t.

People just don’t have the time these days to wait so the chances they will jump ship to your competitors is higher than ever. Is it worth risking over something as simple as a few seconds? We don’t believe so and recommend doing everything you can to get that time down, just like Jeff did.

Make your website load faster

Reduce the time it takes for a visitor landing on your website to load all the images and text. So, here are a few things that either you or your web developer can achieve:

Images are more often than not the largest contributor to slow website loading times. You can resolve this in two ways.

First, by reducing their physical dimensions.

Images chosen for websites are rarely sized exactly to what is shown or needed, they are usually far too large and this is often caused by them being uploaded straight from a digital camera. As the megapixels have increased and cameras improved over the years, they now generate images with far more detail and clarity than you actually need.

No one needs a ‘6000 x 4000’ sized image on a website. At best, you’ll need a ‘1920 x 1080’ but often even smaller than that is perfectly fine. You can achieve all of this for free by using Image Resizer. Upload them, choose a smaller size, then download them – it’s as simple as that.

Resizing & Compressing images will improve your Core Web Vitals.

The second, is by compressing the images.

You can do this for free by using TinyPNG. Whether the image is a JPG or PNG they will compress it using a sophisticated algorithm that removes unnecessary code but retains the quality, in other words you can’t see any change to the image but the file size is now greatly reduced.

By resizing and compressing your images you can shrink images by up to 90% – that’s a big reduction which will reward you in a faster website loading time.

Next you need to consider implementing a Content Delivery Network or ‘CDN’. We have written an article about CDN’s already which we definitely recommend you read at this point. But just know, they work really well and will make your website load faster without even touching the code.

Time to get techie

Lastly, on to the more technical things. Ask your web developer to optimise your JavaScript execution, ideally either defer or delay any non-critical JavaScripts from loading first. It will greatly reduce the initial loading times.

Next we would recommend asking them to minify the CSS and HTML on the website. This removes any spaces from the files and shrinks the sizes down – it’s surprisingly effective.

Fortunately, it’s much easier to achieve all of these technical improvements if you’re on WordPress as a plugin named WPRocket can do it all for you whilst implementing sophisticated caching technology too which speeds things up even more. It’s a plugin that is definitely worth considering. But if you’re not using WordPress or just don’t want the hassle, we can help you either way so reach out to us.

Your next steps.

At VIEWFULE, we not only care about achieving top Google rankings for our clients but maintaining them too. Getting on Page 1 is tough, especially if you are in a highly competitive industry. So the last thing you want is to tumble down the rankings just because Google updated their algorithm one day.

Core Web Vitals are here to stay, they are undeniably in the interest of the customer experience as no one enjoys browsing on poorly coded, slow websites. So keep ahead of the game by winning at Core Web Vitals today, so you keep winning tomorrow. Remember to reach out for your FREE consultation and we can talk through implementing all of these improvements, and more, on your website.