Lighthouse an open-source, automated tool for improving the quality of your Progressive Web Apps

PWA Lighthouse open-source tool

Lighthouse, an open-source, automated tool for improving the quality of your Progressive Web Apps, eliminates much of the manual testing that was previously required. You can even use Lighthouse in continuous integration systems to catch regressions.

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, SEO and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

You can also use Lighthouse CI to prevent regressions on your sites.

Run Lighthouse In Chrome DevTools | File an issue

Check out the video below from Google I/O 2019 to learn more about how to use and contribute to Lighthouse.

Get started

Choose the Lighthouse workflow that suits you best:

• In Chrome DevTools. Easily audit pages that require authentication, and read your reports in a user-friendly format.
• From the command line. Automate your Lighthouse runs via shell scripts.
• As a Node module. Integrate Lighthouse into your continuous integration systems.
• From a web UI. Run Lighthouse and link to reports without installing a thing.

Note: The CLI and Node workflows require you to have an instance of Google Chrome installed on your machine.

Run Lighthouse in Chrome DevTools

Lighthouse powers the Audits panel of Chrome DevTools. To run a report:

1. Download Google Chrome for Desktop.
2. In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
3. Open Chrome DevTools.
4. Click the Audits tab.

5. Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.

6. Click Run audit. After 30 to 60 seconds, Lighthouse gives you a report on the page.

Install and run the Node command line tool

To install the Node module:

1. Download Google Chrome for Desktop.
2. Install the current Long-Term Support version of Node.
3. Install Lighthouse. The -g flag installs it as a global module.

npm install -g lighthouse

To run an audit:

lighthouse <url>

To see all the options:

lighthouse --help

Run the Node module programmatically

See Using programmatically for an example of running Lighthouse programmatically, as a Node module.

Run Lighthouse as a Chrome Extension

Note: Unless you have a specific reason, you should use the Chrome DevTools workflow rather than this Chrome Extension workflow. The DevTools workflow allows for testing local sites and authenticated pages, while the extension does not.

To install the extension:

1. Download Google Chrome for Desktop.

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.

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.

Run PageSpeed Insights

To run Lighthouse on PageSpeed Insights:

1. Navigate to PageSpeed Insights.
2. Enter a web page URL.
3. Click Analyze.

Share and view reports online

Use the Lighthouse Viewer to view and share reports online.

Share reports as JSON

The Lighthouse Viewer needs the JSON output of a Lighthouse report. The list below explains how to get the JSON output, depending on what Lighthouse workflow you’re using:

• Chrome DevTools. Click Download Report
• Command line. Run:

lighthouse --output json --output-path <path/for/output.json>

• Lighthouse Viewer. Click Export > Save as JSON.

To view the report data:

1. Open the Lighthouse Viewer in Google Chrome.
2. Drag the JSON file onto the viewer, or click anywhere on the Viewer to open your file navigator and select the file.

Share reports as GitHub Gists

If you don’t want to manually pass around JSON files, you can also share your reports as secret GitHub Gists. One benefit of Gists is free version control.

To export a report as a Gist from the report:

1. (If already on the viewer, skip this step) Click Export > Open In Viewer. The report opens in the Viewer, located at https://googlechrome.github.io/lighthouse/viewer/.
2. In the Viewer, click Share

1. . The first time you do this, a popup asks permission to access your basic GitHub data, and to read and write to your Gists.

To export a report as a Gist from the CLI version of Lighthouse, just manually create a Gist and copy-paste the report’s JSON output into the Gist. The Gist filename containing the JSON output must end in .lighthouse.report.json. See Share reports as JSON for an example of how to generate JSON output from the command line tool.

To view a report that’s been saved as a Gist:

• Add ?gist=<ID> to the Viewer's URL, where <ID> is the ID of the Gist.

https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>

• Open the Viewer, and paste the URL of a Gist into it.

Lighthouse extensibility

Lighthouse aims to provide guidance that is relevant and actionable for all web developers. To this end, there are two features now available that allow you to tailor Lighthouse to your specific needs.

