You may or may not have heard of Google Core Web Vitals, but the importance of getting them right for your website is like Everest for website owners right now. So what are the Core Web Vitals and what should you do to make sure my website meets them?
Google Core Web Vitals consist of 3 components that relate to page responsiveness, speed, stability, and how they affect the user experience.
The 3 Core Web Vitals are:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Already scrambling to Google what these mean? Don’t worry, all 3 will be explained in detail below.
Core Web Vital scoring
Each Core Web Vital will be scored as either ‘Good’, ‘Needs Improvement’, or ‘Poor’. Interestingly, Google has recently started using its Core Web Vitals scores as a way to rank websites. So website owners now know that a good user experience is no longer a “would be nice to have”, but an absolute “must-have”, as it’s crucial for good SEO.
Take this as an example. If a site scores ‘Needs Improvement’ or ‘Poor’ for any of the 3 Web Vital components, the site will receive an unfavourable ranking which could, in turn, damage their traffic, conversions, and ultimately, revenue.
So what should my website score be?
A website should ideally score ‘Good’ for all 3 components to pass the Core Web Vitals assessment. I know what you’re thinking, easier said than done right? But if you don’t get this right, it could have a huge negative impact on your website performance.
How do I know if my website passes the Core Web Vitals?
Google will eventually introduce visual indicators to identify which sites meet its Core Web Vitals criteria. This is particularly interesting considering that most sites do not pass all 3 tests, with an estimated 80% of websites failing at least one. Google has always used a multitude of measurements to rank a website and page relevance will always be the most important factor, but Core Web Vitals will become increasingly more important over the coming months, and in 2022.
Where can I see my website Core Web Vitals report?
You can find your Core Web Vitals report in your Google Search Console to see how your site has been assessed. If your Core Web Vitals score poorly, you can run your site through the Google PageSpeed report tool. This report will recommend changes such as removing non-essential code, resizing images, and using web server efficiencies that will ameliorate your Core Web Vitals and steer them towards a ‘Good’ score, and in turn improving your rankings.
Core Web Vital number 1: Largest Contentful Paint
Largest Contentful Paint refers to the loading performance of a site. Largest Contentful Paint does not measure the time it takes for a site to fully load, but rather the largest content element on the page. This can be an image, video, animation, game, etc.
If a page has some text, a small image, and a large video, the video would be the largest element. The largest content element on the page is usually the centerpiece and therefore optimising it to load quicker leads to a better experience.
Take StatusCake’s homepage as an example:
A ‘Good’ LCP score is 2.5 seconds or less, 2.5 – 4.0 seconds scores ‘Needs Improvement’, and anything over 4.0 seconds would be scored ‘Poor’.
Prior to Largest Contentful Paint, an FMC (First Meaningful Content) metric was used. This metric measured the time taken for the very first content element to appear on the page. The first element is not necessarily the most important to the user and so the metric is not as indicative of user experience as Largest Contentful Paint.
Google has multiple tools such as PageSpeed Insights that can identify the LCP and give you a score as well as ways to improve the score. It’s important to note, however, that there are several factors that can influence LCP load time. These include:
- Slow loading resources on the page that should be optimised by compressing text, resizing images etc.
- Slow server response times means that a browser waits longer to receive content from the server. You can use TTFB (Time to First Byte) to measure response times and improve your TTFB by optimising the server, routing to a CDN, using signed exchanges and caching assets.
Core Web Vital number 2: First Input Delay
First Input Delay is a test to measure the time it takes for a browser to acknowledge the user’s first interaction on the page. A quicker response time leads to a better user experience that feels competent and satisfying. After all, who wants to be on a site with the page fully loaded and wait, for what feels like forever, when you click a link?
Browsers are working harder than ever as sites become increasingly complex. The First Input Delay measures mouse clicks, trackpad taps, and key presses that require the browser to respond. A First Input Delay score of anything under 100 ms scores ‘Good’, 100 ms – 300 ms scores ‘Needs Improvement’, and anything above 300 ms is scored ‘Poor’.
To measure the First Input Delay, you need field data from users. Field data isn’t as controlled or as reliable as lab data but Google cannot simply predict the FID. As users will inevitably enter your site on a range of devices, you may see some inconsistent data results. If you consistently see scores that are poor or need improvement, you should address them as soon as possible.
Core Web Vital number 3: Cumulative Layout Shift
Cumulative Layout Shift is the newest of the 3 Core Web Vitals. The CLS metric observes how many visible elements on a webpage shift around as the page loads, and by how much. What is more frustrating than clicking a button on a page just for the button to shift down as more of the page loads and you instead click an ad?
The Cumulative Layout Shift metric uses multiple frames of the page as it loads to determine when the elements shift and by how much. Anything below 0.1 is a ‘Good’ score, anything between 0.1 and 0.25 ‘Needs Improvement’, and any score over 0.25 is ‘Poor’.
Other less common culprits are different-sized fonts and widgets that resize dynamically. You can improve your CLS scores by always including size attributes for images and videos or by using CSS aspect ratio boxes for the given space. Avoid overlapping content over existing content, unless it is by design, specifically as a response to the user’s interaction with the element. Choose Transform animations over animations of properties that prompt layout shifts, for example.
Now you’ve read all the ins and outs of Google’s Core Web Vitals, hopefully, you’ll have a plan of action ready to implement on your website to help you pass Google’s newest test. One of the ways you can do this is by signing up for a free account with StatusCake, so we can alert you to slow page speed as soon as it happens. That’s not all, we’ll monitor your uptime, your server performance, domain, and much more. Try it out today!
More from StatusCake
7 min read The term “Design Pattern” describes a well-known and battle-tested solution to a problem that developers tend to encounter again and again when developing software. Here’s our step-by-step guides to the most useful ones!
4 min read The CSS landscape at the moment is ever-changing. There are many new features that have been released recently, so I thought I’d have a look around and summarise those that caught my eye, concisely in this post.
4 min read Wondering why your website is loading so slowly? Is your bounce rate off the scale? Are you dropping in SEO rankings? We’ve got you. Follow our handy guide to help you make your page load speed quicker!
3 min read Have you heard about domains being hijacked before? Did you know that yours could easily be at risk? Read about these 5 examples of domains that have been hijacked and how so you can make sure yours doesn’t fall victim too!
3 min read Not using website monitoring? Find out what happens to your website when you don’t, and how it can have long-last effects on your brand reputation!
3 min read Black Friday 2021 is fast approaching so we thought we’d help you out with everything you need to know about the biggest online event of the year!