1

4 Tools to Measure Core Web Vitals

 2 years ago
source link: https://blog.bitsrc.io/tools-to-measure-core-web-vitals-c84c7a845f02
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Lab Testing Tools

The main objective of the lab tools is to evaluate performance throughout the development cycle. As a result, you can establish standards and ensure compliance before releasing the application to production.

Besides, you can simulate the user behaviour on your website and offer reproducible results for debugging.

These tools allow measuring Total Blocking Time (TBT), the total time duration where the website was blocked, preventing user interactions. Let’s take a look at the tools we can use to measure these.

1. Lighthouse

Lighthouse is a new feature available in Chrome DevTools to identify common problems that affect website performance, accessibility and user experience.

With Lighthouse you can measure Core Web Vitals, Cumulative Layout Shift (CLS), and the Largest Contentful Paint (LCP), which are the indications of speed and visual stability.

You can run Lighthouse either in Chrome DevTools, from the command line, or as a Node module. All you need to do is provide an audit URL to Lighthouse. It will perform a sequence of audits on the website, and then it creates a report about how well the page has performed.

1*YFNAJ4yTsYxAsn5RgnhK8A.png?q=20
tools-to-measure-core-web-vitals-c84c7a845f02
Screenshot by Author -Lighthouse Analysis

According to the above analysis, the web page has shown good performance in the Cumulative Layout Shift indicator with 0.006 seconds. However, the Largest Contentful Paint and the Total Blocking Time are well over the approved limits and need to be improved for better performance.

If your score is Good, it will be indicated in green color like LCP, and if your scores are needed to be improved or critical, it will be indicated in Orange or Red.

Likewise, you can easily test all the web pages in your application with Lighthouse and use those reports to deliver the finest experience to end-users.

2. Chrome DevTools Performance Panel

Core Web Vital analysis is just 4 steps away with Chrome DevTools, and all you need to do is:

  1. Open DevTools and navigate to the Performance tab.
  2. Click on the Record button and manually reload the page.
  3. Once the page is reloaded, stop the recording.
1*M05aMMhs4LzSsLtrnTUFKQ.gif?q=20
tools-to-measure-core-web-vitals-c84c7a845f02
How to use Chrome DevTools to measure Core Web Vitals
1*6JpUVgiHjCk8deqLqgk6eg.png?q=20
tools-to-measure-core-web-vitals-c84c7a845f02
Screenshot by Author - DevTools Web Vital Analysis

Like Lighthouse, DevTool’s performance analysis shows all the Core Web Vitals clearly with colors. According to the above example, LCP is showing good results, and it is indicated in Green color while CLS is indicated in red color, which means it is not fully optimized. You can see additional details of these measurements by clicking on them, and TBT is displayed at the bottom left corner of the window.

However, these lab testing tools’ output might not be 100% accurate since there are no real users involved.

As a solution to this problem, Field testing tools were introduced, and let’s see what those are and how we can use them.

Field Testing Tools

As I mentioned, lab testing tools lack the capability of capturing real user involvement. Therefore, we can’t always be sure that our readings are 100% accurate.

Field testing tools can fill this gap and provide more accurate statistics on how real users experience your website.

Therefore field testing tools allow measuring all 3 Core Web Vitals, including First Input Delay (FID), an indicator of interactivity between user and application, which is a unique measurement that is not possible with lab testing tools lack of real user involvement.

So, let's explore some most used field testing tools to see how they work.

3. PageSpeed Insights (PSI)

Google PageSpeed Insights is a leading field-testing tool in performance analysis.

It can generate performance reports for both web and mobile device usage and provide suggestions to improve any issues.

Running PageSpeed Insights on your web page is very straightforward. All you need to do is navigate to the PageSpeed Insights page and enter the web page URL you need to analyze. Within a few seconds, you will receive a complete analysis of your web page like below.

1*C6r7x06p6n4h_S1mpRBQ9g.png?q=20
tools-to-measure-core-web-vitals-c84c7a845f02
Screenshot by Author- The PageSpeed Insights

PSI includes a score at the top of the report, which sums up the page’s performance. Usually, it is recommended to have a score of 90 or above to pass the performance assessment.

Also, PSI will indicate whether your web page meets the required threshold for excellent user experience. It will indicate whether your website passes the Core Web Vitals assessment.

To pass the Web Vitals assessment, it is required to have more than a 75% good rating for all 3 Core Web Vitals.

If there are things to improve, PSI will recommend some changes, and you can focus on those areas to improve your scores.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK