Core Web Vitals - The Basics Every Website Owner Should Know in 2022

You have spent years developing your website content, placing the appropriate keyword phrases on your pages whilst crafting beautifully written content that meets your users’ needs.

You’ve also spent time improving your site’s visitor journey, lowering bounce rates and increasing time on your site. Now you’ve heard that Google is raising the bar once again when it comes to SEO, with its requirements for a good Page Experience as well as for “Core Web Vitals”.

Google announced the development of Core Web Vitals back in 2020 and released it in June 2021. So it’s not a brand new concept, but there are still going to be confused website owners trying to understand Google’s increasingly complex demands.

“I wonder if Google executives sit around thinking “if we can make SEO even more expensive then people might decide it isn’t for them” in the hope folk will throw in the towel on SEO and go sign up to Google’s paid Ads program, but don’t mind me after 20 years in SEO I’m probably just a cynic!”

Darren Moloney, Founder and Technical Director, All Things Web

Google’s Core Web Vitals (CWV) is a subset of metrics forming part of Google’s Page Experience (their way of sizing up your page’s overall UX). Google helpfully provides a set of tools to website owners to help them better understand how their website is performing in terms of speed and user interaction (the overall user experience).

In this blog post, we will explore the basics of Core Web Vitals so that you as a website owner can understand how to take to correct steps to improve your website’s performance for users and ensure high rankings in Google’s Search Results are achieved and maintained.

What are Google’s Core Web Vitals & Why are They so Important for Your SEO?

Core Web Vitals is an important component of Google’s Page Experience and something that is becoming a lot more important as part of a site’s SEO overall performance.

Google has stated:

“We will introduce a new signal that combines Core Web Vitals with our existing signals”

If your website content is comparable to that of a ranking competitor but that site offers a superior Page Experience (as well as Core Web Vitals and Page Speed), it’s more likely going to rank higher in Google’s results than you, if not now, then definitely in the future.

This is why it’s critical not to overlook Core Web Vitals!

Google claims that the longer your web page takes to load, the higher the bounce rate you’ll experience in Google Analytics. Certainly this is true when surfing pages over a slow mobile connection. In short (and in Google’s own words) “speed equals revenue“.

The first thing you will want to do is run a Core Web Vitals report for your website. This tool can be found under the “Page Experience” tab in your Google Search Console account by selecting “Core Web Vitals.” If Google hasn’t reported on your website in the last 90 days, it will provide you with an alternative link via Google Pagespeed:

You may discover that your website has a decent Core Web Vitals score, but this does not mean you can rest on your laurels (though well done you). Over time, and as websites are continuously enhanced, Google will undoubtedly demand a higher standard, potentially lowering the CWV score of your site. Checking your Core Web Vitals on a regular basis throughout the year will be an ever more important task.

View From the “Web” Trenches

It’s not just us SEO’s that have to get to grips with Core Web Vitals, it’s also critical for web designers and developers to have a handle on too, especially if they want to keep their clients happy with fast loading websites. We spoke to Andrew Western of Ginormous Websites, here’s his take:

One of the many lessons the Covid 19 pandemic has taught us, is that every business needs to function online. This is especially true for traditionally face to face businesses, for example; in the wellbeing sector, as these businesses were particularly hit by national lockdowns. So with ever increasing numbers of businesses vying to get seen and convert visitors to customers online, its essential Google’s Core Web Vitals are addressed on your website.

How to Interpret the Google Core Web Vitals Report

Google provides a wealth of information on the Core Web Vitals Report.

However we’ve outlined below how to interpret the data presented in the report, as well as what steps you might take to help improve your website score (it’s conceivable that you’ll need to consult with your web development team about this).

The Core Web Vitals Report is made up of 3 metrics known as:

LCP – Largest Contentful Paint
FID – First Input Delay
CLS – Cumulative Layout Shift

All very wordy and likely to put the average website owner off…. but bear with us, this stuff is DEFINITELY worth knowing.

With this in mind, we’ve defined each one above in as simple a concept as possible below and with some initial steps you can take to begin to improve these metrics.

Largest Contentful Paint (LCP):

The term Largest Contentful Paint describes the amount of time taken to render the largest content element visible in the viewport (the user’s screen), from when the user requests the URL (the website) in their browser. The largest element is usually an image, sometimes video, or (rarely) a large block of text (unless no image on the page) and it can differ on mobile or desktop.

