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.
Already scrambling to Google what these mean? Don’t worry, all 3 will be explained in detail below.
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.
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.
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.
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.
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 Scopify’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:
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.
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 Scopify, 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!