Measure Client-side Performance using Lighthouse Applications which are built on modern web technologies are ubiquitous. Measuring performance and sending results to the project team with 95 percentile response time, CPU/Memory utilization days are gone. It is our (performance testers) responsibility to reflect what the end users are feeling about the performance under test. Performance test report should consist of performance metrics, bottlenecks, and tuning recommendations. In this article, we shall see how to measure client-side performance using Lighthouse Chrome addon.
What is Lighthouse?
Lighthouse is a chrome addon which is open source tool to identify performance and quality issues for web applications. You can download this addon here. Please make sure that you are using the latest version of Chrome. It is one of the highest rated chrome add-ons (as of today 08/09, it has 4.86 stars out of 5 with 110,591 ratings).
How does it work?
Lighthouse using Chrome developer tools under the hood. During the audit, it will simulate various settings, gather the metrics, compares it with the benchmarks and provides you the detailed report in various formats. Here is the quick start guide for your reference.
Let’s dive in
How to install Lighthouse?
Installing Lighthouse is pretty simple. Navigate to Chrome web store and search for lighthouse and press enter key. Then, click on ADD TO CHROME button to install, then click Add Extension.
If you are lazy like me, hit this URL to download it now (make sure that your browser is Chrome).
Once the addon is added, you can see the Lighthouse icon in the Chrome menu as shown below.
How to measure the client-side performance using Lighthouse?
After successful installation of Lighthouse addon, it’s time to test the client-side performance. Open the URL which you want to test its performance. In this case, we are going to use following URL http://stormhelp.saas.hp.com/TruClient/TruClientExamples/html/links.html
Before you begin the testing, make sure that
- Chrome Developer Tools is not open
- Only one tab is open and active
Click on Lighthouse icon in the Chrome menu and then click on Generate Report. Sit back and relax for couple minutes.
Below video shows a quick demo of Lighthouse add-on.
Once the testing is completed, Lighthouse will display the detailed report in blob format as shown below. In the report, you will be able to see the performance donuts, date time stamp, runtime settings, and detailed audits.
By Lighthouse generates performance for four parameters: Progressive Web App, Performance, Accessibility, and Best Practices.
Progressive Web App
Lighthouse validates the URL under test against Progressive Web App Checklist. PWAs are fast, reliable, and engaging web applications which work in offline as well. It checks whether the URL is secured, uses HTTP/2, responsiveness, metadata, cross browser and much more.
Lighthouse captures performance data using chrome developer tools. It displays the timeline view of the snapshot of the URL. Also, it displays paint time, speed index, latency etc. Also, it provides the possible areas to concentrate to improve the performance.
Lighthouse validates the URL under test against this Accessibility guidelines. Our URL under test has better accessibility score (94).
Lighthouse displays best practices to modernize the application. Our URL has a better score of 77. But still, it failed in three audits.
Lighthouse uses below runtime settings for its test. Unfortunately, you cannot change these settings.
Lighthouse provides reports in multiple formats such as HTML and JSON as shown below.
It would be great if Lighthouse comes with the following features.
- Ability to change the runtime settings.
- Export to spreadsheet option
- Quicker result generation
- Specifying the number of iterations
- Online storage of the results
- <Add your feature here in the comments>
Lighthouse add-on is an excellent handy tool for performance testers, developers, and testers. It provides the insights about the performance, recommendations, and best practices. Please add your features to be added in next version of Lighthouse in the comments section. Also, please share your experience with Lighthouse add-on.