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

v2.0

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

[ 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 😉.

| 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 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)
  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 target 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 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 and URLS; if any other input is blank, one of these default values will be used instead
             DEFAULT_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 token
          • 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
          • 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'
        • 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.

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)
  1. 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)
  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_TOKEN_1 and LIGHTHOUSE_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.
  3. 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'
        • TRIGGERS:
    • 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 and BADGES_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]

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