Getting Going with Netlify Plugins
January 12, 2022
Today I installed the Lighthouse build plugin in my blog project!
Now, whenever I run netlify build in my terminal, Netlify will kick off a Lighthouse test to check for performance, accessibility, best practices, SEO, and the progressive web app checklist.
The plugin launches Chrome, runs the audit, gathers the results, shuts down Chrome, and prints the scores from the test directly in the terminal.
Installing the Lighthouse Plugin
Installing the plugin is super easy to do in the Netlify UI.
From your Team Overview page, first pick the site where you want to install the plugin. Then, navigate to Plugins > Plugin Directory and search for Lighthouse in the list. You can also check out the Lighthouse plugin README on GitHub for more info.
After that, nothing happens until the next time you build your site.
Running the Lighthouse Plugin with Netlify Build
The first time I ran netlify build after installing the plugin, I did encounter an error and the plugin didn’t run. No idea why. Probably some kind of user error on my part.
The second time I ran netlify build it worked exactly as I expected and I got results.
On the first go round, my accessibility score came back less than perfect 100 and this caught my attention.
Currently, the way the Lighthouse audit works through build plugins is pretty lean. You get the score, but you don’t get the full report with recommendations exactly like you’d get if you run the Lighthouse score in your browser.
So, I hopped over to Chrome and ran the Lighthouse test again using my browser’s dev tools.
It came back and pointed out the problem: Heading elements not in a sequentially-descending order
womp womp
The offending header was an h3 in my site footer. I swapped it out for an h2 and then ran netlify build again to kick off another Lighthouse audit in my terminal.
Voila!
Issue resolved. Literally 100.
There are still a ton of performance issues I need to look into…but they can wait until tomorrow.
Until then, please enjoy this Glade plug-ins commerical from 1996.