🐯 psi-gh-action

Github Action to generating static web performance report for JAMStack using PageSpeedInsight

Motivations

I want to create an open web performance report for my personal blog, I want my reader can access my web performance report as easy as they read my articles. That's why I build this Github Actions, so whenever I need to show web performance report in my open source project then I just need to using this Actions.

Inputs

Input	Description	Required	Default
`api_key`	PageSpeedInsight API key	✅
`urls`	List of URL(s) to be analyzed	✅
`devices`	Device(s) used for test	❌	`mobile`
`runs`	Number of runs to do per URL	❌	`1`
`push_back`	Push JSON report to the main branch	❌	`false`
`override`	Will always make a request to PSI for every job	❌	`false`
`token`	Github token	✅ (when `push_back=true`)
`branch`	Main branch to store report files	❌	`master`
`max`	Number of reports should be kept on repository	❌	`10`

Example usage

- name: psi-gh-action
  uses: mazipan/[email protected]
  with:
    api_key: ${{ secrets.PSI_API_KEY }}
    urls: |
      https://mazipan.space/
      https://mazipan.space/about/
      https://mazipan.space/talks/
    devices: |
      mobile
      desktop
    runs: 1
    max: 10
    branch: master
    push_back: true
    override: false
    token: ${{ secrets.GITHUB_TOKEN }}

Implementation notes

Since this Actions will push report file to your main branch directly, so I recommend to not use on push trigger for this Actions. Please use a cron scheduler instead
This Actions will need actions/checkout@v2 to enable push back feature.

Using with `checkout@v2` and cron scheduler

name: Generate PSI report
on:
  schedule:
    - cron: '30 2 * * 6'

jobs:
  run_psi:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          persist-credentials: false
          fetch-depth: 0

      - name: psi-gh-action
        uses: mazipan/[email protected]
        with:
          api_key: ${{ secrets.PSI_API_KEY }}
          urls: |
            https://mazipan.space/
          devices: |
            mobile
            desktop
          runs: 1
          max: 10
          branch: master
          push_back: true
          override: false
          token: ${{ secrets.GITHUB_TOKEN }}

Report file generated

This Github Actions will generate these following files:

File psi-reports/LAST_UPDATED.txt
File psi-reports/available-reports.json

{
  "latest": "report-YYYY-MM-DD.json",
  "all": ["report-YYYY-MM-DD.json"],
}

File psi-reports/report-YYYY-MM-DD.json

{
  "timestamp": "2021-02-05T16:12:02.119Z",
  "reports": [
    {
      "url": "https://mazipan.space/",
      "device": "mobile", // Device type for running Lighthouse
      "perf": 0.78,       // Performance score by PSI
      "fid": 16,          // First Input Delay based on Chrome UX field data
      "lcp": 2775,        // Largest Contentful Paint
      "cls": 0,           // Cummulative Layout Shift
      "fcp": 2100,        // First Contentful Paint
      "tbt": 591,         // Total Blocking Time
      "tti": 5656.5,      // Time to Interactive
      "si": 2100,         // Speed Index
      "req": 42,          // Total count of all resources requested by the page
      "size": 394708      // Total size of all resources requested by the page
    }
  ]
}

Example UI for Next.js project

See commit c865772 for implementation detail. See mazipan.space/speed for the UI result

Awesome users

See the complete list on AWESOME-USERS.md

Additional Resources

How to add new secret in Github Actions

Go to: https://github.com/{YOUR_USERNAME}/{YOUR_REPO}/settings/secrets/actions

Create Pull Request after suceess

Instead of push directly to the branch, sometimes you just want to create pull request to main branch then you can merge it manually. To solve this case, I recommend to use peter-evans/create-pull-request

How to create new API Key for PSI

https://developers.google.com/speed/docs/insights/v5/get-started

You might need to set a restriction to None for your API KEY in the credential page

Abbreviation

Word	Description	Link
`FID`	First Input Delay	https://web.dev/fid/
`LCP`	Largest Contentful Paint	https://web.dev/lcp/
`CLS`	Cumulative Layout Shift	https://web.dev/cls/
`FCP`	First Contentful Paint	https://web.dev/first-contentful-paint/
`FCI`	First CPU Idle	https://web.dev/first-cpu-idle/
`TBT`	Total Blocking Time	https://web.dev/lighthouse-total-blocking-time/
`TTI`	Time to Interactive	https://web.dev/tti/
`SI`	Speed Index	https://web.dev/speed-index/

Package Rankings

Top 13.52% on Github actions

psi-gh-action