Ship PRs With Numbers: Automating Lighthouse/Core Web Vitals Gates and Release Notes for Angular 20+

Ship PRs With Numbers: A Real Scene

As companies plan 2025 Angular roadmaps, hiring managers are asking for proof: Core Web Vitals before/after, and clean release notes. Here’s exactly how I wire it up so your PRs ship with numbers every time.

Why Lighthouse + Release Notes Automation Matters for Angular 20+ Teams

Configure Lighthouse CI Assertions

{
  "ci": {
    "collect": {
      "url": [
        "$PREVIEW_URL/",
        "$PREVIEW_URL/login",
        "$PREVIEW_URL/dashboard"
      ],
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop",
        "formFactor": "desktop",
        "throttlingMethod": "simulate"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["error", { "maxNumericValue": 100 }],
        "server-response-time": ["warn", { "maxNumericValue": 500 }]
      }
    },
    "upload": { "target": "temporary-public-storage" }
  }
}

GitHub Actions + Nx + Firebase Preview: Run LHCI on Every PR

name: ci-lighthouse
on:
  pull_request:
    branches: [ main ]

jobs:
  lhci:
    runs-on: ubuntu-latest
    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: Build affected apps
        run: pnpm nx affected --target=build --parallel=3
      - name: Deploy Firebase Preview
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_SITE: my-angularux-demo
        run: |
          npx firebase-tools hosting:channel:deploy pr-${{ github.event.number }} \
            --only $FIREBASE_SITE --expires 7d --json > preview.json
          echo "PREVIEW_URL=$(cat preview.json | jq -r '.result[]?.url // .result[]?.urls[0]')" >> $GITHUB_ENV
      - name: Run Lighthouse CI
        env:
          PREVIEW_URL: ${{ env.PREVIEW_URL }}
        run: |
          pnpm dlx @lhci/cli@0.12.x autorun \
            --collect.url=$PREVIEW_URL/ \
            --collect.url=$PREVIEW_URL/login \
            --collect.url=$PREVIEW_URL/dashboard \
            --config=.lighthouserc.json
      - name: Upload LH reports
        uses: actions/upload-artifact@v4
        with:
          name: lighthouse-report
          path: ./.lighthouseci/*
      - name: Comment summary
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const summary = `Lighthouse passed on ${process.env.PREVIEW_URL}. Reports attached.`;
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: summary
            });

Add an Nx Target for LHCI (Optional but Nice)

{
  "name": "dashboard",
  "targets": {
    "lhci": {
      "executor": "nx:run-commands",
      "options": {
        "command": "pnpm dlx @lhci/cli autorun --config=.lighthouserc.json"
      }
    }
  }
}

semantic-release: Generate Release Notes, Tags, and CHANGELOG

{
  "branches": ["main"],
  "plugins": [
    ["@semantic-release/commit-analyzer", {"preset": "conventionalcommits"}],
    ["@semantic-release/release-notes-generator", {"preset": "conventionalcommits"}],
    ["@semantic-release/changelog", {"changelogFile": "CHANGELOG.md"}],
    ["@semantic-release/github"],
    ["@semantic-release/git", {"assets": ["CHANGELOG.md"]}]
  ]
}

name: release
on:
  push:
    branches: [ main ]

jobs:
  semantic-release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm dlx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Expose Build Version in Angular 20+ (So Notes Match the App)

// version.token.ts
import { InjectionToken, inject } from '@angular/core';

export interface AppBuildInfo { version: string; commit: string; builtAt: string; }
export const APP_BUILD = new InjectionToken<AppBuildInfo>('APP_BUILD', {
  providedIn: 'root',
  factory: () => ({ version: '0.0.0-dev', commit: 'local', builtAt: new Date().toISOString() })
});

// app.component.ts (footer snippet)
import { Component, inject, signal } from '@angular/core';
import { APP_BUILD } from './version.token';

@Component({ selector: 'app-footer', template: `
  <footer class="app-footer">
    v{{ info.version }} ({{ info.commit.slice(0,7) }}) · <a target="_blank" [href]="releaseUrl">Release Notes</a>
  </footer>
` })
export class AppFooterComponent {
  private build = inject(APP_BUILD);
  info = this.build;
  get releaseUrl() { return `https://github.com/org/app/releases/tag/v${this.info.version}`; }
}

# During release job, generate a version file and bake it at deploy time
- name: Write build info
  run: |
    echo "export const build = { version: '${{ steps.semantic.outputs.nextRelease.version }}', commit: '${{ github.sha }}', builtAt: '$(date -u +%FT%TZ)' };" > src/environments/build.ts

Example Outcomes From Real Angular Projects

Jenkins/Azure DevOps Alternatives

pipeline {
  agent any
  stages {
    stage('Install') { steps { sh 'pnpm install --frozen-lockfile' } }
    stage('Build') { steps { sh 'pnpm nx affected --target=build' } }
    stage('Preview') { steps { sh 'npx firebase-tools hosting:channel:deploy pr-${BUILD_NUMBER} --expires 7d' } }
    stage('Lighthouse') { steps { sh 'pnpm dlx @lhci/cli autorun --config=.lighthouserc.json' } }
  }
}

trigger:
  - main

stages:
- stage: LHCI
  jobs:
  - job: lhci
    pool: { vmImage: 'ubuntu-latest' }
    steps:
      - task: NodeTool@0
        inputs: { versionSpec: '20.x' }
      - script: |
          pnpm i -g pnpm && pnpm install --frozen-lockfile
          pnpm nx affected --target=build
          npx firebase-tools hosting:channel:deploy pr-$(Build.BuildNumber) --expires 7d
          pnpm dlx @lhci/cli autorun --config=.lighthouserc.json

How an Angular Consultant Approaches Lighthouse Automation

Takeaways and Next Steps

• Make performance a gate, not a guideline. LCP ≤ 2.5s, CLS ≤ 0.1, TBT ≤ 100ms, Performance ≥ 90.
• Run Lighthouse against a real preview (Firebase Hosting) to capture SSR/hydration costs.
• Automate release notes with semantic‑release so every version tells a story.
• Use Nx affected to keep CI fast and cheap.
• Want help? I can wire this in 3–5 days without slowing delivery.