Skip to content
You're viewing an older version of this GitHub Action. Do you want to see the latest version instead?
bold

GitHub Action

Lighthouse-Badger

v1.1

Lighthouse-Badger

bold

Lighthouse-Badger

Generates, adds & updates manually/automatically Lighthouse badges & reports from 1,2... URL(s) to 1,2... repo(s) in parallel

Installation

Copy and paste the following snippet into your .yml file.

 
              
- name: Lighthouse-Badger

              
  uses: MyActionWay/[email protected]
Learn more about this action in MyActionWay/lighthouse-badger-action

Choose a version

Lighthouse-Badger | GitHub Action

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

If you've it set up, you only need to add the result links to your use case once. Then the Lighthouse-Badger will automatically keep the badges up to date for you. So sit back and let the Badger do the job 😉.

| Credits

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!".

| Previews

Pagespeed Badge

Plastic Badges

Single Plastic Badge

Reports

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

| Setups

First, choose one of these three workflow files:

lighthouse-badger-default.yml

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)
  1. 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)
  2. 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 repository where you want to add the Lighthouse results.
  3. adapt your lighthouse-badger-default.yml file
    • for manual triggers
    • for all other triggers
      • adapt this section 
         ##############################################################
 # DEFINE YOUR TOKEN, INPUTS AND TRIGGERS IN THE FOLLOWING
 ##############################################################

 # TOKEN and INPUTS as environmental variables
 env:
 #	Token for all triggers
 	TOKEN: # e.g. ${{ secrets.LIGHTHOUSE_BADGER_TOKEN }}
 # 
 #	Inputs for not manually triggered workflows
 	URLS: # URL(s) to be checked e.g. 'https://github.com/sitdisch https://github.com/mythemeway'
 	REPOSITORY: # target repository e.g. 'dummy/mytargetrepo'
 	BRANCH: # target branch e.g. 'master'
 	BADGES-ARGS: # badge-style '-b {flat,...}', preceding-label '-l "Lighthouse "', output-path '-o lighthouse_results/dummy', save-report '-r', single-badge '-s'
 	RESULTS-TYPE: # 'mobile', 'desktop' or 'both'
 	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:
        • token: never enter the actual value of the personal access token
        • inputs:
          • you only have to insert URLS; if any other input is blank, one of these default values will be used instead 
             DEFAULT-REPOSITORY: ${{ github.repository }} # repo with this file
 DEFAULT-BRANCH: 'master'
 DEFAULT-BADGES-ARGS: '-b pagespeed -o lighthouse_results -r'
 DEFAULT-RESULTS-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'
          • badges-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
        • triggers:
          • page_build: Lighthouse results are generated every time after the GitHub page is built
          • schedule:
            • e. g. cron: '55 23 * * 0' executes the Lighthouse-Badger every Sunday at 23:55
            • you can check your inputs here

That's it. Happy audits.

lighthouse-badger-n-groups.yml

Generates, adds & updates manually/automatically Lighthouse badges & reports for different input URL-groups to a selected target repository & branch.

