If performance is important to you, having the right tools to test it is critical. These tools could include the developer tools that we find within modern browsers, or online tools like WebPageTest or Google’s PageSpeed Insights. Today, we’ll be looking at another tool. But unlike some online tools out there, it can be installed locally, giving us the ability to test pages (including local pages) from both the browser as well as the command line.
Lighthouse
The tool I’m referring to is Google’s Lighthouse, an open-source, automated tool for testing the quality of web apps. The nice thing about it is not only can you intall it as a browser extension, but you can also run it from the command line, or even as a Node module.
The tool itself tests a number of different things, including areas for:
- Progressive Web Apps
- Best Practices
- Performance Metrics
- Fancier stuff
I tend to focus in on the performance metrics, but the other information is good to have, and can be extremely useful, depending on your application.
Browser Extension
One way to use the tool is to install the Chrome Extension (the extension is for Chrome 54 or later)
Once installed, there will be a little Lighthouse icon in your browser. Clicking this button will give you the choice to either run the tests, or to configure the options to include in the generated report. Providing a thorough audit of the current page is as simple as selecting the options you want, and pressing ‘Generate Report’.
Command Line
If you want to utilize Lighthouse via the command line, or as a node module, you can do that too. Note: It requires Node, v5+
$ npm install -g lighthouse
Once installed, all you have to do is run lighthouse https://example.com with the URL you want to audit.
There are a number of options that you can use with the CLI. For a list of them, you can run lighthouse —help or visit the Lighthouse Github page.
Performance Specific
Like the browser extension, you can turn on/off the options you want. For instance, if you only want to run a performance subset of the tests, you can pass in the --perf flag:
$ lighthouse --perf https://example.com
You can also use the --quiet flag to hide the status updates as it’s running the tests.
Local Testing
One of the benefits of having the tool installed locally is that it allows easy performance testing on local dev sites as well as remote sites.
$ lighthouse --perf https://localhost:3000
Lighthouse also states that report results are never processed or beaconed to a remote server, so everything stays local.
Another Tool in the Tool Belt
Currently, I’m using it primarily for performance testing, but if you’re interested in Progressive Web Apps, it has a lot of tests that it can run to ensure that the PWAs you build meet best practices and guidelines. And with the CLI, you can quickly run a performance audit of a page (local or remote), and get a list of things that may (or may not) need attention. For me, being able to see a comprehensive list of performance related metrics right from the command line has been nice.
Whether you use the CLI, or prefer to stay in the browser, Lighthouse offers options for both, and is worth a test drive. At the minimum, it’s another tool in the tool belt whenever you’re looking to audit and optimize the performance of your site.
Links
- Lighthouse overview
- Lighthouse Github page
- Lighthouse Chrome extension (the extension is for Chome 54 or later)