GitHub Action
Lighthouse-Badger
[ Workflow Readme == Action Readme ]
The Lighthouse-Badger GitHub action makes it easy to manually/automatically generate, add and update Lighthouse badges and reports from one/multiple input URL-group(s) to one/multiple target repo(s)/branch(es) in parallel.
Once you have it set up, you only need to add the links to your results once in your use case. The Lighthouse-Badger will then automatically keep the badges up to date for you. So sit back and let the Badger do the job 😉.
I, Sitdisch, created the Lighthouse-Badger because I needed a GitHub action that would automatically update my Lighthouse badges on a regular basis and I haven't found a suitable solution.
The badge creation is based on the Lighthouse-Badges repository [License: MIT; Copyright (c) 2018 Emanuele Mazzotta] and the pagespeed badge on the Readme-Pagespeed-Insights repository [License: Apache-2.0; Copyright (c) 2021 Ankur Parihar]. Check out both. They are magnificent and maybe better suited for your use case than the Lighthouse-Badger.
Last but not least, everything is based on the extraordinary work of the contributors to the GoogleChrome/lighthouse repository "Chapeau!".
The awesome htmlpreview.github.com repository makes it easy to show up your Lighthouse reports instantly rendered. Just put this https://htmlpreview.github.io/?
before the URL where you placed your Lighthouse report e. g. https://htmlpreview.github.io/?https://github.com/sitdisch/cloud/blob/master/lighthouse_results/dark_particle/desktop/mythemeway_github_io_dark_particle_.html
Examples: Main Page | Project Page
First, choose a workflow file:
Generates, adds & updates manually/automatically Lighthouse badges & reports from one/multiple input URL(s) to a selected target repository & branch.
Set it up (click to toggle)
- add the lighthouse-badger-default.yml workflow file to a repository
- the path has to be
.github/workflows/lighthouse-badger-default.yml
- it doesn't have to be the repository where you want to add the Lighthouse results; e. g., you can simply fork the
myactionway/lighthouse-badger-workflows
repository- CONSIDER: with a forked repository, you need to confirm that you want to use a workflow before you can actually use it (repo menu > actions tab > push the button)
- the path has to be
- create a new encrypted repository secret [procedure]
- add the secret to the same repository where you added this workflow file
- give the secret a name e. g.
LIGHTHOUSE_BADGER_TOKEN
- the value of the secret must be the value of the personal access token for the target repository where you want to add the Lighthouse results.
- procedure for creating a personal access token
- select only the minimum scopes and permissions required e. g. repo
- adapt your lighthouse-badger-default.yml file
- for manual triggers
- you don't have to adjust anything in the workflow file; just use it
- for all other triggers
- adapt this section
############################################################## # DEFINE YOUR INPUTS AND TRIGGERS IN THE FOLLOWING ############################################################## # INPUTS as environmental variables (env) env: URLS: # URL(s) to be checked e.g. 'https://github.com/sitdisch https://github.com/mythemeway' TOKEN_NAME: # target token name e.g. 'LIGHTHOUSE_BADGER_TOKEN' REPO_BRANCH: # target repository & branch e.g. 'dummy/mytargetrepo master' BADGES_ARGS: # badge-style '-b {flat,...}', preceding-label '-l "Lighthouse "', output-path '-o lighthouse_results/dummy', save-report '-r', single-badge '-s' AUDIT_TYPE: # 'mobile', 'desktop', 'both' or 'both_p' MOBILE_LIGHTHOUSE_PARAMS: # Lighthouse parameters mobile audit DESKTOP_LIGHTHOUSE_PARAMS: # Lighthouse parameters desktop audit USER_NAME: # user who should commit e.g. 'dummy' USER_EMAIL: # e.g. '[email protected]' COMMIT_MESSAGE: # e.g. 'Lighthouse results added' # TRIGGERS on: # page_build: # schedule: # - cron: '55 23 * * 0'
- CONSIDER:
- INPUTS:
- you only have to define
TOKEN_NAME
andURLS
; if any other input is blank, one of these default values will be used insteadDEFAULT_REPO_BRANCH: '${{ github.repository }} master' # repo with this file and master branch DEFAULT_BADGES_ARGS: '-b pagespeed -o lighthouse_results -r' DEFAULT_AUDIT_TYPE: 'both' DEFAULT_MOBILE_LIGHTHOUSE_PARAMS: '--throttling.cpuSlowdownMultiplier=2' DEFAULT_DESKTOP_LIGHTHOUSE_PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1' DEFAULT_USER_NAME: 'github-actions[bot]' DEFAULT_USER_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com' DEFAULT_COMMIT_MESSAGE: 'Lighthouse-Badger[bot]: Results Added'
TOKEN_NAME
: never enter the actual value of the personal access tokenBADGES_ARGS
:- more information about the optional arguments can be found here
- in contrast to the Lighthouse-Badges repository
- do not enter any URL(s) here
- mobile or/and desktop is/are always added to your output-path
MOBILE/DESKTOP_LIGHTHOUSE_PARAMS
:- more information about the optional arguments can be found here
AUDIT_TYPE
:'both_p'
: desktop and mobile audits are carried out in parallel- it's not recommended as it can skew the performance results [source] and it can also be slower than
'both'
- it's not recommended as it can skew the performance results [source] and it can also be slower than
- you only have to define
- TRIGGERS:
page_build
: Lighthouse results are generated every time after the GitHub page is builtschedule
:- e. g.
cron: '55 23 * * 0'
executes the Lighthouse-Badger every Sunday at 23:55 - you can check your inputs here
- e. g.
- INPUTS:
- adapt this section
- for manual triggers
That's it. Happy audits.
Generates, adds & updates manually/automatically Lighthouse badges & reports from one/multiple input URL-group(s) to one/multiple target repo(s)/branch(es) in parallel
Set it up (click to toggle)
- add the lighthouse-badger-advanced.yml workflow file to a repository
- the path has to be
.github/workflows/lighthouse-badger-advanced.yml
- it doesn't have to be a repository where you want to add Lighthouse results; e. g., you can simply fork the
myactionway/lighthouse-badger-workflows
repository- CONSIDER: with a forked repository, you need to confirm that you want to use a workflow before you can actually use it (repo menu > actions tab > push the button)
- the path has to be
- create new encrypted repository secrets [procedure]
- add the secrets to the same repository where you added this workflow file
- give the secrets names e. g.
LIGHTHOUSE_BADGER_TOKEN_1
andLIGHTHOUSE_BADGER_TOKEN_2
- the values of the secrets must be the values of the personal access tokens for the target repositories where you want to add the Lighthouse results.
- procedure for creating a personal access token
- select only the minimum scopes and permissions required e. g. repo
- adapt your lighthouse-badger-advanced.yml file
- define your defaults
############################################################## # DEFINE YOUR DEFAULTS (INPUTS & TRIGGERS) IN THE FOLLOWING ############################################################## # INPUTS as environmental variables (env) env: TOKEN_NAME: # target token name e.g. 'LIGHTHOUSE_BADGER_TOKEN_1' REPO_BRANCH: # target repository & branch e.g. 'dummy/mytargetrepo_1 master' AUDIT_TYPE: # 'mobile', 'desktop', 'both' or 'both_p' MOBILE_LIGHTHOUSE_PARAMS: # Lighthouse parameters mobile audit DESKTOP_LIGHTHOUSE_PARAMS: # Lighthouse parameters desktop audit USER_NAME: # user who should commit e.g. 'dummy' USER_EMAIL: # e.g. '[email protected]' COMMIT_MESSAGE: # e.g. 'Lighthouse results added' # TRIGGERS on: # page_build: # schedule: # - cron: '55 23 * * 0' workflow_dispatch:
- CONSIDER:
- INPUTS:
TOKEN_NAME
: never enter the actual value of the personal access token- all inputs except
TOKEN_NAME
have predefined values; you can, but you don't have to overwrite them# Predefined values REPO_BRANCH: '${{ github.repository }} master' # repo with this file and master branch AUDIT_TYPE: 'both' MOBILE_LIGHTHOUSE_PARAMS: '--throttling.cpuSlowdownMultiplier=2' DESKTOP_LIGHTHOUSE_PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1' USER_NAME: 'github-actions[bot]' USER_EMAIL: '41898282+github-actions[bot]@users.noreply.github.com' COMMIT_MESSAGE: 'Lighthouse-Badger[bot]: Results Added'
MOBILE/DESKTOP_LIGHTHOUSE_PARAMS
:- more information about the optional arguments can be found here
AUDIT_TYPE
:'both_p'
: desktop and mobile audits are carried out in parallel- it's not recommended as it can skew the performance results [source] and it can also be slower than
'both'
- it's not recommended as it can skew the performance results [source] and it can also be slower than
- TRIGGERS:
page_build
: Lighthouse results are generated every time after the GitHub page is builtschedule
:- e. g.
cron: '55 23 * * 0'
executes the Lighthouse-Badger every Sunday at 23:55 - you can check your inputs here
- e. g.
workflow_dispatch
:- no predefined inputs; the
env
defined in this workflow file are used instead when this trigger is triggered - procedure for manually running a workflow on GitHub
- procedure for manually running a workflow using the GitHub CLI
- procedure for manually running a workflow using the REST API
- no predefined inputs; the
- INPUTS:
- CONSIDER:
- define your settings for the different input URL-Groups
############################################################## # FIRST URL-GROUP | DEFINE YOUR ENV IN THE FOLLOWING ############################################################## - NAME: 'URL-GROUP 1' URLS: 'https://github.com/sitdisch https://github.com/mythemeway' BADGES_ARGS: '-b pagespeed -o lighthouse_results/first_group -r' # TOKEN_NAME: # REPO_BRANCH: # AUDIT_TYPE: # MOBILE_LIGHTHOUSE_PARAMS: # DESKTOP_LIGHTHOUSE-PARAMS: # USER_NAME: # USER_EMAIL: # COMMIT_MESSAGE: # e.g. 'Lighthouse-Badger[bot]: Results Added | First URL-Group' ############################################################## # SECOND URL-GROUP | DEFINE YOUR ENV IN THE FOLLOWING ############################################################## - NAME: 'URL-GROUP 2' URLS: 'https://mythemeway.github.io/Dark-Particle/ https://mythemeway.github.io/Dark-Particle/projects/2020/10/31/project-1.html' BADGES_ARGS: '-b flat -o lighthouse_results/second_group -r' # TOKEN_NAME: # e.g. 'LIGHTHOUSE_BADGER_TOKEN_2' # REPO_BRANCH: # e.g. 'dummy/mytargetrepo_2 master' # AUDIT_TYPE: # MOBILE_LIGHTHOUSE_PARAMS: # DESKTOP_LIGHTHOUSE_PARAMS: # USER_NAME: # USER_EMAIL: # COMMIT_MESSAGE: # e.g. 'Lighthouse-Badger[bot]: Results Added | Second URL-Group' ############################################################## # THIRD URL-GROUP | FEEL FREE TO ADD MORE URL-GROUPS...
- CONSIDER:
- you just have to define
NAME
,URLS
andBADGES_ARGS
for each group; if you do not define any of the other inputs, your predefined defaults will be used instead BADGES_ARGS
:- set different output-paths for different groups
- more information about the optional arguments can be found here
- in contrast to the Lighthouse-Badges repository
- do not enter any URL(s) here
- mobile or/and desktop is/are always added to your output-path
TOKEN_NAME
: never enter the actual value of the personal access token- only a maximum of 256 URL-Groups per workflow run is possible [GitHub restriction]
- you just have to define
- CONSIDER:
- define your defaults
That's it. Happy audits.
- No scores are displayed in the pagespeed.svg file.
- They are there, if not, NA is inserted. Try opening the SVG with a browser and the scores will pop up, I promise.
- The repository size is growing continuously due to the automatic updating of the badges.
- The Branch-Pruner can help. E. g. put your Lighthouse results on a separate branch and automatically prune that branch with the Pruner, as you like.
- The workflow logs do not provide enough detail to diagnose why a workflow, job, or step is not working as expected.
- enable addition debug logging