• Stack Packs. Many developers today use different technologies (backend/CMS/JavaScript frameworks) to build their web pages. Instead of only surfacing general recommendations, Lighthouse is now able to provide more relevant and actionable advice depending on the tools used.

Stack Packs allow Lighthouse to detect what platform your site is built on and display specific stack-based recommendations. These recommendations are defined and curated by experts from the community.

To contribute a Stack Pack, review the Contributing Guidelines.

• Lighthouse Plugins. Lighthouse Plugins allow domain experts in the community to extend the functionality of Lighthouse for their specific needs. You are now able to leverage the data that Lighthouse collects to create new audits. At its core, a Lighthouse plugin is a node module that implements a set of checks that will be run by Lighthouse and added to the report as a new category.

For more information about how to create your own plugin, check out our Plugin Handbook in the Lighthouse GitHub repo.

GitHub Repo of LightHouse:

GoogleChrome/lighthouse

Using the Chrome extension

The Chrome extension was available prior to Lighthouse being available in Chrome Developer Tools, and offers similar functionality.

Installation: install the extension from the Chrome Web Store.

Run it: follow the extension quick-start guide.

Using the Node CLI

The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported. Users who want more advanced usage, or want to run Lighthouse in an automated fashion should use the Node CLI.

Lighthouse requires Node 10 LTS (10.13) or later.

Installation:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

Run it: lighthouse https://airhorner.com/

By default, Lighthouse writes the report to an HTML file. You can control the output format by passing flags.

CLI options

$ lighthouse --help
lighthouse <url>
Logging:
  --verbose  Displays verbose logging                                                                                                      [boolean]
  --quiet    Displays no progress, debug logs or errors                                                                                    [boolean]
Configuration:
  --save-assets                  Save the trace & devtools log to disk                                                                     [boolean]
  --list-all-audits              Prints a list of all available audits and exits                                                           [boolean]
  --list-trace-categories        Prints a list of all required trace categories and exits                                                  [boolean]
  --print-config                 Print the normalized config for the given config and options, then exit.                                  [boolean]
  --additional-trace-categories  Additional categories to capture with the trace (comma-delimited).
  --config-path                  The path to the config JSON.
                                 An example config file: lighthouse-core/config/lr-desktop-config.js
  --chrome-flags                 Custom flags to pass to Chrome (space-delimited). For a full list of flags, see
                                 http://peter.sh/experiments/chromium-command-line-switches/.
                                 Environment variables:
                                 CHROME_PATH: Explicit path of intended Chrome binary. If set must point to an executable of a build of
                                 Chromium version 66.0 or later. By default, any detected Chrome Canary or Chrome (stable) will be launched.
                                                                                                                                       [default: ""]
  --port                         The port to use for the debugging protocol. Use 0 for a random port                                    [default: 0]
  --preset                       Use a built-in configuration.                                            [choices: "full", "perf", "mixed-content"]
                                 WARNING: If the --config-path flag is provided, this preset will be ignored.
  --hostname                     The hostname to use for the debugging protocol.                                              [default: "localhost"]
  --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue.
                                 WARNING: Very high values can lead to large traces and instability                                 [default: 45000]
  --emulated-form-factor         Controls the emulated device form factor (mobile vs. desktop) if not disabled                      [choices: "mobile", "desktop", "none"] [default: "mobile"]
  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More:
                                 https://git.io/vFFTO
  --gather-mode, -G              Collect artifacts from a connected browser and save to disk. If audit-mode is not also enabled, the run will quit
                                 early.                                                                                                    [boolean]
  --audit-mode, -A               Process saved artifacts from disk                                                                         [boolean]
Output:
  --output       Reporter for the results, supports multiple values                        [choices: "json", "html", "csv"] [default: "html"]
  --output-path  The file path to output the results. Use 'stdout' to write to stdout.
                 If using JSON output, default is stdout.
                 If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
                 If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
                 Example: --output-path=./lighthouse-results.html
  --view         Open HTML report in your browser                                                                                          [boolean]
