Use LHCI directly

.github/workflows/lighthouse.yml

@@ -36,15 +36,12 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
-      - name: Build
-        run: pnpm build
+      - name: Lighthouse Mobile Audit
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+        run: pnpm lhci:mobile
 
-      - name: Audit URLs using Lighthouse
-        uses: treosh/lighthouse-ci-action@v12
+      - name: Lighthouse Desktop Audit
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-        with:
-          runs: 3
-          configPath: './lighthouserc.json'
-          uploadArtifacts: true
-          temporaryPublicStorage: true
+        run: pnpm lhci:desktop

.lighthouseci/assertion-results.json

@@ -0,0 +1,70 @@
+[
+  {
+    "name": "maxLength",
+    "expected": 0,
+    "actual": 37,
+    "values": [
+      37,
+      71,
+      71
+    ],
+    "operator": "<=",
+    "passed": false,
+    "auditId": "modern-image-formats",
+    "level": "warn",
+    "url": "http://localhost:3000/",
+    "auditTitle": "Serve images in next-gen formats",
+    "auditDocumentationLink": "https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/"
+  },
+  {
+    "name": "maxLength",
+    "expected": 0,
+    "actual": 3,
+    "values": [
+      3,
+      3,
+      3
+    ],
+    "operator": "<=",
+    "passed": false,
+    "auditId": "uses-long-cache-ttl",
+    "level": "warn",
+    "url": "http://localhost:3000/",
+    "auditTitle": "Serve static assets with an efficient cache policy",
+    "auditDocumentationLink": "https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/"
+  },
+  {
+    "name": "maxLength",
+    "expected": 0,
+    "actual": 24,
+    "values": [
+      24,
+      46,
+      46
+    ],
+    "operator": "<=",
+    "passed": false,
+    "auditId": "uses-optimized-images",
+    "level": "error",
+    "url": "http://localhost:3000/",
+    "auditTitle": "Efficiently encode images",
+    "auditDocumentationLink": "https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/"
+  },
+  {
+    "name": "maxLength",
+    "expected": 0,
+    "actual": 40,
+    "values": [
+      40,
+      76,
+      76
+    ],
+    "operator": "<=",
+    "passed": false,
+    "auditId": "uses-responsive-images",
+    "level": "error",
+    "url": "http://localhost:3000/",
+    "auditTitle": "Properly size images",
+    "auditDocumentationLink": "https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/"
+  }
+]

.lighthouseci/flags-a4398c66-9b93-42f6-a7fc-bcdd65efb229.json

@@ -0,0 +1 @@
+{"preset":"desktop","chromeFlags":" --headless=new --headless=new --headless=new --headless=new --headless=new --headless=new"}

.lighthouseci/links.json

@@ -0,0 +1,3 @@
+{
+  "http://localhost:3000/": "https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1719062885364-53315.report.html"
+}

lighthouserc.json

@@ -1,8 +1,15 @@
 {
   "ci": {
+    "assert": {
+      "preset": "lighthouse:recommended"
+    },
     "collect": {
+      "startServerCommand": "pnpm build && pnpm preview --port 3000",
       "url": ["http://localhost:3000/"],
-      "startServerCommand": "pnpm preview --port 3000"
+      "numberOfRuns": 3
+    },
+    "upload": {
+      "target": "temporary-public-storage"
     }
   }
 }

package.json

@@ -16,9 +16,12 @@
     "test:integration": "playwright test",
     "test:unit": "vitest",
     "test:unit-coverage": "vitest --coverage",
-    "dbtypegen": "supabase gen types typescript --project-id qbmycnemttkukygnvmbu > src/types/db-generated.types.ts"
+    "dbtypegen": "supabase gen types typescript --project-id qbmycnemttkukygnvmbu > src/types/db-generated.types.ts",
+    "lhci:mobile": "lhci autorun",
+    "lhci:desktop": "lhci autorun --collect.settings.preset=desktop"
   },
   "dependencies": {
+    "@lhci/cli": "^0.14.0",
     "@radix-ui/colors": "^3.0.0",
     "@spotify/web-api-ts-sdk": "^1.2.0",
     "@supabase/supabase-js": "^2.43.5",