How to view Google Lighthouse scores for your site in Netlify

Install the integration. Check your scores. Profit.

⚠️ This post is over two years old and may contain some outdated technical information. Please proceed with caution!

Google Lighthouse is an essential tool in your workflow as a developer. Ensuring that your site’s performance, accessibility, best practises and SEO scores are up to scratch is crucial in building great UX, retaining customers, and ranking well in search engines. But with an ever-expanding toolbox at our disposal in a fast-paced work environment, it can be tricky to keep on top of it all!

How many times have you forgotten to review your Google Lighthouse scores before you’ve pushed out a new feature? If the answer is, “At least once!” then you’re in good hands with Netlify. With the Lighthouse Scores Visualizations plugin, you can view your Google Lighthouse scores — per deploy — right there in the Netlify UI. Let’s turn it on.

And if you're new to Lighthouse Scores, or want to learn more about how they're calculated, check out the Developer's Intro to Core Web Vitals.

Install the Lighthouse Plugin to your site

Before we can enable the visualizations, we need to install the Lighthouse plugin. Skip this step if you’re already using it! Otherwise, navigate to Plugins and search for Lighthouse. Click Install.

The plugins page of Netlify. Lighthouse is in the search box. The lighthouse plugin is shown in the search results with an install button on the right.

Select the site to which you’d like to install the plugin, and confirm.

Install Lighthouse Plugin page. I have searched for whitep4nth3r.com in the search box, and the site is showing in the search results, with an onward action arrow to the right of the result.

You’ll now see Google Lighthouse scores in the logs for each deploy, even if you don’t activate the visualizations. But that’s what we’re here for, right? 😎

Activate the Lighthouse Scores Visualizations plugin in Netlify Labs

Click on your user avatar to open the settings menu, and click on Netlify Labs.

The user settings menu dropdown showing my name, user settings, netlify labs, and sign out.

Scroll down to the Experimental features area, find Lighthouse Score Visualizations, and click Enable. Heads up! Each member of your team will need to activate this individually in Labs.

The experimental features list. All options are blurred out except for Lighthouse Score Visualizations which is the fourth item in the list.

Next, kick off a deploy. When your build is complete, you’ll see a new onPostBuild event from @netlify/plugin-lighthouse in the logs.

The deploy logs, showing the plugin-lighthouse task starting.

When your deploy is complete, scroll up, and you'll see your Google Lighthouse scores summary displayed beautifully at the top of the page! Never miss an unexpected score change again — even if you forget to check before you push. Amazing.

Published deploy details with the usual links to open published deploy and lock publishing to this deploy. Below is a lighthouse summary section, which shows the following scores. 100 performance, 100 accessibility, 100 best practices, 100 SEO, 80 progressive web app.

Like weird newsletters?

Join 395+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Salma is looking straight at you, sat at her desk. Behind her is a wooden wall with VHS style art on it depicting HTML and CSS in VHS cover art form, there's a bit of a shelf behind her on the right where you can see a plant and a GitHub stars trophy. In the foreground there is a microphone. She is folding her arms, wearing a black high next top and thick rimmed black glasses, sitting on a cream chair that you can see the back of. To the left behind her there is a glimpse of a pink patterned chair and another plant.

Salma Alam-Naylor

I'm a software engineer, developer educator, and live streamer. I help developers build cool stuff with blog posts, videos, live coding and open source projects.