The Essential Guide to Core Web Vitals

Core Web Vitals

Core Web Vitals are the latest set of user experience and page performance metrics from Google.

The CWV rollout is well underway, leaving SEOs and web developers alike scrambling to make necessary adjustments to their websites. If you want to rise in the rankings, decrease bounce rates and increase conversions, you’ll want to follow suit. Not sure where to start? Our guide to Core Web Vitals will help!

We’re going to walk you through everything you need to know about Core Web Vitals—what they are, how they’re measured and how you can optimise them!


Table of contents:


Guide to Core Web Vitals

What are Core Web Vitals?

Question mark in circle

Core Web Vitals are a set of factors that Google uses to measure the user experience of a webpage. Google’s implementation of them started in June 2021 and should be finished by the end of August.

There are three Core Web Vitals in total:

These Core Web Vitals have been added to Google’s pre-existing search signals for page experience, which includes:

  • Mobile friendly
  • Safe browsing
  • HTTPS
  • No intrusive interstitials

If you want to improve your user experience and rankings, it’s absolutely essential that you optimise your Core Web Vitals as soon as possible. We’ll get to that in a minute!

Why are Core Web Vitals so important?

Google hasn’t introduced Core Web Vitals just to make your life harder. Though it might seem like another set of hoops that you’ll have to jump through, these metrics can help you drastically improve your website and your business.

They can affect your search rankings

Searchmetrics’ Core Web Vitals study found that “websites that currently rank well in Google tend to have higher Core Web Vitals (and related Web Vitals) scores”, which they believe will continue to be the case in the future.

What this means is that optimising your Core Web Vitals might have a positive impact on your overall rankings, which could potentially lead to more website traffic and conversions.

They can help you improve user experience

As important as good content is to a website, it’s the user experience that can make or break it. If your website is slow to load, takes a while to interact with and/or suffers from layout disruptions, your potential buyers aren’t going to stick around for long. But don’t just take our word for it! Let’s check the stats:

  • If a page’s loading time increases from 1 second to 3 seconds, bounce rate increases by 32% (Google)
  • If a page’s loading time increases from 1 second to 6 seconds, bounce rate increases by 106% (Google)
  • 53% of mobile users will leave a webpage that takes more than 3 seconds to load (Akamai)
  • Almost 70% of consumers agree that page speed has an effect on their willingness to make a purchase (Unbounce)

Nowadays, no one has the time or the patience to wait for webpages to fully load. More importantly, no one has to wait anymore—people will always be able to find another website that has what they’re looking for, without the delay!

By ignoring your user experience, you’re all but encouraging any potential buyers that come your way to head to your direct competitors instead. If you work on optimising your Core Web Vitals, however, you can reduce the chances of this happening.


How do other websites measure up against Core Web Vitals?

Core Web Vitals performance

After looking at the statistics in the above section, you’d assume that websites would make user experience and page performance a top priority, right? Well, whether it’s due to a lack of interest or general ignorance on the matter, it seems that a large majority of websites aren’t offering people the experience they want.

Searchmetrics’ Core Web Vitals study crawled a whopping 2 million URLs in total and found that 96% of all desktop websites didn’t achieve a good score in all Core Web Vitals. That means only a minuscule 4% of these websites managed to get a good score! As for mobile sites, less than 10% of those crawled got a good score in all three Vitals.

What’s causing this poor performance?

Website builders

If you’re using a website builder like WordPress or Wix, you’ll notice how difficult it can be to customise your templates once they’re live. Any changes that you are able to make are likely to affect your website’s performance and cause further issues along the way. In essence, you end up adding to your problem, instead of fixing it.

Additionally, many of the templates offered by these website builders tend to be of the cookie cutter variety, which means that you’re often loading elements that aren’t actually necessary for your individual website.

Plugins

Who doesn’t love a good plugin? Well, as it turns out, your users. As handy as plugins are, they can have a detrimental effect on your website’s loading time. If you’re using a large number of them on your website, it will slow things down drastically. Some of the plugins you’re using might also end up adding extra code to your website that is either difficult to optimise, or isn’t entirely necessary.

Unused JavaScript

Searchmetrics found that websites can save almost one second by removing unused JavaScript from their websites. You’ll often find an excess of this from third-party code like Google Tag Manager, Facebook tracking and Google Analytics.

Unoptimised images

You’d struggle to find a website nowadays that doesn’t come with an abundance of images. Though these images add extra pizzazz to your website, they can have a negative effect on your website’s loading time if they’re high in quality and come with a large file size.

It’s time to get ahead of your competition

One of the key takeaways from Searchmetrics’ study is that the current performance of most websites falls far short of what Google is looking for when it comes to user experience and page performance. They note that this particular fact means that it’s unlikely that Google will penalise everyone when we’re all at the same level. Letting out a sigh of relief? That’s not the response we’re looking for!

Why should you settle for being anything less than the best? As exhausting as you might find this entire ordeal, it’s the perfect opportunity for you to jump ahead and outperform your competitors. Not only will optimising your Core Web Vitals help you improve your search rankings, it will also help you curtail bounce rates and boost conversions!