Options:
  --help                        Show help                                                                                                  [boolean]
  --version                     Show version number                                                                                        [boolean]
  --cli-flags-path              The path to a JSON file that contains the desired CLI flags to apply.
                                Flags specified at the command line will still override the file-based ones.
  --blocked-url-patterns        Block any network requests to the specified URL patterns                                                     [array]
  --disable-storage-reset       Disable clearing the browser cache and other storage APIs before a run                                     [boolean]
  --throttling-method                  Controls throttling method         [choices: "devtools", "provided", "simulate"]
  --throttling.rttMs                   Controls simulated network RTT (TCP layer)
  --throttling.throughputKbps          Controls simulated network download throughput
  --throttling.requestLatencyMs        Controls emulated network RTT (HTTP layer)
  --throttling.downloadThroughputKbps  Controls emulated network download throughput
  --throttling.uploadThroughputKbps    Controls emulated network upload throughput
  --throttling.cpuSlowdownMultiplier   Controls simulated + emulated CPU throttling
  --extra-headers               Set extra HTTP Headers to pass with request                                                                 [string]
Examples:
  lighthouse <url> --view                                                   Opens the HTML report in a browser after the run completes
  lighthouse <url> --config-path=./myconfig.js                              Runs Lighthouse with your own configuration: custom audits, report
                                                                            generation, etc.
  lighthouse <url> --output=json --output-path=./report.json --save-assets  Save trace, devtoolslog, and named JSON report.
  lighthouse <url> --emulated-form-factor=none                              Disable device emulation and all throttling.
    --throttling-method=provided
  lighthouse <url> --chrome-flags="--window-size=412,660"                   Launch Chrome with a specific window size
  lighthouse <url> --quiet --chrome-flags="--headless"                      Launch Headless Chrome, turn off logging
  lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\"}"          Stringify\'d JSON HTTP Header key/value pairs to send in requests
  lighthouse <url> --extra-headers=./path/to/file.json                      Path to JSON file of HTTP Header key/value pairs to send in requests
  lighthouse <url> --only-categories=performance,pwa                        Only run the specified categories. Available categories: accessibility,
                                                                            best-practices, performance, pwa, seo.
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.

Output Examples

lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json`

Lifecycle Examples

You can run a subset of Lighthouse’s lifecycle if desired via the --gather-mode (-G) and --audit-mode (-A) CLI flags.

lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits
lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report
lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.

# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.com

Notes on Error Reporting

The first time you run the CLI you will be prompted with a message asking you if Lighthouse can anonymously report runtime exceptions. The Lighthouse team uses this information to detect new bugs and avoid regressions. Opting out will not affect your ability to use Lighthouse in any way. Learn more.

Using the Node module

You can also use Lighthouse programmatically with the Node module.

Read Using Lighthouse programmatically for help getting started.
Read Lighthouse Configuration to learn more about the configuration options available.

Viewing a report

Lighthouse can produce a report as JSON or HTML.

HTML report:

Online Viewer

Running Lighthouse with the --output=json flag generates a JSON dump of the run. You can view this report online by visiting https://googlechrome.github.io/lighthouse/viewer/ and dragging the file onto the app. You can also use the "Export" button from the top of any Lighthouse HTML report and open the report in the Lighthouse Viewer.

In the Viewer, reports can be shared by clicking the share icon in the top right corner and signing in to GitHub.

Note: shared reports are stashed as a secret Gist in GitHub, under your account.

Docs & Recipes

Useful documentation, examples, and recipes to get you started.

Docs

• Dealing with variance
• Using Lighthouse programmatically
• Testing a site with authentication
• Developing Plugins
• Testing on a mobile device
• Lighthouse Architecture

Recipes

• gulp — helpful for CI integration
• Plugin — example Lighthouse plugin
• Custom Audit example — extend Lighthouse, run your own audits

Check more details about Lighthouse check out GitHub repo

GoogleChrome/lighthouse

Or you can check the video

For more updates stay connected Ionic Firebase App