Integrate Page Speed Reporting into CICD process

[supernova-at]

Overview

Google Page Speed Insights is a subset of Lighthouse, an important tool for measuring the performance of the Venia reference PWA storefront.

https://developers.google.com/speed/docs/insights/v5/get-started?utm_source=lh-chrome-ext

The Ask

Implement page speed reporting as part of our CI process to report on the important metrics of Google Page Speed Insights on each PR.

We want to keep performance top of mind when we're evaluating new code.

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-1762 is successfully created for this GitHub issue.

[rasmuswikman]

I don't know if this is still relevant, but there is a GitHub action called Lighthouse CI Action that can do this.

https://github.com/marketplace/actions/lighthouse-ci-action

Here's a sample i ran on my Venia instance (located in .github/workflows/lighthouse.yml):

# ${{ secrets.VENIA_FRONTEND_URL }}       https://venia.mydomain.com
# ${{ secrets.LHCI_GITHUB_APP_TOKEN }}    Get a token from https://github.com/apps/lighthouse-ci

name: Lighthouse
on: [push]
jobs:
  lighthouse:
    name: Lighthouse audit
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v8
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        with:
          urls: |
            ${{ secrets.VENIA_FRONTEND_URL }}
          temporaryPublicStorage: true

By supplying the LHCI_GITHUB_APP_TOKEN and enabling a branch protection rule in GitHub, the results can be made as status checks for pull requests. In the screenshot below, there are the performance results and by clicking "Details" you are taken to a public full report hosted for seven days at Google.

The rule I made looks like the screenshot below.

There are loads of options and thresholds that can be set, but this is the super simple version of Lighthouse CI.