DEV Community

Linda
Linda

Posted on

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.

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?