Measure your website’s performance with Google Lighthouse in Automated pipelines

Ever Thought About It?

Have you ever wonder, how good your website performs in the client-side? If you never cared about it, well there is a small surprise for you:

Google Research found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.

Performance plays a major role in the success of any online venture. Here are some case studies that show how high-performing sites engage and retain users better than low-performing ones:

• Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.
• COOK increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% when they reduced average page load time by 850 milliseconds.

As a site begins to load, there’s a period of time where users wait for content to appear. Until this happens, there’s no user experience to speak of. This lack of experience is fleeting on fast connections. On slower connections, however, users are forced to wait. Users may experience more problems as page resources slowly trickle in. So, you basically need to know how your web-page behaves under different conditions and how good the user experience it carries.

Let’s see how you can tackle this situation while developing your application.

Note

This article was intended to provide an overview of integrating Lighthouse with Protractor. If you want to use Lighthouse with web automation tools, you can find the packages here:

• Lighthouse TestCafe
• Lighthouse Cypress
• Lighthouse Playwright
• Lighthouse Puppeteer

Here it is — Google Lighthouse

Lighthouse is a tool developed by Google that analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

Basically, Lighthouse works with developer best practices and performance metrics. It runs checks on a web app and gives you feedback on errors, practices below standard, tips for better performance and how to fix them.

According to Google Developers Docs

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can use Lighthouse in two ways:

1. Use Lighthouse as command-line execution
2. Use Lighthouse in integration with Test Automation Tool

Here we will mostly talk about the second point. So, let's get started :)

Lighthouse Protractor Integration

Although the below section deals with Protractor+jasmine setup, those lighthouse methods can be easily integrated with any modern test automation tool. Protractor is a great automation tool and has been a lifesaver for most of the JS automation developers. Speaking of which, do you know? Protractor is now efficient with React App testing …

Okay, lets come back to the topic!

You can find the Github project here.

Let’s configure the project piece by piece and understand the different components.

First thing first, configure your package.json file with all the dependencies.

Now, you need to install the dependencies. You can install the dependencies via node. Just execute an install command at the root of the project directory.

npm install

Tweak Protractor Configuration

Here comes the actual tricky part. Lighthouse always needs a port to perform the audit. So, you need to run Protractor in a specific debugging port.

• Set the remote debugging port of protractor to 4444.
• Turn Off “directConnect : true”

Create Lighthouse Expectation File

You need to create an expectation file for Lighthouse so that you can use the file later to match the actual performance of the page with the expected data.

You can find the expectation file in the project specs > lighthouse > lighthouse.expectation.json

{
"accessibilityScore": 90,
"performanceScore": 75,
"bestPracticeScore": 75,
"progressiveWebAppScore": 75
}

Lighthouse Helper Methods

It's always a good idea to create re-usable helper methods. Lighthouse helper methods help you to

• Perform lighthouse Audit
• Fetch run time lighthouse scores of different segments
• Assert the run time score with the expected data
• Generate HTML report

Lighthouse provides you a handy method to perform the audit in your webpage considering you have provided the correct URL and configuration object.

Your configuration object also needs to pint to port 4444 as you already set Protractor debugging port to the same. So, your configuration object should look like:

const opts = {
logLevel: "info",
output: "json",
port: 4444
};

You can perform the audit by executing the below line:

const lhr = await lighthouse(url, opts);

Then you can use the lhr variable to generate HTML and perform assertions.

Create Your Specs Files

Now you are pretty much ready to write your spec files to scan different pages on your website. Below is an example to navigate to the Angular.io page and perform a lighthouse audit on the page.

Here is a small demo of the execution

Lighthouse Protractor Runner

Here is the HTML report out of it:

Parking Lot

Lighthouse can be a lifesaver for you if you use this tool wisely. I highly suggest you add lighthouse with your test automation tool and integrate it with the DevOps pipeline.

Happy coding!

And…If you don’t clap, this will not work. ah, just kidding!