Set it up (click to toggle)
  1. add the lighthouse-badger-n-groups.yml workflow file to a repository
    • the path has to be .github/workflows/lighthouse-badger-n-groups.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)
  2. 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 repository where you want to add the Lighthouse results.
  3. adapt your lighthouse-badger-n-groups.yml file
    • define your defaults 
       ########################################################################
 # DEFINE YOUR DEFAULTS (TOKEN, INPUTS & TRIGGERS) IN THE FOLLOWING
 ########################################################################

 # TOKEN and INPUTS as environmental variables (env)
 env:
 	TOKEN: # e.g. ${{ secrets.LIGHTHOUSE_BADGER_TOKEN }}
 	REPOSITORY: # target repository e.g. 'dummy/mytargetrepo'
 	BRANCH: # target branch e.g. 'master'
 	USER-NAME: # user who should commit e.g. 'dummy'
 	USER-EMAIL: # e.g. '[email protected]'
 	COMMIT-MESSAGE: # e.g. 'Lighthouse results added'
 	RESULTS-TYPE: # 'mobile', 'desktop' or 'both'
 	MOBILE-LIGHTHOUSE-PARAMS: # Lighthouse parameters mobile audit
 	DESKTOP-LIGHTHOUSE-PARAMS: # Lighthouse parameters desktop audit

 # TRIGGERS
 on:
 #	page_build:
 #	schedule:
 #		- cron: '55 23 * * 0' # e.g. every Sunday at 23:55
 #	workflow_dispatch:
      • CONSIDER:
        • token: never enter the actual value of the personal access token
        • inputs:
          • all inputs have predefined values; you can, but you don't have to overwrite them 
             # Predefined values
 REPOSITORY: ${{ github.repository }} # repo with this file
 BRANCH: 'master'
 USER-NAME: 'github-actions[bot]'
 USER-EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
 COMMIT-MESSAGE: 'Lighthouse-Badger[bot]: Results Added'
 RESULTS-TYPE: 'both'
 MOBILE-LIGHTHOUSE-PARAMS: '--throttling.cpuSlowdownMultiplier=2'
 DESKTOP-LIGHTHOUSE-PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1'
        • triggers:
    • define your settings for the different input URL-Groups 
       #
 # FIRST URL-GROUP | DEFINE YOUR ENV IN THE FOLLOWING
 #
 {
  URLS='https://github.com/sitdisch https://github.com/mythemeway';
  BADGES_ARGS='-b pagespeed -o lighthouse_results/first_group -r';
  RESULTS_TYPE='${{ env.RESULTS-TYPE }}';
  MOBILE_LIGHTHOUSE_PARAMS='${{ env.MOBILE-LIGHTHOUSE-PARAMS }}';
  DESKTOP_LIGHTHOUSE_PARAMS='${{ env.DESKTOP-LIGHTHOUSE-PARAMS }}';
  # THAT'S IT; JUMP TO THE NEXT URL-GROUP
  lighthouse_badger_action
 } &
 #
 # SECOND URL-GROUP | DEFINE YOUR ENV IN THE FOLLOWING
 #
 {
  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';
  RESULTS_TYPE='${{ env.RESULTS-TYPE }}';
  MOBILE_LIGHTHOUSE_PARAMS='${{ env.MOBILE-LIGHTHOUSE-PARAMS }}';
  DESKTOP_LIGHTHOUSE_PARAMS='${{ env.DESKTOP-LIGHTHOUSE-PARAMS }}';
  # THAT'S IT; JUMP TO THE NEXT URL-GROUP
  lighthouse_badger_action
 } &
 #
 # THIRD ULR-GROUP | ...
 #
      • CONSIDER:
        • you just have to change URLS and BADGES_ARGS for each group
          • 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
        • if you do not change any of the other inputs, your predefined defaults will be used instead
        • you can't change TOKEN, REPOSITORY, BRANCH, USER-NAME, USER-EMAIL and COMMIT-MESSAGE for the different URL-groups; this is possible with the lighthouse-badger-n-targets.yml workflow file

That's it. Happy audits.

lighthouse-badger-n-targets.yml

Generates, adds & updates manually/automatically Lighthouse badges & reports for different input URL-groups to different target repositories & branches

