They might sound clinical, almost medical, but Google’s Core Web Vitals are actually a set of metrics designed to measure the speed, responsiveness and visual stability of your website.
First introduced in 2020, they’re supposed to help Google quantify your site’s user experience (or UX); using real-world data from the CrUX report to work out whether people will enjoy interacting with your pages.
Now, we’re not convinced that you can accurately measure the quality of a website’s UX using a handful of top-level metrics.
But there is plenty of data to support the idea that slow or unresponsive web pages annoy your visitors, so we’re not surprised that Google has started to pay more attention to things like loading speeds and content stability.
We were also unsurprised to hear that Google was going to start using your Core Web Vitals as a ranking factor in 2021. After all, they’re in the business of providing engaging and enjoyable search experiences, and they’re well aware of the negative consequences of sending people to a slow or unresponsive website.
Core Web Vitals As A Ranking Factor in 2021
No one knows exactly when the update will roll-out, but Google have confirmed that they’ll be deploying a major update at some point in May 2021.
This update - called the Page Experience Update - is set to shake up the majority of search engine results pages (or SERPs) by prioritising sites that offer “delightful” on-page experiences.
This will be measured using the aforementioned Core Web Vitals, and a handful of additional metrics that are designed to quantify things like:
- Mobile friendliness
- Site security
- The impact of pop-ups and other intrusive elements
It’s hard to tell whether the new Page Experience Signal will dramatically alter the search landscape. Google is always cagey about the projected impact of their tweaks but it seems clear that the Page Experience Update is designed to provide a fairly significant boost to sites offering a good UX.
There’s also some suggestion that the update will add a visual indicator to SERP pages, highlighting “pages in search results that have great page experience”, and visual indicators like this can have a pretty dramatic effect on your click through rates (or CTRs).
So if you’re not already working to measure and improve your Core Web Vitals, it’s probably time to start!
Core Web Vitals Explained
Now that we’ve covered the importance of Core Web Vitals, it’s high time we explained what they are and how you measure them.
There are three Core Web Vitals:
- Largest Contentful Paint (LCP)
- First Input Delay (FDP)
- Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP)
LCP measures the time it takes your site to display the largest visual element in the viewport (or visible area of your landing page). This is usually an image, a form or a large block of text with <main> or <section> html tags.
Google is prioritising LCP over similar metrics like FCP (first contentful paint) because it provides a more accurate picture of your site’s actual load times.
Most sites can display menus, headers, breadcrumb trails and other elements in a couple of seconds, but pages aren’t really considered ‘usable’ until the main blocks of content are rendered, and Google wants to make sure they not accidentally boosting sites that take 5+ seconds to provide useful or engaging information.
LCP is also easy to measure and optimise, which makes it a good metric for the Page Experience Update. But LCP does have its problems. Firstly, it ignores video elements, so you’ll still need to make sure that your videos load in good time.
Secondly, LCP can be gamed by pushing or preloading your biggest resources. Occasionally you’ll come across sites that render large header images before vital elements like the header or page copy because they’re trying to get their LCP as low as possible.
Sadly, these sites still offer a pretty poor user experience and we think most of them are still going to suffer from unusually high bounce rates.
But LCP is still a vital metric and it’s important to make sure that most of your pages have a good score.
How good? Well, that depends on the type of page you’re rendering but most experts agree that your largest elements should render in less than 2.4 seconds.
Anything between 2.4 - 4s is ok but could do with improvement, and anything over 4 seconds will probably have an adverse effect on page performance.
First InputDelay (FID)
First Input Delay measures the time it takes for someone’s browser to respond to the first action they take on a web page.
This doesn't include things like scrolling or moving the mouse, but it does cover things like button presses, or clicking to expand a drop-down menu.
Google measure FID because it allows them to quantify your website’s responsiveness and interactivity. They know that people normally bounce away from sluggish sites and prioritising FID makes it easy for them to penalise sites that frequently clog up or block web browsers by loading large elements or running a lot of JavaScript.
It’s actually very similar to the older Time To Interactive (TTI) metric, which measures the length of time it takes for a page to fully render and become interactive.
But FID is more developer-friendly in the sense that it can measure interaction times on pages that are still loading, which means thatyou won’t be unduly penalised for having slow-loading web pages on a well-optimised site.
FID is measured in milliseconds, and you should try to make sure that most pages on your site have an FID that’s under 100ms.
100ms - 300ms needs improvement, and FIDs of more than 300ms will probably have a negative impact on page performance.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of your pages.
If you’ve ever opened one of those annoying news sites on your mobile phone - only to stare in horror as pictures, text, adverts and pop-ups start pinging up and down the screen - you know just how important visual stability is.
Measuring cumulative layout shift also allows Google to penalise websites that try to trick you into clicking adverts and banners that pop up after a web page has loaded, but your site will also suffer from a low CLS score if you use a lot of images without dimensions, your fonts load slowly or you use a lot of dynamically-injected content.
Now, Google knows that there are times when users expect the layout to change, so there is an exclusion window (1 second after every interaction) but a lot of poorly optimised websites still end up with low CLS scores because of the aforementioned issues.
So if you do find that you’re losing ground here, try not to panic.
A low CLS score doesn't necessarily mean that you’re running a spammy website and there are plenty of things that can be done to improve your score. It’s also worth noting that the kind of issues that lead to low CLS scores can be very frustrating for web users.
In our experience, people are often frustrated by websites that don’t conform to their expectations so if you’re looking at a low CLS score, there’s a good chance that optimising for a better score will improve other metrics that relate to on-site engagement and conversions.
Generally speaking, you want your CLS to be 0.1 or below. Scores of 0.1 - 0.25 need improvement and scores of 0.25 are generally considered poor, which means that they’ll probably have a negative effect on your page performance.
How Do I Check My Core Web Vitals?
There are several ways to check your site’s Core Web Vitals. First and foremost, Google Search Console (formerly Webmaster tools) has a dedicated Core Web Vitals report that tells you how your web pages score.
you can view this report by:
- Logging in to Google Search Console
- Navigating to ‘Enhancements’ on the left hand menu
- Selecting the Core Web Vitals option that appears below
This will load a report that lets you track URLs by score (Poor, Needs Improvement of Good). You can also use this Core Web Vitals report to look at the issues affecting your URLs and diagnose any performance issues.
If you’d rather track the Core Web Vitals associated with a specific landing page, you can just navigate to web.dev (a Google tool) pick measure from the top menu and copy/paste your url into the search bar.
After hitting enter, you’ll see a full breakdown of your page’s Core Web Vitals - colour coded so that you can quickly spot any problems.
LightHouse and PageSpeed Insights can also be used to check your Web Core Vitals, but they’re not the best tools for the job.
Optimising your Core Web Vitals
Seeing a lot of red? Don’t start panicking just yet. Core Web Vitals can be optimised with the help of a capable developer.
In fact, all three of Google’s Core Web Vitals can be improved with some relatively straightforward tweaks to your site content, code or server setup. For example, a high LCP can be reduced by:
- Optimising content for the device requesting it (e.g. Providing smaller images for mobile devices)
- Compressing or resizing large images
- Inlining critical CSS to speed up the loading process
- Removing unnecessary JavaScript
- Reducing server response times by moving your site to a faster - or better optimised - server
- Push the largest asset to load as soon as possible with a declarative fetch request to the browser
While a high CLS can be improved by:
- Preloading fonts, so that they are rendered before other elements and don’t cause layout shifts
- Setting the height and width of elements like images, SVGs and ads
- Styling elements to ensure that there’s space for slow-loading assets
- Removing CSS animations that count as layout shifting
- Improving your site speed, so that assets load quickly and don't shift the page around as they render
Our development team can help you diagnose and fix any problems with your Core Web Vitals. We routinely optimise large and content heavy sites for global B2B clients in a range of industries.
They’re also up to date on the latest best practices and they’ll work hard to ensure that your website is always winning.
Our marketing and CRO experts can also help you to tweak your site and make sure you’re prepared for Google’s Page Experience Update.
