Skip to content

Commit 25a84ba

Browse files
Ashutoshx7Ashutoshx7
authored
Add Lighthouse CI for PR performance testing (#5318)
* Add Lighthouse CI for PR performance testing - Add lighthouse-ci.yml workflow to run on PRs - Add lighthouserc.js configuration with performance budgets - Tests performance, accessibility, best practices, and SEO - Posts score summary as PR comments with colorful indicators - Uploads detailed reports as artifacts - Uses temporary-public-storage for free report hosting * fix: use pull_request_target for PR comment permissions
1 parent 98a1f55 commit 25a84ba

File tree

3 files changed

+177
-1
lines changed

3 files changed

+177
-1
lines changed

‎.github/workflows/lighthouse-ci.yml‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
name: Lighthouse CI
2+
3+
on:
4+
pull_request_target:
5+
types: [opened, synchronize, reopened]
6+
push:
7+
branches: [master]
8+
9+
jobs:
10+
lighthouse:
11+
name: Lighthouse Performance Audit
12+
runs-on: ubuntu-latest
13+
permissions:
14+
pull-requests: write
15+
contents: read
16+
issues: write
17+
18+
steps:
19+
- name: Checkout code
20+
uses: actions/checkout@v4
21+
with:
22+
fetch-depth: 0
23+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '20'
29+
cache: 'npm'
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Install Lighthouse CI
35+
run: npm install -g @lhci/cli@0.14.x
36+
37+
- name: Run Lighthouse CI
38+
id: lighthouse
39+
run: |
40+
lhci autorun --config=./lighthouserc.js 2>&1 | tee lighthouse-output.txt
41+
echo "LIGHTHOUSE_EXIT_CODE=$?" >> $GITHUB_ENV
42+
43+
- name: Parse Lighthouse Results
44+
id: parse
45+
run: |
46+
# Extract scores from the lighthouse output
47+
# Create a results summary
48+
mkdir -p lighthouse-results
49+
50+
# Find the latest report
51+
REPORT_DIR=".lighthouseci"
52+
if [ -d "$REPORT_DIR" ]; then
53+
# Get the manifest file
54+
MANIFEST="$REPORT_DIR/manifest.json"
55+
if [ -f "$MANIFEST" ]; then
56+
# Extract average scores from manifest
57+
PERF_SCORE=$(jq '[.[].summary.performance] | add / length * 100 | floor' "$MANIFEST" 2>/dev/null || echo "N/A")
58+
A11Y_SCORE=$(jq '[.[].summary.accessibility] | add / length * 100 | floor' "$MANIFEST" 2>/dev/null || echo "N/A")
59+
BP_SCORE=$(jq '[.[].summary["best-practices"]] | add / length * 100 | floor' "$MANIFEST" 2>/dev/null || echo "N/A")
60+
SEO_SCORE=$(jq '[.[].summary.seo] | add / length * 100 | floor' "$MANIFEST" 2>/dev/null || echo "N/A")
61+
62+
# Get report URL from temporary-public-storage
63+
REPORT_URL=$(jq -r '.[0].url // "N/A"' "$MANIFEST" 2>/dev/null)
64+
65+
echo "PERF_SCORE=$PERF_SCORE" >> $GITHUB_OUTPUT
66+
echo "A11Y_SCORE=$A11Y_SCORE" >> $GITHUB_OUTPUT
67+
echo "BP_SCORE=$BP_SCORE" >> $GITHUB_OUTPUT
68+
echo "SEO_SCORE=$SEO_SCORE" >> $GITHUB_OUTPUT
69+
echo "REPORT_URL=$REPORT_URL" >> $GITHUB_OUTPUT
70+
fi
71+
fi
72+
73+
- name: Get Score Emoji
74+
id: emoji
75+
run: |
76+
get_emoji() {
77+
score=$1
78+
if [ "$score" = "N/A" ]; then
79+
echo "⚪"
80+
elif [ "$score" -ge 90 ]; then
81+
echo "🟢"
82+
elif [ "$score" -ge 50 ]; then
83+
echo "🟠"
84+
else
85+
echo "🔴"
86+
fi
87+
}
88+
89+
echo "PERF_EMOJI=$(get_emoji '${{ steps.parse.outputs.PERF_SCORE }}')" >> $GITHUB_OUTPUT
90+
echo "A11Y_EMOJI=$(get_emoji '${{ steps.parse.outputs.A11Y_SCORE }}')" >> $GITHUB_OUTPUT
91+
echo "BP_EMOJI=$(get_emoji '${{ steps.parse.outputs.BP_SCORE }}')" >> $GITHUB_OUTPUT
92+
echo "SEO_EMOJI=$(get_emoji '${{ steps.parse.outputs.SEO_SCORE }}')" >> $GITHUB_OUTPUT
93+
94+
- name: Comment on PR
95+
if: github.event_name == 'pull_request'
96+
uses: thollander/actions-comment-pull-request@v3
97+
with:
98+
message: |
99+
## 🔦 Lighthouse Performance Report
100+
101+
| Category | Score | Status |
102+
|----------|-------|--------|
103+
| ⚡ Performance | **${{ steps.parse.outputs.PERF_SCORE }}** | ${{ steps.emoji.outputs.PERF_EMOJI }} |
104+
| ♿ Accessibility | **${{ steps.parse.outputs.A11Y_SCORE }}** | ${{ steps.emoji.outputs.A11Y_EMOJI }} |
105+
| ✅ Best Practices | **${{ steps.parse.outputs.BP_SCORE }}** | ${{ steps.emoji.outputs.BP_EMOJI }} |
106+
| 🔍 SEO | **${{ steps.parse.outputs.SEO_SCORE }}** | ${{ steps.emoji.outputs.SEO_EMOJI }} |
107+
108+
### Score Legend
109+
- 🟢 90-100: Excellent
110+
- 🟠 50-89: Needs Improvement
111+
- 🔴 0-49: Poor
112+
113+
> 📊 [View Full Lighthouse Report](${{ steps.parse.outputs.REPORT_URL }})
114+
115+
---
116+
*This performance audit helps ensure PRs don't negatively impact user experience.*
117+
comment-tag: lighthouse-report
118+
mode: recreate
119+
pr-number: ${{ github.event.pull_request.number }}
120+
121+
- name: Upload Lighthouse Reports
122+
uses: actions/upload-artifact@v4
123+
if: always()
124+
with:
125+
name: lighthouse-reports
126+
path: .lighthouseci/
127+
retention-days: 30

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ node_modules/
22
*~
33
coverage/
44
.DS_Store
5-
**/.DS_Store
5+
**/.DS_Store
6+
7+
# Lighthouse CI
8+
.lighthouseci/

‎lighthouserc.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module.exports = {
2+
ci: {
3+
collect: {
4+
// Use the static server to serve Music Blocks
5+
staticDistDir: "./",
6+
// Number of runs to average for more accurate results
7+
numberOfRuns: 3,
8+
// URLs to test
9+
url: ["http://localhost/index.html"],
10+
settings: {
11+
// Chrome flags for headless testing
12+
chromeFlags: "--headless --no-sandbox --disable-gpu",
13+
// Categories to audit
14+
onlyCategories: ["performance", "accessibility", "best-practices", "seo"],
15+
// Emulate mobile device for realistic testing
16+
preset: "desktop",
17+
// Set throttling for consistent results
18+
throttling: {
19+
rttMs: 40,
20+
throughputKbps: 10240,
21+
cpuSlowdownMultiplier: 1
22+
}
23+
}
24+
},
25+
assert: {
26+
// Assertions for performance budgets
27+
// These will warn but not fail the build initially
28+
assertions: {
29+
"categories:performance": ["warn", { minScore: 0.5 }],
30+
"categories:accessibility": ["warn", { minScore: 0.8 }],
31+
"categories:best-practices": ["warn", { minScore: 0.8 }],
32+
"categories:seo": ["warn", { minScore: 0.8 }],
33+
// Specific metrics to track
34+
"first-contentful-paint": ["warn", { maxNumericValue: 4000 }],
35+
"largest-contentful-paint": ["warn", { maxNumericValue: 6000 }],
36+
"cumulative-layout-shift": ["warn", { maxNumericValue: 0.25 }],
37+
"total-blocking-time": ["warn", { maxNumericValue: 600 }],
38+
"speed-index": ["warn", { maxNumericValue: 5000 }]
39+
}
40+
},
41+
upload: {
42+
// Use temporary public storage for reports (free, no setup required)
43+
target: "temporary-public-storage"
44+
}
45+
}
46+
};

0 commit comments

Comments
 (0)