diff --git a/.github/lighthouse/budget.json b/.github/lighthouse/budget.json new file mode 100644 index 00000000..55c15577 --- /dev/null +++ b/.github/lighthouse/budget.json @@ -0,0 +1,27 @@ +[ + { + "path": "/*", + "timings": [ + { + "metric": "interactive", + "budget": 3000 + }, + { + "metric": "first-contentful-paint", + "budget": 1800 + } + ], + "resourceSizes": [ + { + "resourceType": "script", + "budget": 100 + } + ], + "resourceCounts": [ + { + "resourceType": "third-party", + "budget": 4 + } + ] + } +] \ No newline at end of file diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml new file mode 100644 index 00000000..38daa222 --- /dev/null +++ b/.github/workflows/lighthouse.yml @@ -0,0 +1,71 @@ +name: Vercel Preview URL Lighthouse Audit + +on: + issue_comment: + types: [edited] + +jobs: + generate_lighthouse_audit: + timeout-minutes: 30 + runs-on: ubuntu-latest + steps: + - name: Add comment to PR + id: loading_comment_to_pr + uses: marocchino/sticky-pull-request-comment@v1 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + number: ${{ github.event.issue.number }} + header: lighthouse + message: | + Running Lighthouse audit... + - name: Capture Vercel preview URL + id: vercel_preview_url + uses: aaron-binary/vercel-preview-url-action@v0.0.3 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - uses: actions/checkout@v2 + - name: Audit preview URL with Lighthouse + id: lighthouse_audit + uses: treosh/lighthouse-ci-action@v3 + with: + urls: | + ${{ steps.vercel_preview_url.outputs.vercel_preview_url }} + uploadArtifacts: true + temporaryPublicStorage: true + - name: Format lighthouse score + id: format_lighthouse_score + uses: actions/github-script@v3 + with: + github-token: ${{secrets.GITHUB_TOKEN}} + script: | + const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary + const links = ${{ steps.lighthouse_audit.outputs.links }} + + const formatResult = (res) => Math.round((res * 100)) + Object.keys(result).forEach(key => result[key] = formatResult(result[key])) + + const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴' + + const comment = [ + `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`, + '| Category | Score |', + '| --- | --- |', + `| ${score(result.performance)} Performance | ${result.performance} |`, + `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`, + `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`, + `| ${score(result.seo)} SEO | ${result.seo} |`, + `| ${score(result.pwa)} PWA | ${result.pwa} |`, + ' ', + `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*` + ].join('\n') + + core.setOutput("comment", comment); + - name: Add comment to PR + id: comment_to_pr + uses: marocchino/sticky-pull-request-comment@v1 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + number: ${{ github.event.issue.number }} + header: lighthouse + message: | + ${{ steps.format_lighthouse_score.outputs.comment }} \ No newline at end of file