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.
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.
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
To install the extension:
To run an audit:
The Lighthouse menu
A Lighthouse report