Lighthouse Badges

This package allows you to easily create Lighthouse badges for all Lighthouse categories.
Ever wanted to brag about your sites's awesome Lighthouse performance? Then this is the package for you!

Examples

All Badges

Single Badge

Usage

Help

usage: lighthouse-badges [-h] [-v] [-s] [-b {flat,flat-square,plastic,for-the-badge,popout,popout-square,social}] [-o OUTPUT_PATH] [-r] -u URL

Generate gh-badges (shields.io) based on lighthouse performance.

optional arguments:
  -h, --help            show this help message and exit
  -v, --version         show program's version number and exit
  -s, --single-badge    Output only one single badge averaging all lighthouse categories' scores
  -b {flat,flat-square,plastic,for-the-badge,popout,popout-square,social}, --badge-style {flat,flat-square,plastic,for-the-badge,popout,popout-square,social}
                        Define look and feel for the badge
  -o OUTPUT_PATH, --output-path OUTPUT_PATH
                        Define output path for artifacts
  -r, --save-report     Save lighthouse report as html for every supplied url

Required arguments:
  -u URL, --url URL     The lighthouse badge(s) will contain the score(s) of all the supplied url

Additionally, you can pass parameters configurations to the lighthouse process directly via environment variable path to the config file:

# The variable name matters, but the path can be anything
export LIGHTHOUSE_BADGES_CONFIGURATION_PATH="~/.lhb-config.json" 

# "extends": "lighthouse:default" is needed, the rest is optional
cat << EOF >! $LIGHTHOUSE_BADGES_CONFIGURATION_PATH
{
  "extends": "lighthouse:default",
  "settings": {
    "extraHeaders": {
      "Authorization": "Bearer ..."
    },
    "onlyCategories": [
      "performance",
      "pwa"
    ],
    "formFactor": "mobile"
  }
}
EOF

lighthouse-badges --url https://www.youtube.com/

See here for more configuration examples in the official lighthouse docs.

Run

node >= 16 is required.

Option 1: npm

npm i -g lighthouse-badges
lighthouse-badges --url https://www.youtube.com/ -o test_results

Option 2: npx

npx lighthouse-badges --url https://www.youtube.com/ -o test_results

Option 3: Docker

# Warning, the docker version may alter the lighthouse results
docker run --rm \
    -v $PWD/test_results:/home/chrome/reports \
    emazzotta/lighthouse-badges \
    /bin/sh -c "lighthouse-badges --url https://www.youtube.com/"

Develop

npm run dev # Starts babel transpiler in watch mode
npm run start # To run the lighthouse-badges code on google.com

Contributing

See contribution guideline

emazzotta/lighthouse-badges

emazzotta

Reviews

Repository Details