What are Core Web Vitals?
Core Web Vitals are designed to measure how a user experiences a page. By identifying positive page experience signals via these metrics, Google is able to adjust rankings appropriately. That means that, the better you score with Core Web Vitals, the more chance you have of ranking well.
Of course, it’s still important to continue providing good quality content for your users too. Core Web Vitals are an additional asset to Search Engine Optimisation (SEO), not a replacement for everything you’ve done up until now.
There are currently three Core Web Vitals:
- Largest Contentful Paint (LCP) – measures the loading speed of your site
- First Input Delay (FID) – measures the interactivity of your site
- Cumulative Layout Shift (CLS) – measures the visual stability of your site
Although there are currently only three Core Web Vitals, this may change in the future, so it’s important to keep on top of any updates. I’ll be reporting on any future changes, so you can
sign up to my newsletter to get news straight to your inbox.
Measuring and Auditing Core Web Vitals
There are a number of tools available for auditing your core web vitals, but the best place to start is with Google’s own tools, mainly Google Search Console and PageSpeed Insights.
Google Search Console
In Google Search Console, Core Web Vitals can be found in the Experience section of the menu.
The first thing to note is that Core Web Vitals can be vastly different for Mobile and Desktop sites, so it’s important to audit both, giving mobile priority.
The report will sort your pages down into three sections: Good, Needs Improvement, and Poor. The report also gives you a handy breakdown of where the issues occur (i.e. which pages), and what’s causing the problem.
PageSpeed Insights
Run your site through PageSpeed Insights and you’ll be presented with a list of possible improvements as well as details on potential load speed time savings.
Improving Core Web Vitals
Now we’ve looked at how to measure them, let’s take a look at each of the three Core Web Vitals in more detail, what exactly they are, and how you can make improvements in each area.
Note: Much of the work you need to do to improve your Core Web Vitals is technical, so it’s important to work closely with your web developer on this. They need to be able to understand the requirements and make appropriate improvements and adjustments to your site. If you don’t have a developer and your site is built on WordPress, there are a number of plugins available to help with some of this work.
Largest Contentful Paint (LCP)
LCP measures the amount of time it takes for the largest element of a page to load. This can be an image, a block of text, or a video, and depends on how much of the viewport (the bit you see on your screen) it takes up. It identifies when a page appears visually loaded for the user.
This metric is dynamic, which means that one element (such as a text header) may be the LCP first, and then another element loads (such as an image) and that becomes the LCP. The below image from Google explains this visually.
How To Improve LCP Score
LCP is good when it occurs within 2.5 seconds of when the page first starts loading. Anything between that and 4 seconds needs improvement, and over 4 seconds is poor.
The following are common issues that will affect your LCP Score, and some ways you can make improvements
Slow server response time
- Tell the browser what it should prioritise loading first with preloaded key requests
- Cache assets to prevent having to fully load them each time a page is opened
- Optimise your server and/or upgrade your hosting provider
Render-blocking Javascript and CSS
- Remove unnecessary Javascript and CSS
- Delay non-essential elements
Slow-loading resources
- Optimise all images
- Preload resources
- Compress text files
Client-side rendering issues
- Minimise the amount of rendering required by the user’s own device
- Use pre-rendering
- Reduce critical Javascript
First Input Delay (FID)
First Input Delay is how long it takes your page to respond when a user takes an action. For example, when a website visitor taps a button, does something happen immediately, or is there a lag?
Remember that FID can’t be measured if users aren’t interacting with your website and Google can’t predict this data. So, if users aren’t interacting, you won’t have any data.
How To Improve FID Score
FID is good when response is within 100 milliseconds of an action being taken. Anything between that and 300ms needs improvement, and longer is poor.
Some common issues you will find with FID – and how to improve them – are:
Heavy Javascript
Javascript is often important for the interactivity of your site, so it’s usually not possible to get rid of it completely. However, it always slows down page load, so you should find a balance between improving your FID score (and other Core Web Vitals) and ensuring your website does what it needs to do.
- Improve your Javascript as far as possible while still ensuring your site is fit for purpose.
- Break up long-running code into smaller tasks.
Third-party code
- Limit third-party code as far as possible. Find a balance between what you want from your site and what is beneficial to the user. Third-party code can include things like Google Fonts, Google Analytics and WordPress plugins.
- Defer loading of non-essential scripts.
Data-fetching
- Implement performance budgeting.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift is how much the layout of a page adjusts while it loads. Imagine, for example, that a user goes to tap a button and, because a new element has suddenly loaded, the button is now in a different location. It can be very frustrating when this happens.
This metric measures unexpected shifts only. That means, if you have content that is shown once a user takes an action (for example, they click ‘Read more’), this will not count towards your score.
Unlike the others, CLS isn’t a timed metric but is instead scored based on how much the content shifts during load.
How To Improve CLS Score
CLS is good when the score is below 0.1. A score between 0.1 and 0.25 needs improvement, and higher than 0.25 is poor.
Here are some common issues and how to improve on them:
Ads, embeds and iframes
- Create reserved space for these elements so they load within those confines.
- Limit the number on your page. For example, the more ads you have, the more profit you might make. But lots of ads can shift your content about and make it difficult for the user to see what they want.
Undefined image sizes
- Specify the width and height of all images so that the browser doesn’t have to work out what size it should be while loading.
Dynamically injected content
- This is content such as ‘sign up to our newsletter’ banners and GDPR notices that pop up before a page is loaded and shift the content about. Avoid inserting these before page load unless they appear as the result of a user interaction.
Web fonts
When downloading web fonts, your page can, during load, show either unformatted text or ‘invisible’ text until the right text is rendered.
- Use font-display to adjust the rendering behaviour.
- Utilise the Font Loading API to reduce the amount of time needed to download the required fonts.
Conclusion
Since May 2021, page experience has been another ranking factor and Core Web Vitals provide ways to measure how your site is performing. This is relevant to all website owners and will need quite a lot of technical updates, so make sure you work closely with your web developer so that they’re aware of any improvements required.
