Automate Lighthouse + Core Web Vitals and Release Notes: Proof of Rigor for Angular 20+ Teams

Why Automate Lighthouse and Core Web Vitals for Angular 20+

Firebase Preview, Lighthouse CI, and PR Annotations

{
  "$schema": "https://json.schemastore.org/lighthouserc.json",
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "settings": {
        "formFactor": "mobile",
        "screenEmulation": { "mobile": true },
        "throttlingMethod": "simulate"
      },
      "url": [
        "https://preview.example.app/",
        "https://preview.example.app/dashboard"
      ]
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.90 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "interactive-to-next-paint": ["error", { "maxNumericValue": 200 }]
      }
    }
  }
}

name: preview-lighthouse-cwv
on:
  pull_request:
    branches: [ main ]
jobs:
  build-preview-lhci:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      id-token: write
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - name: Nx affected build
        run: pnpm nx affected --target=build --configuration=production --parallel=3
      - name: Firebase preview deploy
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: your-firebase-project
          channelId: pr-${{ github.event.pull_request.number }}
        id: deploy
      - name: Extract preview URL
        run: echo "PREVIEW_URL=${{ steps.deploy.outputs.details_url }}" >> $GITHUB_ENV
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          urls: |
            ${{ env.PREVIEW_URL }}
            ${{ env.PREVIEW_URL }}dashboard
          configPath: .lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true
      - name: Summarize results
        run: |
          echo "## Core Web Vitals (Preview)" >> $GITHUB_STEP_SUMMARY
          echo "Preview: ${{ env.PREVIEW_URL }}" >> $GITHUB_STEP_SUMMARY
          echo "Artifacts attached to this workflow run." >> $GITHUB_STEP_SUMMARY
      - name: PR comment
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          recreate: true
          message: |
            ✅ Firebase Preview: ${{ env.PREVIEW_URL }}
            🔎 Lighthouse CI: artifacts attached
            Gates: Perf ≥90, A11y ≥95, LCP ≤2.5s, INP ≤200ms, CLS ≤0.1

Release Notes That Prove Rigor: Conventional Commits → Changelog → GitHub Release

name: release-notes
on:
  push:
    branches: [ main ]
jobs:
  release:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      issues: write
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: pnpm install --frozen-lockfile
      - name: semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npx semantic-release
      - name: Attach CWV summary to release
        uses: actions/github-script@v7
        with:
          script: |
            const latest = await github.request('GET /repos/{owner}/{repo}/releases/latest', {
              owner: context.repo.owner, repo: context.repo.repo
            });
            const body = `${latest.data.body}\n\n---\nCore Web Vitals Summary\n- LCP: ${process.env.LCP} ms\n- INP: ${process.env.INP} ms\n- CLS: ${process.env.CLS}\n(From last Lighthouse CI on main)`;
            await github.request('PATCH /repos/{owner}/{repo}/releases/{release_id}', {
              owner: context.repo.owner, repo: context.repo.repo, release_id: latest.data.id, body
            });

Expose Build Metadata In‑App with SignalStore

// build-info.store.ts (Angular 20 + NgRx SignalStore)
import { computed, inject } from '@angular/core';
import { signalStore, withState, withComputed } from '@ngrx/signals';

interface LighthouseSummary {
  performance: number;  // 0..1
  accessibility: number; // 0..1
  lcpMs: number;
  inpMs: number;
  cls: number;
}
interface BuildInfoState {
  version: string;
  commit: string;
  lighthouse?: LighthouseSummary;
}

export const BuildInfoStore = signalStore(
  { providedIn: 'root' },
  withState<BuildInfoState>({ version: '0.0.0', commit: 'dev' }),
  withComputed(({ version, commit, lighthouse }) => ({
    shortCommit: computed(() => commit().slice(0, 7)),
    tagLabel: computed(() => `${version()} (${commit().slice(0,7)})`),
    perfPct: computed(() => Math.round((lighthouse()?.performance ?? 0) * 100))
  }))
);

<!-- PrimeNG panel in a help drawer -->
<p-panel header="Build & Quality">
  <div class="meta">
    <span>Version: {{ build.tagLabel() }}</span>
    <span *ngIf="build.perfPct() as p">Perf: {{ p }}%</span>
    <span *ngIf="build.lighthouse()?.lcpMs">LCP: {{ build.lighthouse()!.lcpMs }} ms</span>
    <span *ngIf="build.lighthouse()?.inpMs">INP: {{ build.lighthouse()!.inpMs }} ms</span>
    <span *ngIf="build.lighthouse()?.cls">CLS: {{ build.lighthouse()!.cls }}</span>
  </div>
</p-panel>

When to Hire an Angular Developer for CWV Automation

How an Angular Consultant Approaches CWV Guardrails and Release Notes

Takeaways and Next Metrics

• Run Lighthouse against real preview hosting, not localhost. Gates prevent regressions.
• Automate release notes and append CWV changes so hiring managers see rigor.
• Surface build + metrics in‑app with a Signals/SignalStore store for support and audits.
• Keep CI fast with Nx affected and only-what-changed builds.

Next to instrument: backend TTFB, hydration time, and route-level performance budgets piped to GA4/BigQuery for trend charts.

Questions You Should Ask Your Team

• Do we block merges on INP/LCP/CLS or just observe them?
• Can we produce release notes with CWV diffs in under a minute?
• Are preview URLs stable and shareable for every PR?
• Can support answer “which build is live?” from the UI?
• How long does CI take? Are we using Nx affected to stay under 10 minutes?