Again, don’t just take our word for it!

A study by Google, Deloitte and Fifty-Five analysed mobile site data from 37 travel, retail, luxury and lead generation brands in Europe and the United States. They found that even a tiny 0.1 second change in load time can have an impact on every step of the user journey, which leads to an increase in conversions. In fact, they saw an 8% increase in conversions for retail sites, and 10% for travel sites!


How to measure Core Web Vitals

Website metrics

The next step on your agenda is to determine what your website’s user experience and page performance is like by measuring your Core Web Vitals.

Fortunately, this is an extremely straightforward process, as long as you’re using the right tools…

Google Search Console

If you head to Google Search Console and look under the tab ‘Experience’, you’ll be able to see how well your website is performing against the three Core Web Vitals. You’ll get two separate reports here: desktop and mobile.

Your Core Web Vitals Report will give you a breakdown of how well your website is performing and meeting the Core Web Vitals over the last 90 days. The data is broken down into red (poor), amber (needs improvement) and green (good).

Remember what we said about not settling for anything but the best? This comes into play here. To ensure your user experience is as good as it should be, you’ll want to get green across the board here.

Screenshot of Google Search Console Core Web Vitals Report

Once you click on your desktop or mobile report, you’ll be able to get a closer look at the groups of URLs that are suffering from the same Core Web Vitals issues:

Google Search Console Core Web Vitals URLs breakdown

After clicking on these URL groups, you’ll be given a list of example URLs. When you click on them, you’ll be sent to the next Core Web Vitals measurement tool on our list: PageSpeed Insights. This will give you personalised recommendations for improving individual pages.

PageSpeed Insights

Unlike Google Search Console, which lets you look at your entire website’s performance, PageSpeed Insights focuses on individual webpages and their Core Web Vitals. All you have to do is paste the URL of the page you want to audit and voilà! In mere seconds, you’ll be able to view your Core Web Vitals assessment for both mobile and desktop.

Screenshot of PageSpeed Insights breakdown

As you can see, it’s broken down into:

  • Field Data: information that is collected from real users, provided by the Chrome User Experience (CrUX) Report.
  • Lab Data: information that is based on a simulation of what a user’s experience might be like on your webpage.

If your website is small and doesn’t receive a lot of traffic, Field Data might be unavailable in your report. This is because the real user information that it’s based on has to be anonymised. If there isn’t enough data to ensure that users remain unidentifiable, you’ll be told that you don’t have “sufficient real-world speed data for this page”. Fortunately, you’ll still have Lab Data to fall back on, which is almost as valuable.

The beauty of PageSpeed Insights is that it lets you hone in on the exact Core Web Vitals issues that are plaguing your webpages and offers solutions to help you fix them:

Screenshot of PageSpeed Insights opportunities

Lighthouse

Lighthouse is a website auditing tool that can be used to diagnose problems and offer up solutions to help improve the user experience and page performance of a website. You can run it in Chrome DevTools, or install the Lighthouse extension in Chrome.

Not only does Lighthouse measure all three Core Web Vitals—and offer up potential opportunities—it also provides audits for accessibility, best practices, SEO and much more. It then compiles all of the data for these audits to calculate an overall performance score:

Screenshot of Lighthouse audit


How to optimise Core Web Vitals

We’re now going to delve a bit further into the Core Web Vitals, looking at what they’re measuring and the ways in which you can make improvements to your website to ensure you get a good score.

① Largest Contentful Paint (LCP)

Largest Contentful Paint measurement

LCP measures how long it takes for your website to render your largest element (image, video or text block) from the point of view of your user. In other words, it’s timing how long it takes for everything above the fold to load from the moment a user clicks on your webpage.

If a user clicks on your webpage because they want to buy a product, or they’re interested in reading one of your articles, they’re not going to stick around long if certain parts of the page are still loading after a few seconds. In fact, as far as Google’s concerned, to guarantee a good user experience, your largest element should load within 2.5 seconds!

How to improve your website’s LCP

Optimise your images

Whilst high-quality images serve to liven up webpages, they usually have a negative effect on loading times due to their large file sizes. If you don’t want to get rid of your images entirely, you need to compress them using a tool like Optimizilla or a plugin like Smush. Alternatively, consider switching to an image format like WebP, which allows you to serve high-quality images with much lower file sizes.

Preload your LCP image

Given that your largest element is likely to be the most important aspect of your page, it makes sense to load it as fast as possible so that the user can see it the moment they click on the page. By using ‘link rel=preload’, you can tell your users’ browsers to load the image first when rendering the webpage.

Not sure what your largest element is? That’s what the Core Web Vitals tools are for! Head to your PageInsights, scroll down to ‘Diagnostics’ and Bob’s your uncle!

Reduce unused JavaScript

Another way to improve LCP is by reducing unused JavaScript, and deferring loading scripts, until they’re actually needed. To identify this unused JavaScript, you can either use the PageSpeed Insights tool, which will list exact URLs, or consider running code coverage in Chrome DevTools.

Minify JavaScript and CSS