In layman’s terms LCP means how long it takes the page to actually load in front of a user – it’s typically the content seen “above the fold” on your website.

Google wants the LCP to load in under 2.5 seconds for it to score a “Good” rating. If it takes more than 4 seconds to load, Google perceives it as “Poor.” Between these times, Google suggests that the page “Needs Improvement” – perhaps something you may live with for now but in time you’re going to need to sort.

You can only assess LCP one page at a time using Google’s Page Speed tool. However, if you have real world data in Google Search Console, you can examine it for your entire website – this is much more helpful!

If you can only test one page at a time then I suggest you check your home page and then choose your top 5 most popular pages after that.

How to Improve Your LCP Score

Google measures your LCP both on mobile and desktop, so you may get different scores on both platforms. There are usually a number of issues which will need resolving, here are the 2 most common ones we tend to find reported and what you can do to resolve:

The PageSpeed tool from Google will tell you if any of your pages’ elements are slowing it down and generating a “Poor” LCP rating
Huge header images with a file size of between 2 to 5 Megabytes, if not larger, can cause problems but with just a little effort you can reduce the file size to one that’s far smaller, which will improve your LCP score dramatically

How To Quickly Fix an LCP Issue

Identify your web pages that take more than 4 seconds to load
Measure the LCP Score of that page
Identify the element(s) with the longest load time (it’s usually an image)
Fix the element causing the problem
Test your page again to remeasure your LCP score,

Minifying Your CSS Files Can Substantially Improve LCP Times

Many website Custom Style Sheets (used to design, style, and lay out your website) include characters such as white spaces, indentation or line breaks. These aren’t essential for the browser itself and take up unnecessary room in the CSS file. If you can reduce the amount of blocking CSS by eliminating these characters, your page load time can be reduced by half a second or more, leading to an immediate improvement to your LCP score.

If you have a WordPress site, one of these plugins may quickly minify your CSS files – see if one of them works for you:

Lazy Loading to Speed up Your Site

Lazy Loading is a technique that defers the rendering of content that sits below the fold. This type of optimisation is mainly applied to off-screen images or videos which are not loaded until they are brought into the users viewport (i.e their screen).

Lazy loading, which can be implemented through plugins on WordPress-based websites, is a simple approach to significantly enhancing your page speed by downloading images only as the user scrolls down your web page.

Find a REALLY Fast Web Hosting Company

Switching to a lightning-fast web hosting service (or utilizing a Content Delivery Network) can help you reduce your site’s loading times. A quick Google search may lead you to a new web hosting firm in seconds so its definitely a task worth considering.

Remove Unnecessary Third-Party Scripts From Your HTML Code

A third-party script is considered any script hosted on a domain other than the current URL, whether it’s ran by you or not.

Script tags are render blocking resources by default – when a browser encounters a script tag while processing a page, the HTML parsing is stopped while the script is downloaded and executed.

HTML parsing is basically taking in the HTML code and extracting the information, like the title of the page, paragraphs in the page, main heading and sub headings, links, bold text etc to put together the web page itself.

Loading any third-party script creates a new network connection to be generated to connect to the server to where that particular script is hosted. This process is made up of several steps and it then returns the code to the user’s browser, which all takes more time and will increase your page load speed.

The first step in fixing a website’s performance issue is to determine which scripts are slowing things up for your page. Many scripts provide a significant amount of features to your web visitors (and the owners), so eliminating undesired third party scripts may be a challenging task.

It is an exercise worth looking at but we’d recommend having a developer on-hand to ensure you only remove the unwanted external scripts that you don’t actually need. You don’t want to remove a script that may be necessary for your website to perform correctly.

First Input Delay (FID)

FID measures the time it takes for a user to actually interact with your page usually by way of these types of interactions:

Clicking on a link in the site’s navigation
Clicking on the burger menu icon to get the navigation to drop down
Entering your email address into a form field

Google considers FID important because it technically measures the time (the “delay”) it takes for users to be able to click something on your page and the time that the user’s browser begins to respond to the action. Note it measures the delay NOT the time it takes for the event to be processed.

FID Scores

It seems that any longer than 100 milliseconds is seen by Google as requiring improvement.

They score First Input Delays in their Page Speed insights tool on this basis:

FID of 100ms or less is considered good (so no worries!)
FID of between 100-300ms needs improvement,
FID above 300ms is considered poor

Trying to measure FID is difficult as it requires a real user and cannot be measured in a lab – as mentioned by Google, so another way is required to be able to measure and then take steps to improve your score.

Improving Your FID Score

Google recommend the following resources when you’re looking to improve your FID score:

“For additional guidance on individual performance techniques that can also improve FID, see:

The best way to make the improvements is to measure your website’s recorded Total Blocking Time using Pagespeed Insights and fix the issues being noted, this will go a long way to improving your FID score at the same time.

“TBT is an important metric for measuring load responsiveness because it helps quantify the severity of how non-interactive a page is prior to it becoming reliably interactive—a low TBT helps ensure that the page is usable.”

Source: Google

Cumulative Layout Shift (CLS)

Cumulative Layout Shift sounds more complicated than it needs to be – it’s actually just a measurement of how visually stable your web page is as it loads in the user’s browser.

In a nutshell Google states:

“Cumulative Layout Shift (CLS) measures the instability of content by summing shift scores across layout shifts that don’t occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.”

Source: Google

If elements like images and forms suddenly appear as the page is being rendered in the user’s browser and force other elements to be unexpectedly shifted around, then you will end up with a poor CLS score (the total score is aggregated from individual layout shifts on your page).

According to Google, many users get frustrated with this and could end up with users clicking on the wrong element by mistake perhaps even making an unwanted purchase (I very much doubt that!), so it’s only going to be a good thing to fix.

Getting a Good CLS Score

To provide a good user experience in Google’s eyes you will need to aim for a CLS score of less than 0.1 inside one of these tools:

GTMetrix

Page Speed Insights

Web Page Test

You can also note your CLS score inside Google Search Console as well.

A CLS score can be as low as “0” (in the green) for fully static web pages or gets progressively higher the more layout shifts occur on the page.

If your page is static then you will get very likely a perfect score of “0” but if your page layout shifts content around as it loads then that score will be higher, generating a warning to take steps to make improvements and fix it.

Effectively the lower your CLS score, the more stable your layout is. Official CLS scores used by Google’s are set out below:

Good – CLS below 0.1 milliseconds
Needs improvement – CLS between 0.1 and 0.25 milliseconds
Poor – CLS above 0.25 millseconds

Google strongly recommends that you keep your CLS score under 0.1 milliseconds.

Does Having a High CLS Score Negatively Affect Your SEO?

Google’s Page Experience Update has made it so that your CLS score (together with LCP and FID metrics) now affects how you rank in search engine results. It might be a very minor factor, but this is something to think about if traffic from Google is important for business success.

Moreover, CLS correlates with user behaviour metrics so optimising for it should take priority in your SEO activities.

Ultimately, having a high CLS score just annoys your users as it’s shifting around elements and distracting them from engaging with your content (especially on a smaller viewport such as mobile). Too much of your page shifting can discourage users from coming back to your website on a more regular basis and if repeat visitors are crucial in your marketing or sales pipeline then it’s important you get it fixed.

How to Improve Your CLS Score

It’s a fairly simple task to ensure you get a good CLS score – most sites typically pass muster!

The best way is to always include size attributes for any image or video elements on your page. You can also reserve the required space for the element with CSS aspect ratio boxes (but likely easier to specify size attribute).

If you can do either of these then it allows the browser to ensure the right amount of space is allocated whilst the image or video element loads.

Unless it is in response to a user interaction then do not insert content above previously loaded content (again this is unlikely to happen for most web pages) – this avoids any unexpected layout shifts whilst rendering the content in the browser.

Conclusion

You might find it difficult to get a really good Core Web Vitals score especially if your site is using a WordPress theme with lots of back end code baggage. It might require you to rethink your site design completely and go for something more elegant and/or stripped back to avoid a code-bloated website. If your site is custom coded then you should find it much easier to make the fixes as you won’t be looking to sort bloated WordPress themes.

In conclusion, ensuring you understand the basic concepts of Google’s Core Web Vitals is going to be increasingly crucial to ensure your SEO efforts are successful.

Feel free to let me know how you get on with your Core Web Vitals upgrades and please do give me a shout if you have any questions!

Core Web Vitals – The Basics Every Website Owner Needs to Know for SEO in 2022