emazzotta/lighthouse-badges

🚦 Generate badges (shields.io) based on Lighthouse performance.

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

Sponsors

Sponsored by JetBrains

Author

Emanuele Mazzotta

lighthouse-badges's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

How to pass options do the lighthouse itself?

Today, lighthouse-badges test on top of the default mobile options. In lighthouse cli you can pass the --emulated-form-factor desktop to test against desktop UA.
How I can do this with badges?

Feature Request: One badge that averages all four scores

For rootulp.com I'd like to use a cumulative lighthouse score with a shorter lowercase subject (perhaps just lighthouse). So something like this badge

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Support for localhost?

My web app is pretty locked down in production. I'd like to be able to add an npm script to generate these badges while running my app locally via webpack-dev-server. However, I currently crash with Error: stdout maxBuffer exceeded when running locally against my locally served app.

I'm able to hit public youtube like your example without error, so I'm curious if this is a known limitation or if I might be able to set a configuration to increate the maxBuffer.

Thanks!

lighthouse-badges --urls http://localhost:3000/
Lighthouse performance test running... (this might take a while)
(node:19025) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: stdout maxBuffer exceeded
(node:19025) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

An in-range update of ramda is breaking the build 🚨

The dependency ramda was updated from 0.26.0 to 0.26.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

ramda is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Commits

The new version differs by 27 commits.

• 6709cb8 Version 0.26.1
• b0c7441 Merge pull request #2722 from CrossEye/v0.26.1-tweaks
• 7a68594 fixing memoizeWith documentation ... again
• ce73786 Merge branch 'master' of https://github.com/ramda/ramda
• 07e2a56 Merge pull request #2720 from screendriver/const
• b634a41 Change const to var
• ed3c3b5 Merge pull request #2717 from peoplenarthax/patch-1
• 562beda No trailing spaces
• 9f45be3 Update docs for memoizeWith
• c44a544 Merge pull request #2711 from GingerPlusPlus/no-describe-only
• 16d1c3a Disallow tests to use describe.only
• e1e1cf8 Merge pull request #2710 from GingerPlusPlus/fix-tests
• 697f891 Merge pull request #2703 from GingerPlusPlus/test-source
• 4c4797d Fix tests
• 89f4540 Merge pull request #2694 from MadDeveloper/add-move-function

There are 27 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Save artifacts?

Hey @emazzotta, love what you're doing with lighthouse-badges.

So, I have a project with Travis and gh-pages and I'm using the following steps:

1 - Build the project

2 - Publish the files with gh-pages

3 - Run lighthouse-badges on the production URLs

4 - Publish the SVGs with gh-pages

And I'm using the published SVGs URLs on the README, this way I always have the latest build results on the screen.

The thing is: I want to be able to, somehow, show the lighthouse report that gave me that score, and the --save-artifacts flag can provide the HTML report file.

I could simply do another lighthouse test to get the HTML report file, but lighthouse's results may be different, you know?

What about add a --save-artifacts flag to lighthouse-badges too?

Or simply use the --save-artifacts when running lighthouse

Remove additional parameters

Hi @emazzotta

I see that you removed additional parameters function.
Now, ¿How can pass additional parameters in version 1.2.x?

Can't run test examples

• thanks for setting this up. I used to use the ebidel/lighthouse-badge#5 badge but this seems cooler with automation

Steps to Reproduce

1. npx lighthouse-badges --urls https://www.youtube.com/ https://www.youtube.com/feed/trending -o test_results

Expected Behaviour

• no error, I guess I should see an output

Actual Behaviour

• error, no output

Stacktrace

npx: installed 270 in 11.486s

npx: installed 270 in 12.939s
  ◜ Running Lighthouse, please wait...Error: Command failed: /Users/howardj/.npm/_npx/81364/lib/node_modules/lighthouse-badges/node_modules/.bin/lighthouse --chrome-flags='--headless --no-sandbox --no-default-browser-check --no-first-run --disable-default-apps' --output=json --output-path=stdout --quiet  https://www.youtube.com/
/Users/howardj/.npm/_npx/81364/lib/node_modules/lighthouse-badges/node_modules/lighthouse/lighthouse-core/gather/driver.js:68
  _traceCategories = Driver.traceCategories;
                   ^

SyntaxError: Unexpected token =
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Environment Information

• Operating System: 10.15.7 (19H15) Catalina MacOS
• Lighthouse-Badges Version: 1.1.0
• Node Version: v10.15.3

