What are Core Web Vitals?
Are you drawing a blank when you think of the words Core Web Vitals? What do they do, why are they important, how could this affect your business? Well we are here to explain exactly what they are, and how you can use them to your advantage.
Google officially launched Core Web Vitals in 2021, as a new way of ranking website SEO, with the ultimate goal of giving a user the best experience possible. These three metrics ultimately determine the visibility of your website, and therefore the amount of people that can find your business online.
The three metrics that make up core web vitals are Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Whilst this jargon may sound highly technical, there are some simple guidelines you can follow to ensure your website scores highly for each one.
What is the Largest Contentful Paint?
Largest Contentful Paint (LCP) is effectively content loading speed, how long does the largest image on your website take to load for the user. Content forms include both media and text, what’s important is ensuring users aren’t left waiting to see what your website has to offer.
To get a healthy score for this metric, your page’s content must load in less than 2.5 seconds. Anything over 4 seconds will receive a poor score. Think of it this way, don’t you get frustrated when you click onto a website and it takes ages to load? You are making the user’s journey inherently easier by giving them access to the content they want quicker, meaning it’s more likely they’ll stay on your website for longer.
So, how do you prevent long loading speeds? By ensuring the sizing of your media is optimised for your website hosting, which suggest the recommended dimensions for you. Using a CDN (Content Delivery Network) is another way to make images load faster, companies like Image Engine optimise your images for you.
Other quick wins are avoiding JavaScript to load your images, let your browser do this and prevent possible loading delays. Make sure to choose a good hosting service for your website, one that is suitable for your website’s size and volume of content. Finally, choose an appropriate image format like JPEG, that can be compressed easily. Avoid PNG files if you can, as they are larger files that result in higher load speeds.
The key with this metric is speed, we want to make our user’s journey as quick and painless as possible, so continue to check the health of your website and optimise it’s content for Largest Contentful Paint.
What is the First Input Delay?
First Input Delay (FID) is the metric that measures interactivity on your website. Essentially this measures the time from a user’s first click on the page to when the browser responds. Examples of first inputs are clicking links or buttons, pressing a key command, clicking into a chat box, etc.
First Input Delay is measured in milliseconds, and it measures the delay of the input not the actual processing. This metric is important in helping you ensure the loading of important information on your website doesn’t feel unresponsive or slow. A good score is anything less than 100 milliseconds, and a poor score is anything over 300.
Similar to LCP, this metric is about giving users the information they want as quickly as possible. The quicker it is for a user to access what they want, the more likely they are to return to your website. Google is prioritising websites that give users high-quality content quickly, when we live in a world where we are overwhelmed by choice of content providers, speed becomes a crucial factor.
Our recommendations for optimising your FID score are as follows. Remove third-party scripts, or certainly the ones that aren’t crucial as they can delay your own scripts’ actions. Prioritise which scripts provide the most value for the user, and remove the ones that do not. Minimise and compress your code which will reduce the file size and make the code perform quicker. Remove any unused CSS, this gives your browser fewer actions to perform which increases the speed of FID.
Again speed is crucial for this metric, but it all comes down to the coding of your website and the list of tasks your browser has to perform before it can load the content a user has clicked on. Make the browser’s job as easy as possible by giving it only crucial tasks. When optimising this metric, always choose what to remove by considering the impact it may have on both the user and the score.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) focuses on your website pages’ stability. A particularly important one for mobile users, this is about ensuring your website content is optimised for all devices. When a user loads a website, or clicks on a link or even scrolls down the page, sometimes the website layout will shift on the screen which can confuse and frustrate the user.
This issue generally affects mobile users more than desktop, as many websites are only optimised for a desktop device. Scoring positively on this metric can prevent users from accidentally clicking on the wrong link or being shown content they don’t want. This can result in frustrating users losing out on potential customers.
A score of 0 means the page is completely static, but a good score is anything below 0.1 and a poor score is anything above 0.25. To improve your CLS score, always include width and height dimensions on your images and videos, this means the browser will allocate the correct amount of space for your media to load. Ensuring the browser knows the aspect ratio of your website’s media also helps improve CLS.
Ads tend to be the biggest troublemakers for CLS, prevent ads negatively impacting the score by statically reserving space for the ad slot. Eliminate content shifts by reserving the largest size possible for the ad slot to cater for any potential ad layout errors. Avoid placing ads near the top of the viewport, if they are lower down on the page they are less likely to shift. The same goes for embeds and iframes, make sure to reserve enough space!
Font is the final piece of the puzzle, downloading a new webfont can result in FOUT or flash of unstyled text, where the default font flashes before displaying the new one. FOIT or flash of invisible text can also cause problems, where ‘invisible’ text is displayed until a new font appears. Font loading API’s can help resolve these problems, and improve your CLS score.
The layout of your website is what matters here, but crucially that it remains static and displays the correct information to the user. We want to make their journey as easy as possible, poor CLS could affect not only a single user’s experience but potential users also as your site could garner a negative reputation. Regularly audit your website using Google Lighthouse to ensure you are optimised for Cumulative Layout Shift.
How can Google Lighthouse Help?
Google Lighthouse is a great tool that generates reports which specifically focus on the core web vitals metrics. It shows you the performance of each metric and offers optimisation suggestions to help improve your score. Although for the most part the issues that impact core web vitals are what we’ve mentioned in this blog post, we recommend diving into the depths of a Lighthouse report to get a detailed breakdown of what can cause poor scores.
It is important to ensure all three metrics are performing well, as they naturally work in tandem with one another. Approach your core web vitals optimisation from a holistic perspective, and ensure any new content you upload to your website is optimised for Largest Contentful Paint, First Input Delay and Cumulative Layout Shift.
Future-proof your SEO Marketing
So what does this tell us? Clearly, mobile-search is the future. Google prioritises websites that cater to mobile users which means fast load times, smart design layouts and an easy experience for the user. If you are a company who values your presence on Google Search, then future-proof your marketing strategy by running a regular health check of your website. If history tells us anything, it’s clear that Google is continuing to focus on a user-centric approach.
With this in mind, when creating new content, consider the impact it will have on the user’s journey. Not only in consuming the content, but from the moment a want enters their head that you can supply. From first google search to clicking checkout, prioritise your user’s journey and optimise your content for core web vitals.
Speak to the My Bright Digital Team about how we can optimise your website for SEO and improve your core web vitals.
