Skip to content
Tools to measure Core Web Vitals
June 04, 2021 | 7 min read
2. Lighthouse
Lighthouse is an automatic website auditing tool that assists developers in diagnosing problems and identifying possibilities to improve their sites’ user experience. It assesses numerous aspects of user experience quality in a lab setting, including performance and accessibility. Lighthouse’s most recent version (6.0, published in mid-May 2020) features new audits, metrics, and a newly constructed performance score.
In Lighthouse 6.0, three new metrics are added to the report. Two of these new metrics, Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), are Core Web Vitals lab implementations that give critical diagnostic information for enhancing user experience. Given their relevance in measuring user experience, the new metrics are not only assessed and provided in the report but are also considered in the performance score calculation.
You Might Be Interested In: Magento 2 Speed Optimization Services
Total Blocking Time (TBT), the third new measure added to Lighthouse, corresponds strongly with the field measure First Input Delay (FID), another Core Web Vitals statistic. Following the suggestions in the Lighthouse report and improving against your scores enables you to offer your users the greatest possible experience.
Lighthouse’s products have all updated to match the most recent version, including Lighthouse CI, which allows you to simply measure your Core Web Vitals on pull requests before they’re merged and deployed.
Check out the What’s New in Lighthouse 6.0 blog article to learn more about the newest Lighthouse upgrades.
3. PageSpeed Insights
PageSpeed Insights (PSI) provides information on a page’s lab and field performance on mobile and desktop devices. The tool gives an overview of how real-world people perceive the page (driven by the Chrome UX Report) as well as a collection of practical recommendations for site owners on how to enhance page experience (provided by Lighthouse).
PageSpeed Insights and the PageSpeed Insights API have also been updated to use Lighthouse 6.0 behind the scenes and now enable monitoring Core Web Vitals in both the lab and field portions of the report! As demonstrated here, core web vitals are marked with a blue ribbon.
While Search Console offers an excellent overview of groupings of pages that require work, PSI assists in identifying per-page chances to improve page experience. In PSI, you can see if your page satisfies the requirements for a positive experience across all Core Web Vitals at the top of the report, which is indicated bypasses the Core Web Vitals assessment or does not pass the Core Web Vitals evaluation
4. CrUX
The Chrome UX Report (CrUX) is a publicly available dataset including real-world user experience data from millions of websites. It assesses the field versions of all Core Web Vitals. CrUX data, as opposed to lab data, originates from opted-in users in the field. Developers may utilize this data to study the distribution of real-world user experiences on their own or rivals’ websites. Even if your site does not have RUM, CrUX can give a quick and straightforward approach to analyze your Core Web Vitals. The CrUX dataset on BigQuery contains fine-grained performance statistics for all Core Web Vitals and is available in monthly origin-level snapshots.
The only way to properly understand how your site works for your users is to evaluate its performance in the field as those people load and engage with it. This form of assessment is known as Real User Monitoring (or RUM for short). Even if you don’t have RUM on your site, CrUX can give a quick and easy approach to analyze your Core Web Vitals.
The CrUX API
The CrUX API is a simple and free method to incorporate origin and URL-level quality monitoring into your development workflows for the following field metrics:
- Largest Contentful Paint
- Cumulative Layout Shift
- First Input Delay
- First Contentful Paint
Developers may search for an origin or URL and filter the results based on several form factors. The API is updated daily and summarises data from the past 28 days (unlike the BigQuery dataset, which is aggregated monthly). The API is likewise subject to the same relaxed public API quotas as our other API, the PageSpeed Insights API (25,000 requests per day).
CrUX Dashboard Redesign
The newly updated CrUX Dashboard enables you to quickly follow an origin’s performance over time, and it can now be used to monitor the distributions of all Core Web Vitals indicators. Check out our web.dev guide to getting started with the dashboard.
To make it even simpler to assess how your site is working at a glance, a new Core Web Vitals landing page is offered. We appreciate your input on all CrUX tools; to express your ideas and questions, please contact us through the @ChromeUXReport Twitter account or the Google Group.
5. Chrome DevTools Performance panel
In the Experience section, debug Layout Shift events
A new Experience feature in the Chrome DevTools Performance panel can assist you in detecting unexpected layout alterations. This is useful for identifying and correcting visual instabilities on your website that lead to Cumulative Layout Shift.
To examine the specifics of a Layout Shift, select it and go to the Summary tab. Hover over the Moved from and Moved to fields to see where the shift happened.
In the footer, debug interaction readiness using Total Blocking Time.
Total Blocking Time (TBT) is a statistic that can be assessed in lab instruments and is a good surrogate for First Input Delay. TBT is the entire length of time between First Contentful Paint (FCP) and Time to Interactive (TTI) during which the main thread was stalled for a long enough period of time to impede input responsiveness. Performance enhancements that improve TBT in the lab should lead to better FID in the field.
When you test page performance, TBT is now displayed in the footer of the Chrome DevTools Performance panel:
- Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
- Click the Performance tab.
- Click Record.
- Manually reload the page.
- Wait for the page to load and then stop recording.
6. Search Console
Based on real-world (field) data from CrUX, the new Core Web Vitals report in Search Console assists you in identifying groupings of pages throughout your site that need improvement. URL performance is classified according to status, metric type, and URL group (groups of similar web pages).
The metrics used in the study are LCP, FID, and CLS from Core Web Vitals. If a URL lacks the required quantity of reporting data for these metrics, it is excluded from the report. Try out the new report to obtain a comprehensive perspective of your origin’s performance.
Once you’ve identified a page type with Core Web Vitals concerns, you can utilize PageSpeed Insights to learn about specific optimization recommendations for representative pages.
Once you’ve identified a page type with Core Web Vitals concerns, you can utilize PageSpeed Insights to learn about specific optimization recommendations for representative pages.
web.dev
web.dev/measure lets you track the performance of your page over time and provides a prioritized list of tips and codelabs for improvement. PageSpeed Insights is used to calculate it. The Core Web Vitals metrics are now supported by the measure tool, as demonstrated below:
7. Web Vitals extension
For (desktop) Google Chrome, the Web Vitals extension measures the three Core Web Vitals metrics in real-time. This is useful for detecting difficulties early in your development workflow and as a diagnostic tool for evaluating Core Web Vitals performance while you surf the web.
The Chrome Web Store now has the extension available for download!
8. Final Thoughts
These tools monitor Web Vitals and give us vital insights and recommendations on areas we should work on to enhance website performance, as seen in the examples above. If you have any questions or want to enhance the performance of your site contact us and we will get you all the help you need.
