Skip to content

feat(infra): Add Lighthouse CI for client performance budgets#936

Open
rahimatonize wants to merge 1 commit into
crackedstudio:masterfrom
rahimatonize:infra/add-lighthouse-ci
Open

feat(infra): Add Lighthouse CI for client performance budgets#936
rahimatonize wants to merge 1 commit into
crackedstudio:masterfrom
rahimatonize:infra/add-lighthouse-ci

Conversation

@rahimatonize

Copy link
Copy Markdown

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

  1. Lighthouse CI Configuration (
    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)
  2. GitHub Actions Integration (
    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
  3. Dependencies (
    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
  4. Documentation (
    LIGHTHOUSE_CI.md
    )
    Comprehensive guide on Lighthouse CI setup
    Performance optimization tips for each Core Web Vital
    Troubleshooting section
    Local testing instructions
  5. Gitignore (
    .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

@vercel

vercel Bot commented Jun 28, 2026

Copy link
Copy Markdown

@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[infra] Add Lighthouse CI to GitHub Actions for client performance budgets

1 participant