Improve Lighthouse CI workflow: use npm ci, npx, dynamic URL, and badges

[Copilot]

Addresses PR#40 review feedback to make the Lighthouse CI workflow more robust, reproducible, and secure.

Workflow improvements (.github/workflows/deploy.yml)

• Enable npm caching via cache: 'npm' in actions/setup-node@v4
• Replace npm install with npm ci for deterministic installs
• Use npx --yes @lhci/cli@0.15.x instead of global package installation
• Construct GitHub Pages URL dynamically from repository context variables
• Add Chrome flags --headless --no-sandbox --disable-gpu for headless CI execution
• Split into discrete named steps for clarity
• Add Lighthouse badge generation using myactionway/lighthouse-badger-action@v2.2
• Add contents: write permission for badge generation

Before:

- name: npm install, build
  run: |
    npm install
    npm run build

- name: run Lighthouse CI
  run: |
    npm install -g @lhci/cli@0.15.x
    lhci autorun

After:

- name: Use Node.js 20
  uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm'

- name: Install dependencies
  run: npm ci

- name: Build website
  run: npm run build

- name: Run Lighthouse CI
  run: >
    npx --yes @lhci/cli@0.15.x autorun
    --collect.url="https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
    --collect.settings.chromeFlags="--headless --no-sandbox --disable-gpu"

- name: Generate Lighthouse Badges
  uses: myactionway/lighthouse-badger-action@v2.2
  with:
    urls: 'https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/'

Configuration improvements (lighthouserc.js)

• Add collect section with numberOfRuns: 3 for reliable metrics
• Simplified configuration following Lighthouse getting started guide (no assertions initially)

Original prompt

Make the Lighthouse CI workflow changes requested in the pull request review thread (#40 (review)). Create a new branch and open a pull request that applies the following changes.

Context

• Current PR added lighthouserc.js and a new lighthouse job in .github/workflows/deploy.yml that runs npm install, npm run build, and installs @lhci/cli globally then runs lhci autorun.
• The reviewer suggested improving the workflow (comments summarized in the review). Implement robust, reproducible, and secure CI steps.

Files to modify

1. .github/workflows/deploy.yml
2. lighthouserc.js (small improvements)

Detailed changes to implement

A) .github/workflows/deploy.yml

• Create a new branch chore/lighthouse-ci-workflow-improvements from main and add/modify the lighthouse job under jobs:.
• Keep the job dependent on the deploy job (needs: deploy) so it runs after a successful deployment.
• Use actions/checkout@v4 to check out the repository.
• Use actions/setup-node@v4 with node-version: 20 and cache: 'npm' to enable automatic npm caching.
• Replace npm install with npm ci for deterministic installs.
• Install dev dependencies as needed by the build (use npm ci --omit=dev=false is unnecessary because CI should install all dependencies; use plain npm ci).
• Build the site with npm run build.
• Run Lighthouse CI without installing global packages by invoking it via npx to keep the environment clean: npx --yes @lhci/cli@0.15.x autorun --collect.url="https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
  • Use the GitHub Pages URL constructed from the repository owner/name as the audit URL. (This avoids relying on action outputs and keeps the job self-contained.)
