How to Run Local Performance Tests with Lighthouse

In this blog post we’ll go through Lighthouse and how to run it locally without using PageSpeed Insight.

The benefit of using Lighthouse locally is that will provide you more detailed information about the audit and also how to improve it. Let you know that the results from Lighthouse might be differ from PageSpeed Insight.

 

What is Lighthouse?

 

Lighthouse is the technology at the core of this v5 PageSpeed Insight update. It is 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, makes pages more accessible, adheres to best practices and more. Let see what Google says about it:

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 now available directly in Chrome 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 Run audits button. Lighthouse provides one or more comprehensive reports that detail your page's performance characteristics.

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, the Lighthouse menu expands.
   

   The Lighthouse menu

3. Click Generate report. Lighthouse runs its audits against the currently-focused page, then opens up a new tab with a report of the results.
   
    

A Lighthouse report