What are the best ways to use Lighthouse for web page speed optimization?

1 How Lighthouse works

Lighthouse simulates how a user interacts with your web page on a mobile device. It uses a throttled network and CPU to emulate a realistic scenario. It then generates a report that scores your page on five categories: performance, accessibility, best practices, SEO, and progressive web app (PWA). Each category has a set of audits that measure specific aspects of your page, such as loading speed, rendering time, accessibility issues, code quality, and SEO factors. You can use the report to identify and fix the issues that affect your web page speed.

2 How to run Lighthouse in your browser

The easiest way to run Lighthouse is to use it as a Chrome extension or a Chrome DevTools panel. You can install the extension from the Chrome Web Store or access the panel from the Audits tab in DevTools. To run Lighthouse, you need to open the web page you want to audit in Chrome and click on the Lighthouse icon in the toolbar or the Generate report button in the panel. You can choose which categories to audit and whether to apply mobile or desktop settings. After a few seconds, you will see the report in a new tab.

3 How to run Lighthouse from the command line

Another way to run Lighthouse is to use it as a Node.js module from the command line. You need to install Node.js and npm on your machine and then install Lighthouse globally with the command npm install -g lighthouse . To run Lighthouse, you need to use the command lighthouse URL , where URL is the web page you want to audit. You can also specify various options, such as the output format, the categories to audit, the throttling settings, and the budget file. You can find more details on the Lighthouse documentation.

4 How to run Lighthouse as part of your CI pipeline

The third way to run Lighthouse is to integrate it with your continuous integration (CI) pipeline. This way, you can automate the performance audits and enforce quality standards for your web pages. You can use Lighthouse CI, a set of tools that helps you run Lighthouse on your CI server and track the results over time. You can also use other tools, such as WebPageTest, GitHub Actions, or Jenkins, to run Lighthouse and compare the scores with your performance budget. You can find more details on the Lighthouse CI documentation.

5 How to interpret and improve your Lighthouse scores

Once you have run Lighthouse, you need to analyze the report and understand how to improve your web page speed. The report shows you the overall score for each category, as well as the individual scores for each audit. The scores range from 0 to 100, where higher is better. The report also shows you the opportunities and diagnostics sections, where you can find suggestions on how to optimize your page, such as reducing the size of your images, eliminating render-blocking resources, or using code splitting. You can also see the field data section, where you can see how your page performs in the real world, based on the Chrome User Experience Report.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?