Read and Write for Google Free Tools Comparison

Lighthouse is an open up-source, automatic tool for improving the quality of web pages. You tin can run it against whatever web page, public or requiring authentication. Information technology has audits for performance, accessibility, progressive spider web apps, SEO and more.

You tin 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 in that location, use the failing audits as indicators on how to meliorate the page. Each inspect has a reference md explaining why the audit is important, too every bit how to ready it.

You tin can also use Lighthouse CI to preclude 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 inspect pages that require authentication, and read your reports in a user-friendly format.
• From the command line. Automate your Lighthouse runs via beat out scripts.
• As a Node module. Integrate Lighthouse into your continuous integration systems.
• From a spider web UI. Run Lighthouse and link to reports without installing a thing.

Run Lighthouse in Chrome DevTools

Lighthouse powers the Audits console 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 lot can audit any URL on the web.
3. Open Chrome DevTools.

4. Click the Audits tab.

   

   Figure 1. 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

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

6. Click Run audit. After 30 to sixty seconds, Lighthouse gives y'all a report on the page.

   

   Figure 2. A Lighthouse study in Chrome DevTools

Install and run the Node control 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 -yard lighthouse                          

To run an audit:

          lighthouse <url>                  

To run across 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 equally a Chrome Extension

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 y'all desire to audit.

2. Click Lighthouse . It should be next to the Chrome accost bar. If non, open Chrome's principal carte du jour and access it at the summit of the card. Later clicking, the Lighthouse carte expands.

   

   Figure 3. The Lighthouse menu

3. Click Generate report. Lighthouse runs its audits confronting the currently-focused folio, so opens up a new tab with a written report of the results.

   

   Figure 4. A Lighthouse report

Run PageSpeed Insights

To run Lighthouse on PageSpeed Insights:

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

3. Click Analyze.

   

   Figure 5. The PageSpeed Insights UI

Share and view reports online

Employ the Lighthouse Viewer to view and share reports online.

Figure 6. The Lighthouse Viewer

Share reports as JSON

The Lighthouse Viewer needs the JSON output of a Lighthouse study. The listing below explains how to go the JSON output, depending on what Lighthouse workflow you lot're using:

• Chrome DevTools. Click Download Written report .

• Command line. Run:

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

• Lighthouse Viewer. Click Export > Save as JSON.

To view the study information:

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

Share reports as GitHub Gists

If yous 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 command.

To export a report as a Gist from the study:

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 . The first time you do this, a popup asks permission to access your basic GitHub information, and to read and write to your Gists.

To export a written report as a Gist from the CLI version of Lighthouse, just manually create a Gist and re-create-paste the written report's JSON output into the Gist. The Gist filename containing the JSON output must stop in .lighthouse.study.json. See Share reports every bit 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 stop, in that location are two features at present 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 spider web pages. Instead of but surfacing general recommendations, Lighthouse is now able to provide more relevant and actionable advice depending on the tools used.

Stack Packs permit Lighthouse to detect what platform your site is congenital 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 every bit a new category.

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

Integrate Lighthouse

If you lot are a company or an individual who is integrating Lighthouse as part of the products / services you're offering, kickoff things commencement - we're so excited y'all are! Nosotros want as many people every bit possible to apply Lighthouse, and this Guidelines and Brand Avails for Integrating Lighthouse is meant to make it straightforward for you to bear witness that Lighthouse is under the hood while protecting our brand.

Contribute to Lighthouse

Lighthouse is open source and contributions are welcome. Check out the repository'southward issue tracker to find bugs that you can fix, or audits that y'all can create or improve upon. The issues tracker is besides a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

tidwellcargay.blogspot.com

Source: https://developers.google.com/web/tools/lighthouse

Share this post