Tip of the Day: Automate Google Lighthouse Tests on Your Netlify Build Pipeline

Google Lighthouse is an automation tool for auditing and improving the quality of web pages. Measured metrics include performance, accessibility, SEO, and best practices. It also has a CLI app for command line automation.

Netlify is a platform for modern static website deployment. It’s one of my favourite tools for hosting and testing websites and documentation (e.g., my site and AON3D’s documentation).

With the goal of automating all my workflows, I wanted to combine my site’s Lighthouse audits with a local build and testing pipeline. Fortunately, Netlify also offers a CLI that replicates the hosted build process and can deploy to obfuscated URLs for previewing and testing sites.

Instead of pretty-printing the output, the Netlify CLI can be flagged to output to JSON. With a little help from the fantastic jq (a lightweight and flexible command line JSON processor), we can create a pipeline that automatically performs the following:

1. Builds the site using Netlify
2. Deploys the site to a Netlify preview URL
3. Processes the JSON output to extract the deploy_url using jq
4. Runs a Google Lighthouse audit on the given URL

From the command line, it simply looks like this:

lighthouse --view $(netlify deploy --json | jq -r ".deploy_url")

Broken down, we have:

• lighthouse --view: runs a Lighthouse audit on the given URL
• netlify deploy --json: deploys the current directory to a preview URL, does not pretty-print any output, and outputs the deployment data as JSON
• jq -r ".deploy_url": processes the incoming JSON string, extracts the value of the deploy_url key, and outputs raw strings

This website’s repository contains a Makefile that uses the above process in a production setting.