DEV Community

Linda
Linda

Posted on

5 1

How to check Lighthouse scores on Chrome or Firefox

Lighthouse Scores

I am starting a Lighthouse Series, where I go into details on how to improve a website's Lighthouse scores and realized some of my readers might need a guide on how to check the scores of a website hence this quick article.

Here is a list of articles in the Series. I will update the list until the series is complete.

How to Improve Lighthouse Score - Search Engine Optimization (SEO)

Install Chrome or Firefox Browser

Lighthouse is only available on Chrome and Firebox browsers. Install your preferred browser using the links below.

Install Chrome Browser

Install Firefox Browser

Visit your website in an private or incognito window

Visit the website you plan to assess in a private or incognito window. Lighthouse scores should always be generated in an incognito browser because extensions and cached data can affect the auditing process. You can open a private window as shown below

Chrome:

incognito chrome

Firefox:

incognito firefox

Open up Chrome DevTools or install Firefox lighthouse generator

Chrome users can open up devtools by inspecting the webpage using the menu that pops up on right clicking

inspect image

Firefox users should
target="_blank"> install the Google Lighthouse Add-on

Google lighthouse addon image

Generate Lighthouse Report

Chrome users should navigate to the menu bar and select Lighthouse tab

Chrome devtools menu

Click the "generate report" button to start auditing

Firefox users should navigate to the lighthouse icon in the top-right menu and click the "generate report" button as shown below

Firefox lighthouse icon

There you have it. You can now generate lighthouse scores for any webpage.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (3)

Collapse
 
matievisthekat profile image
matievisthekat

Probably an important thing to note is the the Google Lighthouse addon can't generate reports for localhost webpages. You'd have to use the Node CLI (github.com/GoogleChrome/lighthouse...)

Collapse
 
meloku171 profile image
Mauricio Oyarzún

The Chrome extension CAN create reports for Localhost webpages if you use the Lighthouse menu within the Developer Console instead of the Extensions icon.

Collapse
 
kylemit profile image
Kyle

Hey @meloku171, how do you do that. After installing, I still don't see the option in FF Dev Tools anywhere?

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay