A recent survey by GoodFirms revealed that as many as 90% of users leave a website due to slow loading times. Factors like time to load, interactivity, and layout shifting play a significant role in the user experience and can significantly impact conversion rates for a business.
Google has redefined how it measures the user experience with the introduction of Core Website Vitals. From June 2021, Core Website Vitals became a significant part of the Google algorithm. Simply put, these measurements capture the speed, response times, and stability of a website, which plays a role in protecting your website against Log4J. You need to achieve good metrics in all three categories to ‘pass’ the assessment.
This guide will help to answer the following questions:
- What are the three Core Website Vitals?
- How are they measured?
- Where’s the best place to view Core Website Vitals?
- How can you improve Core Website Vitals for your website?
What Are The Three Core Website Vitals?
Core Website Vitals are made up of three criteria: loading, response, and layout shifting times. They are designed to measure how quickly a website feels to users and therefore how positive their perception of the site is. Each vital is divided into good, needs improvement, and poor. A full list of measurements can be found on the Google Support page.
Largest Contentful Paint (LCP)
Largest Contentful Paint is the number of seconds it takes to ‘paint’ the largest part of your website. It could be a block of text, an image, or a banner ad. The measurement is taken after your LCP has finished loading. The lower the LCP time, the better the user experience and the higher the ranking.
The brackets for good to needs improvement follow below:
- 2.5 seconds or less is a good loading time
- 2.5 – 4 seconds counts as needs improvement
- 4+ seconds is a poor loading time
The overall aim of LCP is to measure page loading times.
First Input Delay (FID)
First Input Delay is the time taken between the user clicking on an element of the website, and the desired action being completed. It could be clicking on a page from the navigation menu or selecting a dropdown or tick box on the site.
The measurements for FID are:
- 100ms or less is a good FID
- 100ms – 300ms is an FID that needs improvement
- 300ms+ is a poor FID
The response times for your website aren’t just about search engine rankings either – over 60% of companies with responsive websites report better sales.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift refers to the stability of a page when loading. When you’re scrolling through as the page loads, does content constantly shift? If so, you’ll probably rank poorly on the CLS score. CLS refers to the time it takes a page to ‘settle’ as it loads.
CLS rankings are:
- 0.1 seconds or less is good
- 0.1 – 0.25 seconds needs improvement
- 0..25+ seconds is a poor CLS
There’s nothing more frustrating for a user than clicking a button on a loading page only to find themselves on a different part of the site due to content shifts.
How Are Core Website Vitals Measured?
When Core Website Vitals first launched they could only be measured via the Chrome User Experience (UX) report. Now, they can be viewed via the Search Console, Chrome DevTools, and also the Chrome UX report. Core Website Vital views are also available through open-source software like PageSpeed Insights, Web Vitals, and Lighthouse.
For all the tools, the rules of the Core Website Vitals are:
- If your URL is green, it has passed that vital
- If it is amber then it needs improvement
- If it is red it is performing poorly in that area
While some amber URLs are not terrible on their own, you need majority greens (75+) overall to pass.
Where’s The Best Place To View Core Website Vitals?
While all the tools used to measure Core Website Vitals are useful, the biggest drawback of Lighthouse is that the data may be simulated and not taken from real-life user data. If you score highly on Lighthouse you might want to compare this alongside data from the Chrome UX report, which is taken from Chrome user data. Software like Web Vitals actually pulls its data from the last 28 days of the Chrome UX report.
Although Chrome UX may be the original and most accurate place to view your data, it might not be the easiest way to view it. Page Speed Insights allows you to simply type the URL in and view the metrics for that page. Google Search Console is also extremely accessible as it ranks all your URLs in line with the three vitals in an easily accessible graph.
How Can You Improve Core Website Vitals For Your Website?
Now you’ve been able to measure and interpret your Core Website Vitals, how can you use this knowledge to improve your site performance? Here’s some advice on how to improve each vital.
LCP can be improved by:
- Upgrading your hosting plan – a slow hosting server might be responsible for your slow load times.
- Making sure your images are in the right format – compress and convert your images into the correct format to cut load times.
- Providing the right dimensions for images and embeds – leaving your page to scale an image will add extra time to loading.
Response times can be increased by:
- Removing unessential third party scripts – if pop-ups or ads are slowing down your load times, where possible sacrifice these for improved FID.
- Improving excessive CSS – Simplify and remove excessive CSS on your site.
Improve CLS rates by:
- Using lazy loading – lazy loading means your page loads at the point you scroll, reducing the chances content will move around.
- Reserving spaces for ads – reserve spaces for ads on your page with set dimensions so they don’t overspill and shift during loading.
- Not putting ads above content – putting ads above content may lead the page to shift, lowering your CLS rating.
Core Website Vitals not only measure your user experience but also highlights issues with website performance. Using software like Google Search Console or Page Speed Insights can help you identify where there’s room for improvement.