Ionic Firebase App
Published in

Ionic Firebase App

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

PWA Lighthouse open-source tool
PWA Lighthouse open-source tool

Get started

  • 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.

Run Lighthouse in Chrome DevTools

  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.

Install and run the Node command line tool

  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
lighthouse <url>
lighthouse --help

Run the Node module programmatically

Run Lighthouse as a Chrome Extension

  1. Download Google Chrome for Desktop.
  1. In Chrome, go to the page you want to audit.

Run PageSpeed Insights

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

Share and view reports online

Share reports as JSON

  • Chrome DevTools. Click Download Report
  • Command line. Run:
  • Lighthouse Viewer. Click Export > Save as JSON.
  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

  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.
  • Add ?gist=<ID> to the Viewer's URL, where <ID> is the ID of the Gist.
  • Open the Viewer, and paste the URL of a Gist into it.

Lighthouse extensibility

  • 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.
  • 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.

Using the Chrome extension

Using the Node CLI

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

CLI options

$ lighthouse --helplighthouse <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/.
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`
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

Using the Node module

Viewing a report

Online Viewer

Docs & Recipes

--

--

Browse your Mobile App on our market place https://www.ionicfirebaseapp.com/products

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ionic Firebase App

IonicFirebaseApp is the innovative marketplace for Mobile app, Web app, Backend on the newest trending technologies and tools. https://www.ionicfirebaseapp.com