What are Web Vitals?
Web Vitals are the “quality signals” that Google uses to measure the usability of a website in a variety of ways. Web Developers, Marketers, and SEOs can use these signals as guidance to help improve website performance and user experience.
Performing well on Web Vitals and offering a better user experience can improve customer engagement and can boost the performance of your digital marketing campaigns. Web Vitals are also ranking signals that can help your website’s visibility in search results.
What are Core Web Vitals?
Core Web Vitals are a set of three web page performance metrics that Google considers most important for user experience. Between them, Google aims to measure a page’s usability through load time, interactivity, and content stability.
The three Core Web Vitals are:
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
Largest Contentful Paint (LCP)
Largest Contentful Paint marks the point at which the largest text or images is “painted” (can be viewed) on the page.
This is usually a featured image or an H1 tag, but could be any large element, such as an opening paragraph, a background image, or a video. For your WebPage, Google’s PageSpeed Insights can tell you what it considers the largest content paint element – you will find it under “Diagnostics” in the report (more on this later).
The most common causes of slow LCP are large files such as embedded videos or large, unoptimised images. You will often notice this with education or cooking recipe sites, where empty space can suddenly display video content after the rest of the page loads.
First Input Delay (FID)
First Input Delay is a measurement of the amount of time it takes for the page to respond to user interactions – such as clicking play on a video, scrolling down the page, or filling out a form.
FID is something we have all experienced on mobile devices when using a poor 4G connection, where everything takes a long time to load, and you are left tapping on your phone screen and waiting for the page to become responsive. When this happens, do you want to wait or do you try the next result?
When measuring your site’s FID, it is also good to consider its “Total Blocking Time” (TBT) – another vital that Google monitors and reports on, which identifies and measures the tasks that prevent the user from interacting with the page.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures how much your page’s content and visible elements move on the screen as it loads. If you have ever tried to read an article and found yourself pushed down the page as an ad or another element loads in above the text, you have experienced CLS.
Two Easy Ways to Check Your Core Web Vitals
A website’s Core Web Vitals can be monitored from any web browser using Google’s PageSpeed Insights, a free online tool.
How to Check Core Web Vitals in Google PageSpeed Insights
- Navigate to Google’s PageSpeed Insights tool
- Copy and paste the URL of a page you want to check into the bar and click “Analyze”.
- You will receive a score and a report on your page’s performance.
- Select “desktop” or “mobile”, in the top left corner of the page to see insights for each platform.
- Under the “Lab Data” header, you will see a list of metrics – Core Web Vitals are marked with a blue “bookmark” icon.
- If your site receives enough traffic, you will also see “Field Data” and “Origin Summary” headers with additional scores. Unlike lab data, this information is collected from visitors to your site and includes a score for your First Input Delay Core Web Vital.
While other metrics play an important part in scoring your WebPage performance, Largest Contentful Paint, First Input Delay and Cumulative Layout Shift are how Google gauges your page’s loading, interactivity, and visual stability, respectively.
As well as having an impact on your SEO, these metrics play a key role in measuring the user experience of your site, which can in turn affect your conversion rates and customer engagement. Performing well on web vitals may be the difference between failure and success in your digital campaigns and could help you make the most of your online revenue streams.
Checking Core Web Vitals in Google Lighthouse
If you use the Google Chrome browser, you can also run a report directly in the browser using Lighthouse. This is a tool that powers PageSpeed Insights and many other website performance monitoring solutions.
To use Lighthouse:
- Open the WebPage you want to check in the Google Chrome browser.
- Right-click on the page and click ‘inspect’ from the drop-down, or use this shortcut to open developer tools – PC: Press Ctrl + Shift + i. Mac: Press ⌘ + Shift + I.
- Click on the “lighthouse” tab in the developer panel.
- Select the categories and platform you want to test on from the list.
- Click “generate report”.
- Core Web Vitals will appear in the “performance” section.
Google recommends running Lighthouse in an incognito window to get an accurate result. This is because browser plugins can use system resources, potentially slowing down the page and skewing results. Opening an incognito browser window is simple (PC: Press Ctrl + Shift + N. Mac: Press ⌘ + Shift + N.).
Quick tips for improving your Core Web Vitals
Below are some tips you can use to improve your Core Web Vitals:
Improving Largest Contentful Paint (LCP)
To improve your Largest Contentful Paint, first determine which element is currently read as your LCP element using PageSpeed Insights. Your report will contain a snippet of code and a screenshot highlighting the asset. If this asset is an image, optimise it to reduce its size and consider serving it in WEBP format.
If you are using a CMS that supports plugins, ensure that you have no unnecessary plugins on your installation and that you are running as few as possible. Plugins and themes are “render-blocking” resources (code that browsers will read before loading a page), and too many lines of code from them can slow down your page times.
Improving First Input Delay (FID)
The higher the request count and the larger the transfer size for your page, the longer it takes to load and become responsive.
Your request count is the number of times the page asks for a resource when loading. The transfer size is the total size of all requests for a resource. In PageSpeed Insights, this information can be found in the Diagnostic section, and is categorised by resource type.
Keep your server request counts low by avoiding multiple page redirects, combining images using CSS sprites and removing third-party scripts.
Keep your server transfer sizes small by compressing text resources, “minifying” your CSS and JavaScript files (optimising the files to make them smaller) and properly sizing and compressing your images.
As well as minifying your JavaScript files, you can further optimise how they execute on the site by breaking up long-running code into smaller tasks that can be ran together, deferred, or conditionally loaded to ensure that your site only loads critical JavaScript on the first paint.
A detailed list of best-practice methods for improving how quickly your site responds to user interactions can be found here.
Improving Cumulative Layout Shift (CLS)
Factors that increase the chances of cumulative layout shift include advertisements, dynamic content, images and videos. If you serve ads on your site, do not place them above your existing content, and consider how behaviour such as expanding on mouse-over can affect other elements on the page.
For images and videos, avoid using automatic sizing and instead define the width and height attributes. Alternatively, style them within CSS boxes that define the width and height for the space they need.
Are Core Web Vitals Important for SEO?
At the start of 2021, most websites that ranked on the first two pages of a Google search failed to pass the minimum requirements set out in Google’s Core Web Vitals, with 96% of sites failing the test on desktop, and 90% failing the test on mobile.
While these sites may still be successful at bringing in traffic, this means that they’re failing to deliver a good on-page experience and are likely missing out on opportunities to engage with and convert their visitors.
However, sites that rank in the top 3 positions of searches typically perform well in Core Vitals. Despite the Page Experience Update only arriving in June 2021, there is already a correlation between performing well on Google Search and performing well on Cumulative Layout Shift, Largest Contentful Paint and First Input Delay/Total Blocking Time metrics. This is also true for the other web vitals.
This year’s algorithm update will lead Core Web Vitals to play a larger role in SEO rankings than they have had before. However, it is important to note that page speed, Core Web Vitals, and usability are just a few of hundreds of different ranking factors that Google considers in its search results.
So, although Core Web Vitals are becoming more important and shouldn’t be ignored, they are unlikely to have a dramatic, immediate impact on your current rankings, unless your search competitors offer a significantly better onsite experience.
It’s important that you don’t neglect the rest of your SEO strategy – your content, on-page SEO and backlink profile are still the most important ranking signals for Google and other search engines.
Benchmark Your Competitors and Sites in your Industry
Measuring your website against Google’s recommended performance benchmarks is great for making general improvements, but it shouldn’t be taken as gospel. Be realistic with your goals. If you have a large website with lots of video content, image galleries and interactive elements, you will have a harder time optimising site speed to compete with leaner, text-only blogs.
A benchmark against your SERP competitors and other businesses in your industry will offer more value and give you a better insight into where you might be falling behind.
After analysing your own website, run PageSpeed Insights reports on your competitors’ best ranking URLs, see how they perform and compare their results to yours, then focus on improving your site’s speed and Core Web Vitals to beat their scores. If you are already competitive, consider focusing on your SEO strategy in other areas before spending time and resources on web vitals.
For a quick list of actionable tips to improve your website speed and core web vitals, check out our guide here. If you require help implementing improvements, conducting an audit of your site, or developing an SEO strategy, please don’t hesitate to get in touch with our team.
