Automating Performance Audit Using Lighthouse

A public-facing website needs to run performance audits regularly to check all the metrics are meeting the requirements. Metrics differ from team to team or project to project. Here the metrics are the performance, accessibility, SEO, best-practices, and paw.

You may also like: WTH Is Azure Lighthouse?

Though there are many ways to run the audits manually, there is a way to automate it using a freeware tool. Interested to know what is the tool and more about it? Come, let's see about Google chrome's Lighthouse.

What Is the Lighthouse?

Lighthouse is an open-source, automated tool by Google Chrome for improving the quality of web pages. Lighthouse can be run directly in chrome from Chrome DevTools, from the command line, or as a Node module.

Here we are going to see how to run it as a node module.

Dependencies

We need two dependencies to be imported to run lighthouse programmatically.

• Lighthouse.
• Chrome launcher — to launch Google Chrome from the node.

Launch Browser

After adding the dependencies, open the page by launching the browser using a chrome launcher with the code below.

The important thing to note is we should assign the port in which chrome is launched to lighthouse opts. Then initiate lighthouse on the same port.

Chrome Opts

Till now we have seen how to open the browser and load a webpage. Let see little more customization to it like adding config file and opts.

Using the below code, we can launch the browser as our wish. Here I have added flags to open chrome in headless mode and save the results as an HTML file. Log level can be set to info so that we can see detailed logs in our console, that is easy to debug. Not adding a log level explicitly will not produce any logs.

Lighthouse Config File

In most cases, we want to run our audits on the web as well as in mobile mode. If you ask me is it possible to automate for both viewports, I would say it is as easy as just adding a config.

By default, Lighthouse opens the page in mobile mode. To open it in desktop mode, we should explicitly set it in the config file. More details about config are here.

After updating the config, please pass it as an argument to Lighthouse as below.

Lighthouse Test

After all the configurations, it is time to write tests. Below is the sample test using mocha where we are asserting the performance score.

With this, we will be able to run tests with console logs. But we always want a complete test report after any test execution, isn't it? It is as simpler as generating a report from lighthouse results.

Note

There is no inbuilt functionality to get the HTML or JSON report from lighthouse automation though it is possible to generate artifacts using CLI mode.

The above modification to the script will generate the test report as an HTML file. Generating the report in JSON format is also possible by updating the opts!

A sample project with proper reporting and test data can be found here.

Thanks for reading!!

Further Reading

Lighthouse: a Powerful Tool Included in Chrome DevTools

Create an Angular 5 PWA With a Perfect Lighthouse Score

React Web Development: A Guide to Develop Progressive Web Applications