If you’ve got a lot of bulky or long JavaScript and CSS on your webpage, your users will end up encountering loading delays. To avoid this, you’ll want to minify it—this process involves removing unnecessary elements from the code, such as line breaks and comments.

Don’t let your hosting let you down

If you’re on a shared hosting server and dealing with slow server response times, you might want to think about shifting to a dedicated or cloud-based plan. To see what your server response time is like (ideally under 200ms), run a speed audit in GTmetrix.

② First Input Delay (FID)

First Input Delay (FID) measurement

FID measures the time it takes for a user to be able to interact with your website after clicking on your link. An interaction can be anything from a user clicking on a link, pressing a button or using the navigation bar.

Interaction, for obvious reasons, is a vital part of the user experience. If a user can’t interact with your website after a few seconds, they’re going to get annoyed and head to an alternative website. No one likes to wait around for anything nowadays, so if you can’t offer a fast solution (of around 100ms or less), you’re going to lose out.

The importance can vary from page to page, however. If you’re looking at content-heavy pages, like articles and blog posts, it won’t require much interaction from users beyond basic scrolling. When it comes to product pages, however, where you’re expecting the user to add something to their basket, a good FID score is vital.

How to improve your website’s FID

Reduce the impact of third-party code

If you’ve got a lot of third-party code running on your website, like Google Tag Manager, heatmaps and Google Analytics, it can have a huge impact on your FID. So, put everything under a microscope and carefully consider what you do and don’t need. If you’re not using something, or it’s no longer important, get rid of it.

Reduce JavaScript execution time

If you’ve got JavaScript that’s take a while to execute, it can slow down your entire page performance, which then leads to page unresponsiveness and your users being unable to interact with anything. You can speed up JavaScript execution by implementing code splitting, which only sends the code your users actually need at the very beginning.

Avoid long main thread tasks

The main thread is used by a browser to handle most code (parsing HTML, CSS and JS) and process user events. If this thread takes too long to execute something, however, it can lead to your page not responding to user interactions in a timely manner. To stop this from happening, find out how to minimise main thread work.

③Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measurement

CLS measures how stable your webpage layout is. If you’ve got elements of your page that keep moving around as it loads (like pop-up ads and banners) then you’ve got a high CLS, which as you’ve probably figured out, isn’t a good thing.

If a user clicks on your webpage, intending to take a closer look at a product or a specific blog post, the last thing you want is for them to accidentally click on something else because the layout has shifted. Again, we cannot overstate this enough, you need to do everything you can to avoid annoying users or affecting user experience.

How to improve your website’s CLS

Include size attributes on images and videos

One of the reasons why the layout of a webpage can shift frequently is because your images haven’t been given a set size attribute. If you actually add size attributes, however, you’re helping your users’ browsers figure out how much space is needed for each image as the page starts to load—helping you avoid unnecessary shifts in layout.

Be specific with your layout

If you’ve got ads, iframes or banners on your page, you’ll need to reserve a specific place for them so that they don’t appear or disappear suddenly and shift the entire layout around as the page loads. You can do this by using containers with specified dimensions.

Optimise for font rendering

Downloading and rendering fonts can often lead to layout shifts in two ways:

  • Flash of unstyled text (FOUT): the font is swapped out for a new font.
  • Flash of invisible text (FOIT): the invisible font is on display until a new font as been rendered.

You can reduce the chances of this layout shift occurring by preloading your fonts with ‘<link rel=preload>’. You can combine this with ‘font-display: optional’, which will do one of three things:

  • Block: this will render invisible text, but switch to your chosen font once it finishes loading.
  • Swap: this will render text using a fallback font, but switch to your chosen font once it finishes loading.
  • Fall: this will render text using a fallback font.

Once you’ve made your improvements…

After making your way through all of your Core Web Vitals issues, you’ll want to return to Google Search Console so that you can inform Google that you’ve fixed the issues. You can do this by heading to your Core Web Vitals Report, clicking on the exact issue and then selecting ‘Validate Fix’.

Screenshot of Google Search Console Core Web Vitals Validate Fix

Google will then need to monitor usage statistics for up to 28 days to confirm that the issue is fixed. Depending on the number of users that visit your page, they might not be able to verify the fix.


Final thoughts

Give yourself a huge pat on the back! You’ve managed to reach the end of our guide to Core Web Vitals without breaking a sweat or bursting into tears (we hope)! Though the process of optimising your Core Web Vitals can certainly get technical, you shouldn’t let it put you off doing the work.

Taking the time to hone in on what is negatively affecting your user experience and page performance will benefit your website in the long run. Not only can it lead to you jumping up the search rankings, it could help you draw in more website traffic and lead to an increase in conversions!

To make sure you’re staying on top of everything, you’ll want to measure your Core Web Vitals on a monthly basis. This will help you get the jump on any emerging issues before they can have a long-term impact on your website’s rankings.


If you’re not quite ready to sort out your user experience problems yourself, why not enlist the help of SEO specialists? Get in touch with Supersede Media today and we’ll have you moving up the search rankings and waving goodbye to high bounce rates in no time at all!

Share