Performance Budget und Core Web Vitals fürs TeamLighthouse CI in der Praxis (2026)

TL;DR

Ein Performance Budget sind harte Schwellen (LCP, INP, CLS, JS-Größe), die CI blockiert, wenn ein PR sie überschreitet — statt Regression eine Woche später in der Search Console zu entdecken. Lighthouse CI auditiert den Produktions-Build bei jedem Pull Request und verhindert Merge bei mobile LCP > 2,5 s oder CLS > 0,1. Dev, Design und Marketing teilen eine Budget-Tabelle: Hero max 200 KB, Third-Party-Skripte nur nach Review, GA4 afterInteractive, Ads lazyOnload. Hosting auf DevStudioIT Cloud plus RUM nach Deploy schließt die Lücke zwischen CI-Synthetik und echten Nutzern.

Für wen

• Next.js-/React-Teams, die pro Sprint Komponenten hinzufügen, bis LCP 4 s erreicht
• Product Owner mit Google-Ads-Konversionen — langsame Landingpages erhöhen CPC
• Unternehmen ohne Performance Engineer — Lighthouse CI als Gatekeeper
• Designer mit Animationen und Fonts — Budget erzwingt Tradeoffs vor Merge
• Projekte nach SEO-Audit mit „gelben" CWV — dauerhaft grün halten

Keyword

performance budget core web vitals, lighthouse ci team, lcp inp cls schwellen, performance budget ci, performance regression pull request, lighthouse github actions 2026

Was ein Performance Budget 2026 ist

Messbare Limits in CI und Projektdoku:

Budget verhindert Regression — erste Optimierung bleibt Handarbeit.

Core Web Vitals — Ziele fürs Produktteam

Google bewertet LCP, INP, CLS in Field Data (CrUX). Lighthouse in CI korreliert, ersetzt CrUX nicht.

Marketing: neues Tracking ohne lazyOnload = erwartetes +200 ms LCP in LHCI.

Lighthouse CI — Repository

lighthouserc.json im Repo-Root mit Asserts für Performance ≥ 0,85, LCP ≤ 2500, CLS ≤ 0,1. GitHub Actions: npm ci && npm run build, dann npx @lhci/cli autorun. Gleicher Build wie Deploy auf DevStudioIT Cloud. Details: Lighthouse CI Next.js.

JS- und Third-Party-Budget — PR-Review

Checkliste: neues npm-Paket begründen, Hero AVIF/WebP, Marketing-Skripte lazyOnload, Fonts subset, Client vs Server Component.

INP in der Praxis

Chatbot afterInteractive, schweres Mobile-Menü, Scroll-Handler ohne Debounce. Optional INP-Assert in LHCI oder RUM mit web-vitals.

RUM nach Deploy

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(m => navigator.sendBeacon('/api/vitals', JSON.stringify(m)));

Wöchentlich p75 mit CrUX vergleichen.

Eskalation bei Budget-Block

Feature Flag, temporärer Assert-Ausnahme-Ticket, Code-Splitting, Scope-Kürzung — nicht dauerhaft minScore senken.

FAQ

Desktop in CI?

Ja, aber mobile Assert Pflicht für B2B.

Score vs LCP?

LCP/CLS/INP direkt asserten — Score ist Aggregat.

Monorepo?

Budget pro App. Marketing-Landing ≠ SaaS-Dashboard.

Wer zahlt Regression?

Ads Quality Score, CTR, Leads — CI-Budget lohnt sich vielfach.

Performance Budget bei Ihnen?

• Kontakt — Lighthouse CI, CWV-Schwellen, Review-Prozess
• Lighthouse CI Next.js
• Website-Performance