Google will launch Core Web Vitals (CWV) update by May 2021 as a part of their ranking algorithm. The company has already provided details of the new ranking signals. So, organisations have plenty of time to prepare for the same.
Meanwhile, Google also enhanced the Core Web Vitals measurement capabilities to many of its existing tools. Now, all the popular tools by Google support measurement of Core Web Vitals to help developers diagnose and fix user experience issues quickly.
Related: Core Web Vitals For Google SEO
Here are the 7 tools to perform the Core Web Vitals test:
1 – Lighthouse
The latest version of Lighthouse is 6.0, was released on 19th May 2020. This is an automated website auditing tool to help developers diagnose and find ways to improve the user experience of their sites.
The audit report by Lighthouse 6.0 looks like the one below. You can see there are a total of six metrics, plus the performance metrics.
Three out of these metrics are newly introduced in this version. Two of them are the Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) – are lab implementations of Core Web Vitals. Third new metric – Total Blocking Time (TBT) is similar to the field metric First Input Delay (FID), another Core Web Vitals metric.
Related: Steps To Optimize Your Site For Core Web Vitals
With these metrics, the tool helps developers measure user experience quality in a lab environment from different angles.
2 – PageSpeed Insights
PageSpeed Insights PSI is another way to measure the webpage performance. The tool provides insights in how real-world users experience the webpage. It also offers suggestions on ways to improve the page’s performance, accessibility, and SEO.
Related: Best Ways To Increase Site Speed
PageSpeed Insights reports show the lab and field performance of a page on both mobile and desktop devices.
The PageSpeed Insights report looks like the one below.
As the PSI API is updated to use Lighthouse 6.0, it supports measuring Core Web Vitals in both the Lab Data and Field Data sections of the report.
Both sections provide a detailed overview of the pages that need improvement. You can also clearly determine if your page meets the parameters of a good user experience across all Core Web Vitals.
Also, PSI helps you with an opportunity to improve each web page individually.
3 – Chrome UX Report
The Chrome UX Report (CrUX) holds dataset of real user experience. This is the data from Chrome Browser Users who have chosen for usage reports and sync their browsing history across devices.
When you request a report from PageSpeed Insights, you get access to the data. Also, it will enable you to measure field versions of all the Core Web Vitals.
Here is how the newly redesigned CrUX Dashboard looks.
The report shows every detail of CWV metrics, including LCP, FID, CLS, TTFB, FB, and DCL. Besides, you can also see device distribution and connection distribution.
Related: How To Fix FCP Issue Longer Than 3 Seconds
The idea is to provide an understanding of the distribution of real-world user experiences on the developer’s site or their competitors’ websites.
Chrome UX Report gives you an effective solution to know how your site actually performs for your users by measuring its performance in the field.
4 – Chrome DevTools
Chrome DevTools helps you find and fix visual instability issues on your page. You can see a new Experience section in the Chrome DevTools Performance panel. It is to help you detect unexpected layout shifts.
You can check out its Summary tab and select a Layout Shift to view the details. If you hover over the Moved from and Moved to fields, you can see where the shift itself occurred.
The tool also measures Total Blocking Time (TBT). It is useful while improving First Input Delay (FID).
Related: How To Fix LCP Issue: Longer Than 4s (Desktop) or (Mobile)
You can see TBT in the footer of the Chrome DevTools Performance panel.
5 – Search Console
The Search Console now contains the new Core Web Vitals report. It analyses the web pages based on real-world (field) data from CrUX and finds the pages that require improvement.
The performance of the URL is grouped by status, metric type and URL group.
In the report, you can observe that the type section describes the three Core Web Vitals metrics: LCP, FID, and CLS.
After identifying the pages that need attention, you can use PageSpeed Insights to know about the specific optimization suggestions.
6 – Web Vitals Extension
The Web Vitals Extension is also based on the three Core Web Vitals metrics, but in real-time for (desktop) Google Chrome. The tool assesses the performance of Core Web Vitals when you browse the web. This is helpful in the initial stages of page development.
The extension is downloadable from the Chrome Web Store.
Related: Page Experience Update: Optimization Guide
7 – web.dev’s Measure Tool
The web.dev/measure tool supports the Core Web Vitals metrics and is powered by PageSpeed Insights. It measures the performance of the web page over time. Also, it provides a prioritized list of guides and solutions to improve the page.
Workflow To Optimize User Experience
Each of the above tools mentioned has its individual role in optimizing user-experience with Core Web Vitals. Follow the below workflow to optimize your site:
Step 1: Search Console will generate a new Core Web Vitals report. With this report, identify the groups of pages that require optimization, based on field data.
Step 2: After identifying the pages, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. You can obtain PageSpeed Insights (PSI) through the Search Console. Otherwise, you can also enter a URL on PSI directly.
Step 3: Once you are ready to optimize your site locally in the lab, use Lighthouse and Chrome DevTools. It will measure Core Web Vitals and get actionable guidance on what you need to fix. With the Web Vitals Chrome extension, you will have a real-time view of metrics on desktop.
Step 4: If you want a custom dashboard of Core Web Vitals, you can use the updated CrUX Dashboard or new Chrome UX Report API. It will help you with field data or PageSpeed Insights API for lab data.
Step 5: To optimize your site, use web.dev/measure. It will measure your page and display a prioritized set of guides. Besides, it will also provide codelabs using PSI data.
Step 6: This is the final step, where you have to use Lighthouse CI on pull requests. It will ensure there are no regressions in Core Web Vitals before making changes to production.
Conclusion
As Core Web Vitals being one of the primary Google ranking factors, testing the web pages to meet the given threshold becomes necessary. Thankfully, Google has upgraded its popular testing tools as per the CWV.
Using the tools above, you cannot only detect the issues in detail but also fix the problem to rank better in the search engine result. Use these tools as per the given workflow and get yourself ready to rank the best before Google finally upgrades its algorithm.