Additional Information

(Please tick where applicable)

• The issue persists with the npm version (same stacktrace, tried global install)
• The issue persists with the docker version (different stacktrace, see below)

  ◟ Running Lighthouse, please wait...Error: Command failed: /home/lighthouse/node_modules/.bin/lighthouse --chrome-flags='--headless --no-sandbox --no-default-browser-check --no-first-run --disable-default-apps' --output=json --output-path=stdout --quiet  https://www.youtube.com/feed/trending
Runtime error encountered: Waiting for DevTools protocol response has exceeded the allotted time. (Method: Runtime.evaluate)
LHError: PROTOCOL_TIMEOUT
    at Timeout._onTimeout (/home/lighthouse/node_modules/lighthouse/lighthouse-core/gather/driver.js:399:21)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Can't pass urls to lighthouse-badges.js

Running

$ ./node_modules/lighthouse-badges/bin/lighthouse-badges.js --urls https://rootulp.com

Gives me the following error:

Lighthouse performance test running... (this might take a while)
(node:3977) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Command failed: /Volumes/git/personal/rootulp.com/node_modules/lighthouse-badges/node_modules/.bin/lighthouse --quiet --urls --chrome-flags='--headless' --output=json --output-path=stdout
Please provide a url

Specify --help for available options

(node:3977) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Because I don't think the urls are being passes properly. I've tried a few alternatives but haven't been able to get it to work. Any ideas?

An in-range update of lint-staged is breaking the build 🚨

The devDependency lint-staged was updated from 7.2.2 to 7.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for v7.3.0

7.3.0 (2018-09-20)

Features

• Allow linting files outside of project folder (#495) (d386c80)

Commits

The new version differs by 1 commits.

• d386c80 feat: Allow linting files outside of project folder (#495)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Pass cookie to lighthouse (--extra-headers)

Hello, first of all thanks for the work @emazzotta . I wanted to ask how to pass a cookie to lighthouse. For example with the --extra-headers option
Thank you!

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

An in-range update of lighthouse is breaking the build 🚨

The dependency lighthouse was updated from 4.0.0-beta to 4.0.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lighthouse is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 54 commits.

• bfa10f1 4.0.0 (#7024)
• 457133e deps: update axe-core to latest (#7020)
• 82819a0 core(speedindex): scale scoring coefficients based on throttling (#7007)
• 534621c report: add top-level section for passed audits that had warnings (#6989)
• 120d769 report: restore old, disabled failed grouping test (#7006)
• ff41f6a report(css): use padding for better score gauge spacing (#6972)
• 017574b core(driver): exit early when testing page with insecure certificate (#6608)
• 161519a core: stricter LR-desktop metric scoring (#6969)
• df39a87 docs(readme): add Speedrank to integrations list (#6987)
• 931eafe report: celebrate your all 100's with fireworks (#5455)
• b06f284 core: add type checking to pwmetrics-events (#6980)
• d5fe65e report: clean up more clump/group/expandable cruft (#6982)
• bc23383 report: expand groups within Passed Audits (#6930)
• 0b223e5 misc(emulation): use correct Nexus 5X screen size (#6932)
• d5053e4 core(driver): waitForFCP when tracing (#6944)

There are 54 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Error when running for more than one url

Steps to Reproduce

Failure scenario

1. Copy npx command from readme - npx lighthouse-badges --urls https://www.youtube.com/ https://www.youtube.com/feed/trending -o test_results
2. Run it

Expected Behaviour

Lighthouse reports should be run and the badges created

Actual Behaviour

10:20 $ npx lighthouse-badges --urls https://www.youtube.com/ https://www.youtube.com/feed/trending -o test_results
  ◡ Running Lighthouse, please wait...SyntaxError: The "start lh:runner:gather" performance mark has not been set

Success scenario (with only one url)

1. Modify npx command from readme to remove second url - npx lighthouse-badges --urls https://www.youtube.com/ -o test_results
2. Run it

Expected Behaviour

Lighthouse reports should be run and the badges created

Actual Behaviour

Lighthouse reports run and the badges created

Environment Information

• Operating System: Linux Ubuntu 5.14.0-1052-oem
• Lighthouse-Badges Version: 1.2.8
• Node Version: 18.16.0, 16.20.0

Additional Information

It appears this may be due to running lighthouse in parallel see lighthouse issue but I haven't investigated further.

(Please tick where applicable)

• [/] The issue persists with the npm version