diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml new file mode 100644 index 000000000..03c071277 --- /dev/null +++ b/.github/workflows/lighthouse.yml @@ -0,0 +1,65 @@ +name: Lighthouse Audit + +on: [push, pull_request] + +jobs: + performance_check: + timeout-minutes: 60 + 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.2 + 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 }} diff --git a/.mergify.yml b/.mergify.yml index 34d299d45..97f715040 100644 --- a/.mergify.yml +++ b/.mergify.yml @@ -8,9 +8,11 @@ pull_request_rules: - 'status-success=ci/circleci: lint' - 'status-success=ci/circleci: unit_tests' - 'status-success=cypress: all tests' + - 'status-success=lighthouse/performance_check' - status-success=codeclimate/diff-coverage - status-success=codeclimate/total-coverage actions: merge: method: rebase strict: true + \ No newline at end of file diff --git a/lighthouserc.js b/lighthouserc.js new file mode 100644 index 000000000..3c40464b0 --- /dev/null +++ b/lighthouserc.js @@ -0,0 +1,23 @@ +module.exports = { + ci: { + collect: { + numberOfRuns: 3, + startServerCommand: 'yarn start', + url: ['https://operationcode.org/'], + }, + upload: { + target: 'temporary-public-storage', + }, + assert: { + assertions: { + 'categories:accessibility': ['error', { minScore: 0.9 }], + 'categories:best-practices': ['error', { minScore: 0.9 }], + 'categories:performance': ['warn', { minScore: 0.7 }], + 'categories:seo': ['warn', { minScore: 0.9 }], + 'dom-size': ['warn', { maxNumericValue: 2500 }], + 'first-contentful-paint': ['error', { maxNumericValue: 3000 }], + interactive: ['error', { maxNumericValue: 8000 }], + }, + }, + }, +};