INFRA16 - run Lighthouse against both mobile and desktop

.github/workflows/lighthouse.yml

@@ -63,7 +63,7 @@ jobs:
       - run: pnpm install --no-frozen-lockfile
       - run: pnpm run build
       - run: pnpm run preview & npx wait-on http://localhost:4321
-      - name: Run Lighthouse
+      - name: Run Lighthouse Mobile
         id: lighthouse_audit
         uses: treosh/lighthouse-ci-action@v11
         with:
@@ -73,7 +73,7 @@ jobs:
           uploadArtifacts: true
           temporaryPublicStorage: true
           runs: 5
-      - name: Format Lighthouse score
+      - name: Format Lighthouse Mobile score
         uses: actions/github-script@v7
         id: format_lighthouse_score
         with:
@@ -86,6 +86,32 @@ jobs:
               assertionResults: ${{ steps.lighthouse_audit.outputs.assertionResults }}
             };
 
+            const prComment = lighthouseCommentMaker({ lighthouseOutputs });
+            core.setOutput("pr_comment", prComment);
+      - name: Run Lighthouse Desktop
+        id: lighthouse_desktop_audit
+        uses: treosh/lighthouse-ci-action@v11
+        with:
+          urls: |
+            http://localhost:4321
+          configPath: ./.github/workflows/lighthouse/lighthouserc-desktop.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          runs: 5
+          artifactName: lighthouse-desktop-results
+      - name: Format Lighthouse Desktop score
+        uses: actions/github-script@v7
+        id: format_lighthouse_desktop_score
+        with:
+          script: |
+            const lighthouseCommentMaker = require('./.github/workflows/lighthouse/lighthouseCommentMaker.cjs');
+
+            const lighthouseOutputs = {
+              manifest: ${{ steps.lighthouse_desktop_audit.outputs.manifest }},
+              links: ${{ steps.lighthouse_desktop_audit.outputs.links }},
+              assertionResults: ${{ steps.lighthouse_desktop_audit.outputs.assertionResults }}
+            };
+
             const prComment = lighthouseCommentMaker({ lighthouseOutputs });
             core.setOutput("pr_comment", prComment);
       - uses: jwalton/gh-find-current-pr@v1
@@ -96,4 +122,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           header: lighthouse
           number: ${{ github.event.number || steps.pr_number_finder.outputs.pr }}
-          message: ${{ steps.format_lighthouse_score.outputs.pr_comment }}
+          message: |
+            ## Mobile score 
+            ${{ steps.format_lighthouse_score.outputs.pr_comment }} 
+            ## Desktop score 
+            ${{ steps.format_lighthouse_desktop_score.outputs.pr_comment }}

.github/workflows/lighthouse/lighthouseCommentMaker.cjs

@@ -68,7 +68,9 @@ function makeComment(lighthouseOutputs) {
         metrics["seo"].push(summary.seo);
     });
 
-  let comment = `## ⚡️🏠 Lighthouse report
+  let comment = `
+
+  ### ⚡️🏠 Lighthouse report
 
 We ran Lighthouse against the changes and produced this [report](${reportUrl}). Here's the summary:
 

.github/workflows/lighthouse/lighthouserc-desktop.json

@@ -0,0 +1,50 @@
+{
+    "ci": {
+      "collect": {
+        "settings": {
+          "onlyCategories": [
+            "performance",
+            "accessibility",
+            "best-practices",
+            "seo"
+          ],
+          "skipAudits": [
+            "canonical", 
+            "maskable-icon",
+            "valid-source-maps",
+            "unsized-images",
+            "offline-start-url"
+          ],
+          "formFactor": "desktop",
+          "throttling": {
+            "rttMs": 40,
+            "throughputKbps": 10240,
+            "cpuSlowdownMultiplier": 1,
+            "requestLatencyMs": 0, 
+            "downloadThroughputKbps": 0,
+            "uploadThroughputKbps": 0
+          },
+          "screenEmulation": {
+            "mobile": false,
+            "width": 1350,
+            "height": 940,
+            "deviceScaleFactor": 1,
+            "disabled": false
+          },
+          "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
+        }
+      },
+      "assert": {
+        "includePassedAssertions": true,
+        "assertions": {
+          "categories:performance": ["error", {"minScore": 0.9, "aggregationMethod": "median-run"}],
+          "categories:best-practices": ["error", {"minScore": 1, "aggregationMethod": "optimistic"}],
+          "categories:accessibility": ["error", {"minScore": 1, "aggregationMethod": "optimistic"}],
+          "categories:seo": ["error", {"minScore": 1, "aggregationMethod": "optimistic"}],
+          "largest-contentful-paint": ["error", {"maxNumericValue": 2500, "aggregationMethod": "median"}],
+          "max-potential-fid": ["error", {"maxNumericValue": 100, "aggregationMethod": "median"}],
+          "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1, "aggregationMethod": "median"}]
+        }
+      }
+    }
+  }