Google announced the Core Web Vitals (CWV) in May 2020 and rolled it out the following year to measure critical aspects of user experience (UX) when loading a page. Google’s Core Web Vitals are a set of real-world measurements used to measure essential elements of the user experience when loading a webpage starting in June 2021. So how does one go about a core web vitals audit?
What are Core Web Vitals?
Core Web Vitals are measures used to assess a website’s loading speed, interactivity, and visual consistency. All three are linked to site speed somehow, which we’ve known for a long time to be crucial for both search engines and people. They’re also looking into labelling search results with symbols to identify pages with excellent or terrible CWV scores and being small signals for Google’s scoring.
Core Web Vitals Metrics
Each of these metrics measures a different user experience – how fast the page loads, how the user interacts with a page and the visual stability of the page.
The render time of the largest visible content element within the viewport is reported by Largest Contentful Paint (LCP). The Largest Contentful Paint (LCP) measures a page’s total loading speed – the faster it loads, the better. When most of the content has been put into the timeline, it will be noted.
Cumulative Layout Shift (CLS) is a metric that calculates the total of all individual layout shift scores for each unexpected layout shift that occurs over the page’s lifetime. A page’s Cumulative Layout Shift (CLS) determines how stable a URL is while it loads. For example, we’ve all experienced the annoying experience of reading a news site and having the article text drop down as the navigation loads, and CLS is a measurement of that across an entire page.
Core Web Vitals Assessment
The Chrome User Experience Report provides real-world user metrics for Core Web Vitals (CrUX). When actual user data is unavailable, simulated lab data is used to assess performance. This CrUX statistics relies on user visits to a page during the previous 28 days.
Each web Vital is categorised into three categories: good, needs improvement, or poor. A page must score ‘Good’ on all three criteria to ‘pass’ the Core Web Vital Assessment. After passing the Core Web Vital Assessment, a URL will receive the highest ranking advantage.
How To View A Page Core Web Vitals
Your site’s Core Web Vitals are recorded and stored within the Chrome User Experience Report, there are various APIs to connect with this, but you can most commonly see them in two places. First, PageSpeed Insights (PSI) can be used to check whether or not a URL has passed the Core Web Vitals assessment, which assigns a blue flag to each web Vital.
Alternatively, you can look at a sample of Google Search Console (GSC) pages to see how they perform over time. However, you can only view one URL at a time in PSI, and you can only see whether a page is designated good, requires work, or terrible in GSC, not the individual scores.
Best Practices For A Successful Core Web Vitals Audit
How do you achieve a successful core web vitals audit? What’s the best way to analyse, measure and improve your CWV report in 2022? There are different approaches to take, and we’re going to look at them. Understanding Core Web Vitals is one thing; finding a mechanism to audit and communicate the issues is another.
Core Web Vitals Audit Using Screaming Frog
You can use the Screaming Frog SEO Spider and PageSpeed Insights API to collect and measure your CWV data.
Step 1: Connect the PageSpeed Insights API to Screaming Frog
You’ll be able to obtain PageSpeed Insights statistics and recommendations on a page-by-page basis as a result of this. You’ll only get a certain amount of PageSpeed Insights queries each day, which should be fine for smaller sites; however, for larger areas, you’ll be able to apply learnings from the pages that do receive queries to the remainder of the site.
Step 2: Select your metrics
Click the ‘Metrics’ tab once you’ve connected to the PSI API. First, decide whether you want data for your mobile or desktop device. Then, for each URL, choose the data from PageSpeed Insights you want to be reported. Finally, click “Metrics” once you’ve connected. You’ll see the following metrics:
- Overview: Provides broad overview information for the page, such as the page’s size and potential load reductions.
- CrUx Metrics: The Chrome User Experience Report provided the data. If field data from real-life, opted-in users is available, it will appear here.
- Lighthouse Metrics: The LCP, TBT, and CLS scores, as well as the majority of the lab data we use in the audit, come from here.
- Opportunities: Provides recommendations for improving page speed that is particular to each page.
- Diagnostics: Provides extra information about the crawled website’s overall performance.
Step 3: Crawl the Website
Copy the domain of the website you’re crawling and paste it into the “Enter URL to Spider” box at the top of the crawler. You’ll notice both a “Crawl” and an “API” progress bar in the top right-hand corner as the site gets crawled. Before evaluating your data, you must wait for both of these to reach 100%.
Step 4: Report the Issue
It’s crucial you first express the scope of the issue. To do so, look at the percentage of pages that fail to meet the Core Web Vital’s minimal standards. Select “PageSpeed” and then “Export” from the top navigation bar.
Step 5: Report the issues and make necessary recommendations
This is where we turn problems into solutions during the audit. We’re aware that a certain number of pages fail to meet Core Web Vitals’ basic standards, but what can we (or the client) do about it? This is where the PageSpeed Insights API shines the brightest. Scroll down to “PageSpeed” under the “Overview” tab on the right-hand side. The list of issues relating to page performance and, for the most part, Core Web Vitals may be found here.
Step 6: Report the issues specific to each page
The next step is to report examples of issues related to each page. That way, you’re able to get a more comprehensive dataset. It also allows the developers to immediately grasp what the problem is and whether it is something that can be resolved or not.
Step 7: Crawl the site once more
When carrying out a core web vitals audit, you want to resolve all issues. Then, after fixing the problems, go back to step one and re-visit the site to check how things have changed. This is where your percentages of pages not reaching Core Web Vitals minimal standards will come in handy, as they provide a quick and easy way to see if your modifications have had the desired effect.
The 3 Step Approach
Aside from the above-mentioned Core web vitals method using Screaming Frog, there’s another method. This is often called Web Vitals Loop. It’s a 3-step process that includes:
- A – Evaluate the web health and identify pain points
- B – Troubleshoot and improve underperforming pages.
- C – Monitor and tweak
Approach A: Evaluation and Identification
In the first approach, there are essential questions: How is the site’s performance? Are things better, or have they gotten worse? What are the most critical pages, devices and KPIs to monitor? Some of the tools to help you audit in this approach include:
- CrUX Dashboard – This tool gives you a quick overview of your website’s CWV analytics. It also provides information on past patterns and user demographics.
- Search Console – The Core Web Vitals report in Google Search Console can assist developers in finding pages that need attention based on CWV data.
- PageSpeed Insights – To dig deeper into monitoring UX metrics on specific pages, Google’s PageSpeed Insights tool is recommended.
- Individual scores can be compared to build a priority list of pages that need CWV optimisations.
Approach B: Troubleshoot and Optimise
In this phase of core web vitals audit, developers must ask these questions – what is the most effective strategy to optimise these pages? What are the low-hanging fruits that we can take care of first, and What repairs require more significant forethought? It would be best if you had the following tools in this phase.
- Lighthouse – Developers may use Lighthouse to find load time optimisations to improve the user experience.
- Web Vitals Extension – The Web Vitals Extension takes measurements during page interaction, whereas Lighthouse only measures metrics until the page is loaded and doesn’t cover First Input Display (FID).
- Chrome Dev Tools – You can use this tool to see the impact of layout shifts in real-time, remove unused code, and test any code modifications, among other things.
Approach C: Monitor and Develop
After you’ve dedicated time and effort to find and execute CWV optimisation opportunities, you must continue monitoring performance and making any necessary improvements. According to studies, most sites drop after six months of seeing progress. Some of the tools used here include:
- CrUX API
- PageSpeed Insights
- Web vitals
Final Thoughts On Core Web Vitals Audit
The introduction of Core Web Vitals was a significant step in making the web more accessible to a broader range of users. However, improving the site’s technical performance is unlikely to generate traffic to your site. This is one of the many page experience signals that Google considers when ranking a website in the search results. Therefore, it’s crucial you continuously monitor and improve.
Ready to make your business scalable? You can book a free consultation to get started.