Running lighthouse in node
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 😄