Skip to content

Add Lighthouse CI performance checks #43

Description

@jvcorredor

Problem

There are no automated performance, accessibility, or SEO checks. Regressions in page load speed, a11y compliance, or SEO metadata go undetected until users report them.

Scope of Work

Add Lighthouse CI to the CI pipeline

Use treosh/lighthouse-ci-action to run Lighthouse against the built dist/ directory.

Setup:

  1. After the npm run build step, serve dist/ locally (e.g., with npx serve dist -l 8080 &)
  2. Run Lighthouse CI against http://localhost:8080
  3. Configure thresholds in a lighthouserc.json or inline

Suggested initial thresholds (lenient, ratchet up over time):

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["warn", { "minScore": 0.8 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["warn", { "minScore": 0.8 }],
        "categories:seo": ["warn", { "minScore": 0.9 }]
      }
    }
  }
}

Pages to test: At minimum, / (home) and /blog (listing).

Acceptance Criteria

  • Lighthouse CI runs in the CI pipeline after build
  • Performance, accessibility, best practices, and SEO scores are checked
  • Accessibility failures (error level) block the build
  • Performance/SEO failures are warnings (don't block but are visible)
  • Lighthouse report is uploaded as a CI artifact
  • Thresholds are documented and easy to update

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions