magento / pwa-studio

🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2.
https://developer.adobe.com/commerce/pwa-studio/
Open Software License 3.0
1.07k stars 683 forks source link

Integrate Page Speed Reporting into CICD process #1712

Open supernova-at opened 5 years ago

supernova-at commented 5 years ago

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 commented 3 years ago

@magento export issue to JIRA project PWA as Story

github-jira-sync-bot commented 3 years ago

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

rasmuswikman commented 3 years ago

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.

Screenshot 2021-11-20 at 0 16 10

The rule I made looks like the screenshot below.

Screenshot 2021-11-20 at 0 16 41

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