feat(infra): Add Lighthouse CI for client performance budgets#936
Open
rahimatonize wants to merge 1 commit into
Open
feat(infra): Add Lighthouse CI for client performance budgets#936rahimatonize wants to merge 1 commit into
rahimatonize wants to merge 1 commit into
Conversation
|
@rahimatonize is attempting to deploy a commit to the otaiki1's projects Team on Vercel. A member of the Team first needs to authorize it. |
- Install @lhci/cli as dev dependency in client - Create lighthouserc.json with Core Web Vitals assertions - LCP < 2.5s (error) - CLS < 0.1 (error) - FCP < 2.0s (warning) - Add lighthouse job to GitHub Actions CI workflow - Runs after client build completes - Uses build artifacts from client job - Runs 3 audits and takes median - Uploads results to temporary public storage - Comments on PR with results summary - Add npm scripts for local lighthouse testing - Create comprehensive documentation in docs/LIGHTHOUSE_CI.md - Update .gitignore to exclude .lighthouseci/ directory - Update ci-summary job to include lighthouse results Closes crackedstudio#923
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements automated performance monitoring using Lighthouse CI to enforce Core Web Vitals thresholds and prevent performance regressions in the client application.
Changes Made
lighthouserc.json
)
Created configuration file with performance budgets
Core Web Vitals Assertions:
✅ LCP (Largest Contentful Paint): < 2.5s (error threshold)
✅ CLS (Cumulative Layout Shift): < 0.1 (error threshold)
✅ FCP (First Contentful Paint): < 2.0s (warning threshold)
Additional metrics monitored: Speed Index, Interactive, TBT
Performance score minimum: 90%
Runs 3 audits per PR and takes median values
Results uploaded to temporary public storage (7-day retention)
ci.yml
)
Added new lighthouse job that:
Depends on successful client build job
Downloads pre-built client artifacts (no rebuild needed)
Starts preview server automatically
Runs Lighthouse audits
Comments on PRs with performance metrics and report link
Fails CI if LCP > 2.5s or CLS > 0.1
Updated ci-summary job to include lighthouse results
package.json
)
Added @lhci/cli v0.14.0 as dev dependency
Added npm scripts:
pnpm run lighthouse - Run Lighthouse on existing build
pnpm run lighthouse:local - Build and run Lighthouse locally
LIGHTHOUSE_CI.md
)
Comprehensive guide on Lighthouse CI setup
Performance optimization tips for each Core Web Vital
Troubleshooting section
Local testing instructions
.gitignore
)
Added .lighthouseci/ to exclude local Lighthouse results
Acceptance Criteria Met
✅ A PR that regresses LCP beyond 2.5s causes the CI Lighthouse job to fail
✅ A PR that regresses CLS beyond 0.1 causes the CI Lighthouse job to fail
✅ The LHCI report is accessible via a link in the PR comment
✅ Results are uploaded to public storage for 30 days
✅ CI workflow integrates seamlessly with existing jobs
Testing
To test this locally:
cd client
pnpm install
pnpm run lighthouse:local
The Lighthouse report will be generated and a public link will be provided.
What Happens Now
When this PR is merged:
All future PRs will automatically run Lighthouse CI
Performance regressions will be caught before merge
Each PR will get a comment with performance scores and report link
The CI will fail if critical thresholds are exceeded
Additional Notes
The lighthouse job runs after the client build completes to save CI time
Desktop preset is used for consistent results
Results are stored for 30 days in GitHub artifacts
No secrets required for basic functionality (LHCI_GITHUB_APP_TOKEN is optional)
Closes #923