added google's Lighthouse CI check

.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/[email protected]
+          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 }}

.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
+

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 }],
+      },
+    },
+  },
+};