From a2d1b75665dbc09474fb5037c7524c839472725a Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Wed, 23 Jul 2025 15:31:19 +0530 Subject: [PATCH 1/7] add lighthouse ci --- .github/workflows/lighthouse.yml | 86 ++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 .github/workflows/lighthouse.yml diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml new file mode 100644 index 0000000000..5d42d83079 --- /dev/null +++ b/.github/workflows/lighthouse.yml @@ -0,0 +1,86 @@ +name: Lighthouse Report + +on: + pull_request: + types: [opened, synchronize] + +permissions: + contents: read + +jobs: + lighthouse: + if: github.actor != 'dependabot[bot]' + runs-on: ubuntu-latest + + steps: + - name: Checkout PR code + uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.ref }} + repository: ${{ github.event.pull_request.head.repo.full_name }} + + - name: Setup Node.js with npm cache + uses: actions/setup-node@v4 + with: + node-version: '22.x' + cache: 'npm' + + - name: Install dependencies + run: npm install lighthouse + + - name: Wait for Netlify preview to be live + run: | + PREVIEW_URL="https://deploy-preview-${{ github.event.pull_request.number }}--expressjscom-preview.netlify.app" + echo "PREVIEW_URL=$PREVIEW_URL" >> "$GITHUB_ENV" + for i in {1..2}; do + if curl -s --head "$PREVIEW_URL" | grep "200 OK" > /dev/null; then + echo "Preview is live!" + break + fi + echo "Waiting for Netlify to deploy... ($i/2)" + sleep 10 + done + + - name: Run Lighthouse audits + run: | + URLS=( + "$PREVIEW_URL" + "$PREVIEW_URL/en/blog/posts.html" + "$PREVIEW_URL/en/5x/api.html" + ) + echo "## 🚦 Lighthouse Results" > lighthouse-report.md + echo "| URL | Perf | A11y | Best Practices | SEO |" >> lighthouse-report.md + echo "| --- | ---- | ---- | -------------- | --- |" >> lighthouse-report.md + for url in "${URLS[@]}"; do + npx lighthouse "$url" \ + --output json \ + --output-path="lighthouse-report.json" \ + --chrome-flags="--headless" + perf=$(jq '.categories | .performance.score * 100' lighthouse-report.json) + a11y=$(jq '.categories | .accessibility.score * 100' lighthouse-report.json) + bp=$(jq '.categories | .["best-practices"].score * 100' lighthouse-report.json) + seo=$(jq '.categories | .seo.score * 100' lighthouse-report.json) + stoplight() { + if (( $(echo "$1 >= 90" | bc -l) )); then echo "🟒"; + elif (( $(echo "$1 >= 75" | bc -l) )); then echo "🟠"; + else echo "πŸ”΄"; fi + } + perf_stoplight=$(stoplight $perf) + a11y_stoplight=$(stoplight $a11y) + bp_stoplight=$(stoplight $bp) + seo_stoplight=$(stoplight $seo) + path=$(echo "$url" | sed "s|$PREVIEW_URL||") + if [ -z "$path" ]; then path="/"; fi + echo "| $path | $perf_stoplight $(printf "%.0f" $perf) | $a11y_stoplight $(printf "%.0f" $a11y) | $bp_stoplight $(printf "%.0f" $bp) | $seo_stoplight $(printf "%.0f" $seo) |" >> lighthouse-report.md + done + cat lighthouse-report.md + + - name: Log Lighthouse report + run: | + cat lighthouse-report.md + + - name: Upload Lighthouse report + uses: actions/upload-artifact@v4 + with: + name: lighthouse-report + path: lighthouse-report.md From b6081fcc810d26703a49fd861b01a937b9810435 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Wed, 23 Jul 2025 16:16:43 +0530 Subject: [PATCH 2/7] test for mobile and desktop --- .github/workflows/lighthouse.yml | 73 ++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 5d42d83079..31e1f650c5 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -1,4 +1,4 @@ -name: Lighthouse Report +name: Lighthouse on: pull_request: @@ -48,39 +48,56 @@ jobs: "$PREVIEW_URL/en/blog/posts.html" "$PREVIEW_URL/en/5x/api.html" ) - echo "## 🚦 Lighthouse Results" > lighthouse-report.md - echo "| URL | Perf | A11y | Best Practices | SEO |" >> lighthouse-report.md - echo "| --- | ---- | ---- | -------------- | --- |" >> lighthouse-report.md + + echo "## 🚦 Lighthouse Results (Mobile & Desktop)" > lighthouse-report.md + echo "| URL | Device | Perf | A11y | Best Practices | SEO |" >> lighthouse-report.md + echo "| --- | ------ | ---- | ---- | -------------- | --- |" >> lighthouse-report.md + for url in "${URLS[@]}"; do - npx lighthouse "$url" \ - --output json \ - --output-path="lighthouse-report.json" \ - --chrome-flags="--headless" - perf=$(jq '.categories | .performance.score * 100' lighthouse-report.json) - a11y=$(jq '.categories | .accessibility.score * 100' lighthouse-report.json) - bp=$(jq '.categories | .["best-practices"].score * 100' lighthouse-report.json) - seo=$(jq '.categories | .seo.score * 100' lighthouse-report.json) - stoplight() { - if (( $(echo "$1 >= 90" | bc -l) )); then echo "🟒"; - elif (( $(echo "$1 >= 75" | bc -l) )); then echo "🟠"; - else echo "πŸ”΄"; fi - } - perf_stoplight=$(stoplight $perf) - a11y_stoplight=$(stoplight $a11y) - bp_stoplight=$(stoplight $bp) - seo_stoplight=$(stoplight $seo) - path=$(echo "$url" | sed "s|$PREVIEW_URL||") - if [ -z "$path" ]; then path="/"; fi - echo "| $path | $perf_stoplight $(printf "%.0f" $perf) | $a11y_stoplight $(printf "%.0f" $a11y) | $bp_stoplight $(printf "%.0f" $bp) | $seo_stoplight $(printf "%.0f" $seo) |" >> lighthouse-report.md + for device in mobile desktop; do + if [ "$device" = "desktop" ]; then + lighthouse_args="--preset=desktop" + else + lighthouse_args="--form-factor=mobile" + fi + + npx lighthouse "$url" \ + $lighthouse_args \ + --output json \ + --output-path="lighthouse-report-${device}.json" \ + --chrome-flags="--headless" + + report="lighthouse-report-${device}.json" + perf=$(jq '.categories | .performance.score * 100' $report) + a11y=$(jq '.categories | .accessibility.score * 100' $report) + bp=$(jq '.categories | .["best-practices"].score * 100' $report) + seo=$(jq '.categories | .seo.score * 100' $report) + + stoplight() { + if (( $(echo "$1 >= 90" | bc -l) )); then echo "🟒"; + elif (( $(echo "$1 >= 75" | bc -l) )); then echo "🟠"; + else echo "πŸ”΄"; fi + } + + perf_stoplight=$(stoplight $perf) + a11y_stoplight=$(stoplight $a11y) + bp_stoplight=$(stoplight $bp) + seo_stoplight=$(stoplight $seo) + + path=$(echo "$url" | sed "s|$PREVIEW_URL||") + if [ -z "$path" ]; then path="/"; fi + + echo "| $path | $device | $perf_stoplight $(printf "%.0f" $perf) | $a11y_stoplight $(printf "%.0f" $a11y) | $bp_stoplight $(printf "%.0f" $bp) | $seo_stoplight $(printf "%.0f" $seo) |" >> lighthouse-report.md + done done - cat lighthouse-report.md - name: Log Lighthouse report run: | cat lighthouse-report.md - - name: Upload Lighthouse report + - name: Upload Lighthouse reports as artifacts uses: actions/upload-artifact@v4 with: - name: lighthouse-report - path: lighthouse-report.md + name: lighthouse-reports + path: | + lighthouse-report.md From ae8f25dbaf3efc7cb09d78e2d8c44414e8b15640 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sun, 27 Jul 2025 09:05:59 +0530 Subject: [PATCH 3/7] comment lighthouse report --- .github/workflows/lighthouse.yml | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 31e1f650c5..71ce38e43a 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -1,4 +1,4 @@ -name: Lighthouse +name: Lighthouse report on: pull_request: @@ -6,6 +6,7 @@ on: permissions: contents: read + pull-requests: write jobs: lighthouse: @@ -53,8 +54,8 @@ jobs: echo "| URL | Device | Perf | A11y | Best Practices | SEO |" >> lighthouse-report.md echo "| --- | ------ | ---- | ---- | -------------- | --- |" >> lighthouse-report.md - for url in "${URLS[@]}"; do - for device in mobile desktop; do + for device in mobile desktop; do + for url in "${URLS[@]}"; do if [ "$device" = "desktop" ]; then lighthouse_args="--preset=desktop" else @@ -101,3 +102,14 @@ jobs: name: lighthouse-reports path: | lighthouse-report.md + + - name: πŸ’¬ Comment on PR + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.createComment({ + issue_number: context.payload.pull_request.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: `${{ steps.format.outputs.comment }}` + }); From eabe54ff5e4c4a3e3a4779e53570f6b97cd59cb4 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sun, 27 Jul 2025 09:22:17 +0530 Subject: [PATCH 4/7] comment lighthouse results --- .github/workflows/lighthouse.yml | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 71ce38e43a..7e2126cbb0 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -103,13 +103,16 @@ jobs: path: | lighthouse-report.md - - name: πŸ’¬ Comment on PR + - name: πŸ’¬ Comment on PR with Lighthouse results uses: actions/github-script@v7 with: script: | + const fs = require('fs'); + const report = fs.readFileSync('lighthouse-report.md', 'utf8'); + github.rest.issues.createComment({ issue_number: context.payload.pull_request.number, owner: context.repo.owner, repo: context.repo.repo, - body: `${{ steps.format.outputs.comment }}` + body: report }); From 65d1e1622a96c98fbd8f64a428f837320ee02591 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sun, 27 Jul 2025 10:40:42 +0530 Subject: [PATCH 5/7] add github token --- .github/workflows/lighthouse.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 7e2126cbb0..9c8520dad1 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -106,6 +106,7 @@ jobs: - name: πŸ’¬ Comment on PR with Lighthouse results uses: actions/github-script@v7 with: + github-token: ${{ secrets.GITHUB_TOKEN }} script: | const fs = require('fs'); const report = fs.readFileSync('lighthouse-report.md', 'utf8'); From c0c4512fbe7791b097871e8b344051013ee4813e Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sun, 27 Jul 2025 20:21:09 +0530 Subject: [PATCH 6/7] run from main branch --- .github/workflows/lighthouse.yml | 35 +++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 9c8520dad1..4699aafd61 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -1,7 +1,7 @@ -name: Lighthouse report +name: Lighthouse audit on: - pull_request: + pull_request_target: types: [opened, synchronize] permissions: @@ -17,7 +17,7 @@ jobs: - name: Checkout PR code uses: actions/checkout@v4 with: - ref: ${{ github.event.pull_request.head.ref }} + ref: ${{ github.event.pull_request.head.sha }} repository: ${{ github.event.pull_request.head.repo.full_name }} - name: Setup Node.js with npm cache @@ -103,17 +103,38 @@ jobs: path: | lighthouse-report.md - - name: πŸ’¬ Comment on PR with Lighthouse results + - name: Comment on PR with Lighthouse results uses: actions/github-script@v7 with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | const fs = require('fs'); const report = fs.readFileSync('lighthouse-report.md', 'utf8'); - - github.rest.issues.createComment({ + + const { data: comments } = await github.rest.issues.listComments({ issue_number: context.payload.pull_request.number, owner: context.repo.owner, repo: context.repo.repo, - body: report }); + + const botComment = comments.find(comment => + comment.user.type === 'Bot' && + comment.body.includes('🚦Lighthouse Results (Mobile & Desktop)') + ); + + if (botComment) { + await github.rest.issues.updateComment({ + comment_id: botComment.id, + owner: context.repo.owner, + repo: context.repo.repo, + body: report + }); + } else { + await github.rest.issues.createComment({ + issue_number: context.payload.pull_request.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: report + }); + } + From 8318d6ce6e746059e49be6c601407e43701ef737 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Wed, 30 Jul 2025 11:42:45 +0530 Subject: [PATCH 7/7] =?UTF-8?q?add=20heading=20=E2=9A=A0=EF=B8=8F=20SEO=20?= =?UTF-8?q?score=20unreliable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 4699aafd61..f9ac724287 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -51,7 +51,7 @@ jobs: ) echo "## 🚦 Lighthouse Results (Mobile & Desktop)" > lighthouse-report.md - echo "| URL | Device | Perf | A11y | Best Practices | SEO |" >> lighthouse-report.md + echo "| URL | Device | Perf | A11y | Best Practices | ⚠️ SEO score unreliable |" >> lighthouse-report.md echo "| --- | ------ | ---- | ---- | -------------- | --- |" >> lighthouse-report.md for device in mobile desktop; do