Close

August 10, 2017

Measure Client-side Performance using Lighthouse

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 NaveenKumar Namachivayam

Hi there! is a passionate and experienced Performance Test Analyst based in Chicago, USA with skill sets in Manual Testing, Test Automation, Performance Testing, and Test Estimation. He loves to learn and experiment new trends and models in Software Testing. Please stop by at his personal blogs: Excel Blog, DealsBrook, NaveenKumarN.in, and Affiliate Insights blog and Software Testing Memes.

Leave a Reply

Your email address will not be published. Required fields are marked *