Skip to main content
whitep4nth3r logo

24 Jul 2022

2 min read

How to view Google Lighthouse scores for your site in Netlify

Install the integration. Check your scores. Profit.

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.

Further reading

Check out our documentation for further reading and information about extra features available to paid Netlify accounts. We have a lot planned for this feature and will be adding functionality regularly — but we’d also love to hear your thoughts! Please share your feedback about this experimental feature and tell us what you think. Happy Lighthousing! 👩🏽‍💻

Originally posted on www.netlify.com

Want weird stuff in your inbox?

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

Subscribe

Salma in her office, backlit with pink, smiling and looking into the camera.

Salma Alam-Naylor

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

Related posts

13 Feb 2022

How I improved your Google Lighthouse SEO score with a lot of research and one quick PR

Why has Google Lighthouse been penalising us for canonical links on different domains? I set out to solve this conundrum once and for all.

Web Dev 3 min read →

22 Feb 2022

Build a CMS preview workflow for your Jamstack site

Learn how to preview your draft content stored in Contentful by building a custom app that builds a preview branch of your static site.

Tutorials 10 min read →