An introduction to Core Web Vitals: What they are and how to use them
Usability and creating the very best experience for people on your website is what good digital marketing is all about. Key to this is Core Web Vitals – a ranking factor that has become increasingly important for technical SEO.
In this article, our Technical SEO expert, Reuben Marshall, discusses how to use Core Web Vitals to fix poor user experience on websites. Read on to find out about:
- What are Core Web Vitals?
- How are Core Web Vitals Measured?
- The Main Core Web Vital Metrics
- Why do they matter?
- How can I find my Core Web Vitals scores?
- What are some common issues?
- How can I talk to my developer about them?
What are Core Web Vitals?
They are a set of factors that are important for online user experience. They focus on page speed and other user experience metrics, looking at:
- How fast a page loads (the quicker the better)
- How quickly a user can interact with that page (again, the quicker the better)
- How stable the page is (i.e. does the page load fast and stay still, or do things continue to load as the user tries to interact, thus impeding their ability to use the page).
Core Web Vitals were created to provide measurable values for user experience on a website – to provide developers, SEOs and website owners with the ability to fully measure the user experience on a site, and to provide them with helpful metrics to be able to improve it.
The goal of Core Web Vitals is to improve user experience across the entire web by encouraging websites to improve things for their users (this helps Google as it means people are more likely to continue using the search engine, it helps websites as users are more likely to come back, and it helps users themselves – win, win, win!)
The Main Core Web Vital Metrics
The three metrics that Google have come up with to measure page load speed, responsiveness to user interaction, and page stability are:
- Largest Contentful Paint: Put simply, this measures how long it takes for the largest piece of content to appear on the screen. This could be an image, video, or block of text – it’s whatever the largest piece of content is. The faster it loads the better as slow loading speeds are renowned for annoying website users.
- First Input Delay: This metric measures the time between a user interacting with the site (e.g clicking on something) and the site responding to that interaction. Fast reaction times are good, slow reaction times can leave a user too frustrated to continue with their journey – or even thinking the site is broken.
- Cumulative Layout Shift: This is the metric that looks at visual stability. Have you ever loaded a website, tried to click on a button but it suddenly shifts position? Or an ad appears where the button was and you’ve ended up loading the advertisers website instead? This can be a common issue for a site with lots of blocks and images, but a static, stable webpage is the best kind of webpage. One thing to think about here is that advertising popups (e.g. discount offers or newsletter sign up popups) can affect your CLS – so it’s worth really thinking about whether they are needed on your site.
One interesting thing about Google’s language when describing these Core Web Vitals is how emotive they are. They want pages to be ‘useful’, ‘usable’ and even ‘delightful’. Creating a good user experience is no longer enough – they want users to be truly delighted each time they use a webpage they have found in Google’s Search Engine listings.
How are Core Web Vitals Measured?
They are measured in three different ways.
- Good
- Needs Improvement
- Poor
A website will receive one of these scores for each metric on each of their landing pages. (Caveat – the landing page must have enough user data and traffic coming to it for Google to be able to provide this information).
These scores are not simply worked out when you type in your URL and ask for Google to tell you your scores. They are looked at constantly by the search engine, using real world data. You will be provided with a rolling score of the performance of your website over the last 30 days.
Why do they matter?
There are a few reasons why they matter. The first reason is that checking your Core Web Vitals can give you ways to improve your page speed. Decreasing your page load time is proven to also decrease your bounce rate (the percentage of users who land on a webpage and just bounce off).
Google have discovered that a:
- 1-3 second load increases the chance of a bounce by 32%
- 1-5 second load increases the chance of a bounce by 90%
- 1-6 second load increases the chance of a bounce by 106%
- 1-10 second load increases the chance of a bounce by 123%
So, speed really matters to users. If your website is slow, they will leave.
Core Web Vitals is also now a ranking factor for Google – so if you ignore it, your positions in search will soon start to suffer! Following the September 2021 Page Experience update from Google, Sistrix did some digging. They discovered that ‘good’ pages started to rank slightly better than before (at least 1% points higher than the average). On the other hand, ‘bad’ pages ranked significantly worse (3.7% points lower than the average).
Core Web Vitals don’t replace other important ranking factors like quality content, good linking or search intent – they just add another layer to what websites need to look at to rank well.
How can I find my Core Web Vitals scores?
PageSpeed Insights
This is quite easy. Jump onto this website and you can start typing your URLs into PageSpeed Insights. (Remember the caveat from earlier – this looks at the last 30 days of traffic so there has to be enough users going to that page to provide a score).
If there isn’t sufficient real user data for a specific URL on your website it won’t be able to pull out the Core Web Vitals but it will give you the metrics for the ‘origin URL’ (for us that would be footprintdigital.co.uk).
You can switch between your mobile and desktop metrics, and find out if you have passed or failed on Core Web Vitals. You will then see a score for:
- First contentful paint
- Largest contentful paint
- First input delay
- Cumulative layout shift
Underneath your scores there will be a section on diagnostics which are suggestions for ways to improve your page speed.
Google Search Console
You can also look in your Google Search Console (a tool that provides information about how you are doing in organic search). In here, you can scroll down and find a section called ’experience’ which gives you your Core Web Vitals report as well. Click on this and you can see your results for mobile and desktop in two separate graphs. You can look at the data very granularly here, and click on a specific issue then see all of the URLs on your website that have that issue – it’s a great place for seeing everything that you need to do and putting a plan of action together for change.
What are some common issues?
Largest Contentful Paint issues are generally caused by images that are too large, or JavaScript that is too large. If the weight of the page is too high, that can cause issues in loading. Generally this can be sorted by fixing the size of the images, there are WordPress plugins that can do this for you or you can manually change image sizes using free online tools. Or this can be done by a developer, who will change the image to a new image type. This could be WebP which losslessly compresses an image (makes it smaller without losing quality).
First input delay issues are often caused by heavy JavaScript use, where all the JavaScript is trying to load before anything appears on the page for users to interact with. This can be resolved by breaking down code into smaller, asynchronous tasks and not trying to do everything at once before the page loads.
Finally, a key issue that can affect cumulative layout shift is images being added to a webpage without a set height and width. This means they will pop in when they have loaded and shift everything else around.
How can I talk to my developer about them?
Discussing Core Web Vitals with your developer can be a tricky topic, as you may be suggesting changes to work that they (and you) were previously very happy with. The thing is that this is not about diminishing the work of the developer (their skills are immense!) It’s about you working together to enhance what they have already created. There are a few things to think about before talking to your developer about CWV.
- Come armed with data. Use the tools we have spoken about earlier to find your current web load stats, and the things that could be improved.
- Be ready to listen. You might have lots of different ideas about what needs to change – but your developer may have very genuine reasons for why things can’t. There are sometimes issues outside of your developer’s control, such as JavaScript usage which may be integral to the site or theme.
- Stand your ground. If you think there are genuine reasons for spending time on improving Core Web Vitals, then stand your ground! It’s your website at the end of the day, and creating a better user experience is going to help everybody. If you want changes, keep asking for them.
Find out more about Core Web Vitals or how we can help your website’s search performance by contacting our team.
Sources:
https://www.sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/
