How to Run Local Performance Tests with Lighthouse

In this blog post we’ll go over Lighthouse and how to run it locally without using Google's PageSpeed Insight (PSI).

The benefit of using Lighthouse locally is that you'll get more detailed information about your website's performance and how to improve it.

Also, the results from Lighthouse might differ from those of PSI.

With that in mind, let's get started.

What is Lighthouse?

Lighthouse is the technology that powers PageSpeed Insights. It's an automated tool for improving the quality of your site. You give it a URL, and it provides a list of recommendations on how to improve page performance, make pages more accessible, follow best practices and more.

Here's what Google says about Lighthouse:

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

 

An example of a Lighthouse audit and scoring.
 

Run Lighthouse in Chrome DevTools

Lighthouse is available directly in Chrome's DevTools. From the Chrome main menu , choose More Tools, then Developer Tools (Windows: Ctrl + Shift + I / Mac: Command + Alt + I), and then click the Audits tab.

Or you can use shorthand F12 (Inspect Elements) and then click the Audits tab. Choose which audits you want Lighthouse to perform, and click the Run audits button. After that, Lighthouse provides a comprehensive report with details about your website's performance.

To the left is the viewport of the page that will be audited. To the right is the Audits panel of Chrome DevTools, which is now powered by Lighthouse

Run Lighthouse as a Chrome Extension

To install the extension:

1. Download Google Chrome for Desktop (if you do not have it).
2. Install the Lighthouse Chrome Extension from the Chrome Webstore.

To run an audit:

1. In Chrome, go to the page you want to audit. 
2. Click Lighthouse . It should be next to the Chrome address bar. If not, open Chrome's main menu  and access it at the top of the menu. After clicking it, the Lighthouse menu will expand.
   

   The Lighthouse menu

3. Click Generate report. Lighthouse will run its audits against the current page and open up a new tab with a report of the results.
   
    

A Lighthouse report