Set it up (click to toggle)
  1. add the lighthouse-badger-n-targets.yml workflow file to a repository
    • the path has to be .github/workflows/lighthouse-badger-n-targets.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)
  2. 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_TOKEN1 and LIGHTHOUSE_BADGER_TOKEN2
    • the values of the secrets must be the values of the personal access tokens for the repositories where you want to add the Lighthouse results.
  3. adapt your lighthouse-badger-n-targets.yml file
    • define your defaults 
       ########################################################################
 # DEFINE YOUR DEFAULTS (TOKEN, INPUTS & TRIGGERS) IN THE FOLLOWING
 ########################################################################

 # TOKEN and INPUTS as environmental variables (env)
 env:
 	TOKEN: # e.g. ${{ secrets.LIGHTHOUSE_BADGER_TOKEN1 }}
 	REPOSITORY: # target repository e.g. 'dummy/mytargetrepo'
 	BRANCH: # target branch e.g. 'master'
 	USER-NAME: # user who should commit e.g. 'dummy'
 	USER-EMAIL: # e.g. '[email protected]'
 	COMMIT-MESSAGE: # e.g. 'Lighthouse results added'
 	RESULTS-TYPE: # 'mobile', 'desktop' or 'both'
 	MOBILE-LIGHTHOUSE-PARAMS: # Lighthouse parameters mobile audit
 	DESKTOP-LIGHTHOUSE-PARAMS: # Lighthouse parameters desktop audit

 # TRIGGERS
 on:
 #	page_build:
 #	schedule:
 #		- cron: '55 23 * * 0' # e.g. every Sunday at 23:55
 #	workflow_dispatch:
      • CONSIDER:
        • token: never enter the actual value of the personal access token
        • inputs:
          • all inputs have predefined values; you can, but you don't have to overwrite them 
             # Predefined values
 REPOSITORY: ${{ github.repository }} # repo with this file
 BRANCH: 'master'
 USER-NAME: 'github-actions[bot]'
 USER-EMAIL: '41898282+github-actions[bot]@users.noreply.github.com'
 COMMIT-MESSAGE: 'Lighthouse-Badger[bot]: Results Added'
 RESULTS-TYPE: 'both'
 MOBILE-LIGHTHOUSE-PARAMS: '--throttling.cpuSlowdownMultiplier=2'
 DESKTOP-LIGHTHOUSE-PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1'
        • triggers:
    • define your settings for the first target 
       ###################################################################
 # FIRST TARGET | DEFINE YOUR ENV IN THE FOLLOWING
 ###################################################################
 lighthouse-badger-1-target:
 	runs-on: ubuntu-20.04
 	env:
 #		TOKEN:
 		REPOSITORY: 'dummy/first_repo'
 #		BRANCH:
 #		RESULTS-TYPE:
 #		MOBILE-LIGHTHOUSE-PARAMS:
 #		DESKTOP-LIGHTHOUSE-PARAMS:
 #		USER-NAME:
 #		USER-EMAIL:
 		COMMIT-MESSAGE: 'Lighthouse-Badger[bot]: Results Added | First Target'
      • CONSIDER: your defaults will be used unless you redefine the env

    • define your settings for the different input URL-Groups of the first target 
       #
 # FIRST URL-GROUP | FIRST TARGET | DEFINE YOUR ENV BELOW
 #
 {
  URLS='https://github.com/sitdisch https://github.com/mythemeway';
  BADGES_ARGS='-b pagespeed -o lighthouse_results/first_group -r';
  RESULTS_TYPE='${{ env.RESULTS-TYPE }}';
  MOBILE_LIGHTHOUSE_PARAMS='${{ env.MOBILE-LIGHTHOUSE-PARAMS }}';
  DESKTOP_LIGHTHOUSE_PARAMS='${{ env.DESKTOP-LIGHTHOUSE-PARAMS }}';
  # THAT'S IT; JUMP TO THE NEXT URL-GROUP
  lighthouse_badger_action
 } &
 #
 # SECOND URL-GROUP | FIRST TARGET | DEFINE YOUR ENV BELOW
 #
 {
  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';
  RESULTS_TYPE='${{ env.RESULTS-TYPE }}';
  MOBILE_LIGHTHOUSE_PARAMS='${{ env.MOBILE-LIGHTHOUSE-PARAMS }}';
  DESKTOP_LIGHTHOUSE_PARAMS='${{ env.DESKTOP-LIGHTHOUSE-PARAMS }}';
  # THAT'S IT; JUMP TO THE NEXT URL-GROUP
  lighthouse_badger_action
 } &
 #
 # THIRD ULR-GROUP | ...
 #
      • CONSIDER:
        • you just have to change URLS and BADGES_ARGS for each group
          • 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
        • if you do not change any of the other inputs, your predefined defaults will be used instead
        • you can't change TOKEN, REPOSITORY, BRANCH, USER-NAME, USER-EMAIL and COMMIT-MESSAGE for the different URL-groups;
    • define your settings for the second target 
       ###################################################################
 # SECOND TARGET | DEFINE YOUR ENV IN THE FOLLOWING
 ###################################################################
 lighthouse-badger-2-target:
 	runs-on: ubuntu-20.04
 	env:
 		TOKEN: ${{ secrets.LIGHTHOUSE_BADGER_TOKEN2 }}
 		REPOSITORY: 'dummy/second_repo'
 #		BRANCH:
 #		RESULTS-TYPE:
 #		MOBILE-LIGHTHOUSE-PARAMS:
 #		DESKTOP-LIGHTHOUSE-PARAMS:
 #		USER-NAME:
 #		USER-EMAIL:
 		COMMIT-MESSAGE: 'Lighthouse-Badger[bot]: Results Added | Second Target'
    • define your settings for the different input URL-Groups of the second target 
       #
 # FIRST URL-GROUP | SECOND TARGET | DEFINE YOUR ENV BELOW
 #
 {
  URLS='https://github.com/myactionway';
  BADGES_ARGS='-b pagespeed -o lighthouse_results/first_group -r';
  RESULTS_TYPE='${{ env.RESULTS-TYPE }}';
  MOBILE_LIGHTHOUSE_PARAMS='${{ env.MOBILE-LIGHTHOUSE-PARAMS }}';
  DESKTOP_LIGHTHOUSE_PARAMS='${{ env.DESKTOP-LIGHTHOUSE-PARAMS }}';
  # THAT'S IT; JUMP TO THE NEXT URL-GROUP
  lighthouse_badger_action
 } &
 #
 # SECOND URL-GROUP | ...
 #
    • feel free to add more targets like above

That's it. Happy audits.

| Known issues & possible solutions

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

| Application example