• Provide Chrome flags to LHCI to run headless in GitHub Actions: pass `--collect.settings.chromeFlags=

This pull request was created as a result of the following prompt from Copilot chat.

Make the Lighthouse CI workflow changes requested in the pull request review thread (#40 (review)). Create a new branch and open a pull request that applies the following changes.

Context

• Current PR added lighthouserc.js and a new lighthouse job in .github/workflows/deploy.yml that runs npm install, npm run build, and installs @lhci/cli globally then runs lhci autorun.
• The reviewer suggested improving the workflow (comments summarized in the review). Implement robust, reproducible, and secure CI steps.

Files to modify

1. .github/workflows/deploy.yml
2. lighthouserc.js (small improvements)

Detailed changes to implement

A) .github/workflows/deploy.yml

• Create a new branch chore/lighthouse-ci-workflow-improvements from main and add/modify the lighthouse job under jobs:.
• Keep the job dependent on the deploy job (needs: deploy) so it runs after a successful deployment.
• Use actions/checkout@v4 to check out the repository.
• Use actions/setup-node@v4 with node-version: 20 and cache: 'npm' to enable automatic npm caching.
• Replace npm install with npm ci for deterministic installs.
• Install dev dependencies as needed by the build (use npm ci --omit=dev=false is unnecessary because CI should install all dependencies; use plain npm ci).
• Build the site with npm run build.
• Run Lighthouse CI without installing global packages by invoking it via npx to keep the environment clean: npx --yes @lhci/cli@0.15.x autorun --collect.url="https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
  • Use the GitHub Pages URL constructed from the repository owner/name as the audit URL. (This avoids relying on action outputs and keeps the job self-contained.)
• Provide Chrome flags to LHCI to run headless in GitHub Actions: pass `--collect.settings.chromeFlags=

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[theartcher]

Can you also add badges using https://github.com/myactionway/lighthouse-badger-action, at least the 'Pagespeed Badge' kind.

[theartcher]

It's not clear to me what this line does, can you give me some context?

[Copilot]

Line 74 (now line 77) constructs the GitHub Pages URL dynamically using repository context variables. github.repository_owner is the owner (e.g., "S7-OpenLearning-Individual") and github.event.repository.name is the repo name (e.g., "DesignPatternPedia"). This creates the full URL: https://s7-openlearning-individual.github.io/DesignPatternPedia/ which is where the site is deployed. This approach makes the workflow self-contained and reusable without hardcoding URLs.

[theartcher]

Why do you leave an empty object? Is it optional?

[Copilot]

The empty settings object has been removed in commit 72f908e. It was left there to show where Chrome flags could be configured in the config file, but they're now only passed via the command line in the workflow, making the config cleaner.

[theartcher]

The Lighthouse getting started guide recommended not yet adding assertions

[Copilot]

Assertions section removed in commit 72f908e. Following the Lighthouse getting started guide recommendation, the configuration now only includes collect and upload sections for a simpler initial setup.

[Copilot]

Can you also add badges using https://github.com/myactionway/lighthouse-badger-action, at least the 'Pagespeed Badge' kind.

Lighthouse badge generation added in commit 72f908e using myactionway/lighthouse-badger-action@v2.2. The action will generate Pagespeed badges and commit them to the repository. The required contents: write permission has also been added to the lighthouse job.

[Copilot]

Pull request overview

This PR improves the Lighthouse CI workflow by implementing code review feedback to enhance reproducibility, security, and maintainability of the GitHub Actions configuration. The changes modernize the workflow using npm best practices and add automated badge generation for Lighthouse metrics.

Key changes:

• Replaced npm install with npm ci and enabled npm caching for faster, deterministic builds
• Switched from global package installation to npx for cleaner CI execution
• Constructed GitHub Pages URL dynamically from repository context variables
• Added Lighthouse badge generation with appropriate repository permissions
• Configured Lighthouse CI to run 3 audits for more reliable metrics

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
.github/workflows/deploy.yml	Enhanced lighthouse job with npm caching, npm ci, npx usage, dynamic URL construction, Chrome headless flags, and badge generation with contents:write permission
lighthouserc.js	Added numberOfRuns configuration for reliable metrics averaging and normalized quote style to single quotes

[Copilot]

The badge generation step may fail if the repository is private or if the lighthouse-badger-action encounters issues writing to the repository. Consider adding error handling or making this step continue on error using 'continue-on-error: true' to prevent the entire workflow from failing if badge generation has issues.

Suggested change

	uses: myactionway/lighthouse-badger-action@v2.2
	uses: myactionway/lighthouse-badger-action@v2.2
	continue-on-error: true