This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
How to measure web vitals to climb up in Google page rankings.
Core Web Vitals helps you to quickly track and perceive how well your website is doing in terms of performance. Therefore it’s crucial to know them in detail and find the right tools to measure them.
This article will explore different types of tools we can use for Web Vital measurements.
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.
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:
- Open DevTools and navigate to the Performance tab.
- Click on the Record button and manually reload the page.
- Once the page is reloaded, stop the recording.
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.
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.
4. Web Vitals extension
The Chrome Web Vitals extension for desktop is another tool to measure the Core Web Vitals metrics in real-time. This is useful for finding problems slightly earlier in your development cycle and as a diagnostic tool to analyze Core Web Vitals' performance while browsing the web.
The extension is available in the Chrome Web Store to download!
Thereafter you have to navigate to the required page to measure Core Web Vitals by clicking on the extension.
The extension will clearly indicate all 3 Core Web Vitals of your web page using numeric values and standard colors like below.
According to the above measurements, the web pages LCP needs to be improved since it takes 5.78 seconds to load, and it is still waiting for a first input to capture FID.
Although this is very simple, there is a slight disadvantage compared to other tools since this extension doesn’t suggest how you can improve the bad rating. However, I strongly recommend installing this extension because it might become convenient when you need quick reading.
Final Thoughts
As you can see in the above examples, these tools measure Web Vitals and provide us with valuable insights and recommendations on areas we need to focus on to improve the website performance.
I believe you have grasped the methods and tools of measuring Core Web Vitals, and I invite you to use them on your website to improve their performance.
Thank you for reading…!!!
Collaborate on independent components with Bit
Bit is an ultra-extensible tool that lets you author, version, and share independent components.
Use it to build modular design systems, author and deliver micro frontends or simply share components between applications.
Check out Bit’s latest beta version →
Getting Started | Documentation
Learn More
- Web Vitals from Google to Measure User Experience
- Performance Metrics for Front-End Applications
- Progressive Rendering for Better Web App Performance
4 Tools to Measure Core Web Vitals was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
Piumi Liyana Gunawardhana | Sciencx (2021-03-23T23:42:49+00:00) 4 Tools to Measure Core Web Vitals. Retrieved from https://www.scien.cx/2021/03/23/4-tools-to-measure-core-web-vitals/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.