up:: [[Computing MOC]] tags:: #on/programming #on/seo # Google Lighthouse [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) is an open-source, automated tool for improving the quality of web pages. It can be run against any web page and is used to audit performance, accessibility, SEO, [[Web Vitals]], and more. > [!important] > Lighthouse should be run in a private/incognito window, as third-party plugins will affect the generated reports. > [!important] > To get accurate reports from Lighthouse, your applications should always be tested with a production build. ## Using Lighthouse There are various different ways to use Google Lighthouse. Here we will discuss a few of them. ### Using Lighthouse Through Chrome DevTools Google Chrome has Lighthouse built into its dev tools. This is convenient for those who already use the Chrome browser. Using Lighthouse through the Chrome DevTools works on both live websites and on pages running on `localhost`. To use Lighthouse in Google Chrome, follow the steps listed below: 1. Open Chrome. 2. In Chrome, open an incognito window by pressing `Ctrl + Shift + N` (on Windows/Linux) or by pressing `⌘ + Shift + N` (on MacOS). 3. In the incognito window, open the DevTools by pressing `Ctrl + Shift + J` (on Windows/Linux) or by pressing `⌘ + ⌥ + J` (on MacOS). 4. In the DevTools pane, click on the **Lighthouse** tab. 5. Click **Generate Report**. 6. The report will begin loading and you should see the completed results within 60 seconds. ### Using Lighthouse Through the Firefox Lighthouse Extension > [!note] > This method only works on live websites. To audit pages running on `localhost`, you must [[Google Lighthouse#Using Lighthouse Through the Node CLI|use the Node CLI]] or [[Google Lighthouse#Using Lighthouse Through Chrome DevTools|use the Chrome DevTools]]. To run Lighthouse using the Firefox extension, perform the following steps: 1. Open Firefox. 2. Install the [Lighthouse Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/). 3. Open a private Firefox window by pressing `Ctrl + Shift + P` (on Windows/Linux) or by pressing `⌘ + Shift P` (on MacOS). 4. Navigate to the website you wish to audit. 5. Click the Lighthouse icon located to the right of the address bar. If the icon is not there, you may need to find it in the "Extensions" menu. 6. Click **Generate Report**. 7. The report will begin loading and you should see the completed results within 60 seconds. ### Using Lighthouse Through the Node CLI Lighthouse can be run through a Node CLI. Remember to use a production build when doing this! This method provides the most flexibility and allows running Lighthouse in an automated fashion.[^1] At the time of this writing, it requires Node 18 LTS (18.x) or later. To run Lighthouse using the Node CLI, follow the steps listed below: 1. Install the `lighthouse` NPM package: ``` npm install -g lighthouse ``` 2. Run the program: ``` lighthouse http://localhost:3000 ``` 3. Lighthouse will write the report to an HTML file by default. You can control the output format by passing flags to the `lighthouse` command. A list of flags can be found in the [Lighthouse documentation](https://github.com/GoogleChrome/lighthouse#cli-options). This is my preferred method of running Lighthouse, as it provides a history of reports through the timestamped HTML files that are produced. ## Important Things to Note - Lighthouse scores can be greatly affected by the network in which you run your audits. - Using additional browser extensions (especially ad-blockers) can have an impact on Lighthouse scores. ## Footnotes [^1]: “Google Lighthouse.” JavaScript. Google, December 11, 2023. [https://github.com/GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse).