Measure Client-side Performance using Lighthouse

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).

Measure Client-side Performance using Lighthouse
Measure Client-side Performance using Lighthouse

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.

How to install Lighthouse?
How to install Lighthouse?

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.

Chrome menu
Chrome menu

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.

Generate Report
Generate Report

Below video shows a quick demo of Lighthouse add-on.

Lighthouse Report

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.

Lighthouse Report
Lighthouse Report

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.

Progressive Web App
Progressive Web App

Performance

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.

Performance
Performance

Accessibility

Lighthouse validates the URL under test against this Accessibility guidelines. Our URL under test has better accessibility score (94).

Accessibility
Accessibility

Best Practices

Lighthouse displays best practices to modernize the application. Our URL has a better score of 77. But still, it failed in three audits.

Best Practices
Best Practices

Runtime Settings

Lighthouse uses below runtime settings for its test. Unfortunately, you cannot change these settings.

Runtime Settings
Runtime Settings

Lighthouse Reports

Lighthouse provides reports in multiple formats such as HTML and JSON as shown below.

Lighthouse Reports
Lighthouse Reports

Features missing

It would be great if Lighthouse comes with the following features.

  1. Ability to change the runtime settings.
  2. Export to spreadsheet option
  3. Quicker result generation
  4. Specifying the number of iterations
  5. Online storage of the results
  6. <Add your feature here in the comments>

Overall

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.

About the Author

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hamster - Launch JMeter Recent Test Plans SwiftlyDownload for free
+
Share via
Copy link