diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index a54787a3..79b11282 100644 --- a/.github/workflows/lighthouse.yml +++ b/.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 }} \ No newline at end of file + message: | + ## Mobile score + ${{ steps.format_lighthouse_score.outputs.pr_comment }} + ## Desktop score + ${{ steps.format_lighthouse_desktop_score.outputs.pr_comment }} \ No newline at end of file diff --git a/.github/workflows/lighthouse/lighthouseCommentMaker.cjs b/.github/workflows/lighthouse/lighthouseCommentMaker.cjs index a583aa8a..2ee99698 100644 --- a/.github/workflows/lighthouse/lighthouseCommentMaker.cjs +++ b/.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: diff --git a/.github/workflows/lighthouse/lighthouserc-desktop.json b/.github/workflows/lighthouse/lighthouserc-desktop.json new file mode 100644 index 00000000..4a16d1d9 --- /dev/null +++ b/.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"}] + } + } + } + } \ No newline at end of file