CORE WEB VITALS — WHY IS IT IMPORTANT AND HOW CAN I IMPROVE MY SCORES?
Core Web Vitals is Google’s most recent and important algorithm change. This change will have real effects on search rankings and who rises up the SERPs and who falters.
Google’s new cocktail of specific factors are what they consider to be important in a webpages overall user experience, they are measurable and can be grouped into three main categories, these include;
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Firstly, it’s important to note that to get a true ranking boost that googles alludes to, you need to pass the “good” threshold for all three. Here’s a more accurate description from Google themselves;
“Core Web Vitals are a set of real-world, user-centred metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads.”
– Google on Page Speed Experience in 2020
So in short, if your website doesn’t load quickly and isn’t user friendly, then you’ve got some work to do…if you feel as though your site doesn’t meet the requirements we’re about to go into, then try checking out our blog on 10 Ways To Improve Page Speed and see how that can help.
Luckily for us, Google has provided an in-depth explanation of each of the elements of Core Web Vitals and the thresholds it expects you to meet.
LARGEST CONTENTFUL PAINT
Largest Contentful Paint can be explained as the following — Loading Time
One of the simplest ways of summing up a poor user experience is measuring how long it takes a user to see any visual content rendered on the screen.
Googles LCP scoring system. Credit Google.
LCP can be used to determine how long it takes for the main content of a page (usually an image or video) to finish loading.
If a webpages LCP loads in under 2.5 seconds, then Google considers that to be a “good” loading score.
WHY IS THE LARGEST CONTENTFUL PAINT IMPORTANT TO GOOGLE?
Quite obviously, page load speed is an incredibly important metric for users and user experience and therefore Google. Page load time directly impacts bounce rate, as referenced here by Pingdom;
“The average bounce rate for pages loading within 2 seconds is 9%. As soon as the page load time surpasses 3 seconds, the bounce rate soars, to 38%.”
The lower your page speed, the lower your bounce rate.
EASY WINS THAT WILL IMPROVE MY LARGEST CONTENTFUL PAINT SCORE?
A lot of Google’s LCP score will be driven through the loading of big images or videos that usually sit at the top of the page. Tackling these will go a long way to getting your LCP score down.
Compressing & optimising images and videos — the smaller something is the quicker it will load, simple as that!
Improving slow server response times — will get content and code loaded onto your screen quicker, think of a car towing a caravan full of contents, the more powerful the car the quicker it will get the caravan and its contents to its final destination.
Caching & Pre-loading — For large images at the top of a page, this is a priority, preloading this content can substantially improve LCP scores, which will prioritise this key image over other elements on the page.
If a page on your site and its content rarely changes then caching can vastly improve LCP. This basically means that the page is remembered (or cached), meaning that every time a user hits a page it isn’t loaded from scratch.
FIRST INPUT DELAY
First Input Delay can be summed up by this single word — Interactivity
We’ve all experienced the loading of a web page on our phone and the frustration of trying to interact with it and getting nothing back.
Googles FID scoring system. Credit Google.
FID is calculated as the time it takes for a user to first interact with a webpage and how long it takes for the browser to respond to that interaction.
Google has said an optimal or “good” FID user experience is anything lower than 100ms.
WHY IS FIRST INPUT DELAY IMPORTANT TO GOOGLE?
The answer for this one is quite simple, first impressions are critical. This is summed up succinctly on Googles Web Dev site;
“The first input delay will be the user’s first impression of your site’s responsiveness, and first impressions are critical in shaping our overall impression of a site’s quality and reliability.”
If a user makes an action (clicks a link or button) they expect an instantaneous reaction, if the site doesn’t follow suit promptly it can quickly leave the user questioning its dependability.
Additionally, going specifically after user FIRST (and most important) interaction will have a knock-on effect for ALL other interactions and delays across the site.
EASY WINS THAT WILL IMPROVE FIRST INPUT DELAY?
When it comes to FID you need to look at the amount of code and script that your site has to load when performing a simple task for the user.
Reducing the impact of third party code — can have a big impact on FID, it can be a big surprise for some at how much extra code can be on a page.
Tidying up Javascript execution time — the longer Javascript takes to load, the longer it takes for your page to respond. Using Googles Lighthouse can be extremely helpful when identifying which code is slowing your FID down.
FID works well when there’s no heavy javascript or third-party scripts loading and slowing everything down, analysing this and ensuring that bundles are streamlined and you aren’t loading any information that isn’t necessary can help get you to pass Googles FID score.
CUMULATIVE LAYOUT SHIFT
In essence, Cumulative Layout Shift is referring to a website’s — Visual Stability
Googles CLS scoring system. Credit Google.
CLS is the name for unexpected shifts in a page layout as it loads different elements. These elements can be fonts, adverts, images, videos, forms or any other kind of content.
If you’ve ever visited a website and gone to click a button, but the button suddenly moved, you’ve experienced a layout shift.
WHY IS CUMULATIVE LAYOUT SHIFT IMPORTANT TO GOOGLE?
As we just mentioned, the effects of CLS being out of hand has real-time knock-on effects for a user, its incredibly frustrating and its because of that, that puts this measurement at the heart of Google’s new algorithm, it’s the ultimate user experience yardstick and is a key ranking factor.
Google has stated that a shift of under 10% of a page is a “good” result. So…
EASY WINS THAT WILL IMPROVE CUMULATIVE LAYOUT SHIFT?
Any work that reduces your page moving and shifting to fit various elements in as they laid will have a huge benefit on your CLS score. Here are a few quick and easy wins;
A good starting point would be to always give images and videos “height” and “width” attributes in the elements of the image. If this isn’t currently done it can make a huge difference to stopping your page from resizing images to fit onto the page.
An extension of that would be to apply a similar approach if there are adverts on your page — always reserve a static space for adverts to fit into.
If you are using a custom font, make sure you use “font:display” — this will ensure your custom font appears quickly as sometimes a page can load and then the font can change a few seconds later.
Lastly, never inject content above existing content (think of a banner or advert that loads at the top of the page and shifts the whole page down). This is a simple rule that can be implemented and save a lot of stress further down the line!
WHERE TO TEST CORE WEB VITALS SCORES?
Here are a few handy links where you can test your Core Web Vitals Scores and get valuable insights into how you can improve your score;
If you’re looking for further information and help on your Core Web Vitals scores, then fill in your details below and see how we can help.
