Similar to other Dev Tool features with headless Chrome there is a very easy way to use Lighthouse on the website you’re currently on, all within node.
As I mentioned in the other TIL, I usually use puppeteer to automate and test. The ability to automatically run and evaluate Lighthouse performance audits is absolutely awesome.
While setting up this website I also experimented with automatic performance reviews for it, using exactly this, Lighthouse in headless Chrome. And it’s dead simple.
const lighthouse = require('lighthouse'); const launcher = require('chrome-launcher'); const options = { chromeFlags: ['--headless'], }; launcher .launch(options) .then((chrome) => { const url = 'http://my-awesome-website.com'; return lighthouse(url, options, null); }) .then((results) => { // use results.lhr for the JS-consumeable output // https://github.com/GoogleChrome/lighthouse/blob/master/typings/lhr.d.ts // ... });
Specifically with Gatsby I wanted to automate testing my own website during development, which comes with a little bit more (but still surprisingly less than I thought) boilerplate. Essentially we need to build the website, start a node server that serves it on localhost on a specific port, open headless chrome on that port and run the Lighthouse audit on it.
I wrote and published a little CLI tool that lets you do all that within a npm script, also allowing you to actually test your performance against thresholds you can define via additional arguments. You can find more info on that here: https://github.com/julianburr/gatsby-lighthouse-cli
To summarize, performance is important, Lighthouse is amazing to audit your website for performance and best practises and the lighthouse library allows us to automate this process, making it a no brainer imo for website development 😄