Wie budgetiert man LCP und INP für die Core Web Vitals?

Kurze Antwort: LCP- und INP-Budgetierung heißt, von Googles veröffentlichten Schwellen (2,5 Sekunden für LCP, 200 Millisekunden für INP) rückwärts zu rechnen und jeder Phase ein Zeitkontingent zuzuweisen.

So wird das LCP-Budget aufgeteilt

• In vier Teile zerlegen: TTFB, Ladeverzögerung der Ressource, Ladezeit der Ressource, Renderverzögerung; jedem Teil ein Ziel geben.
• Das LCP-Element identifizieren (meist Hero-Bild oder Überschrift) und mit preload, fetchpriority und serverseitigem Caching versorgen.

So entsteht das INP-Budget

• Pro Interaktion Eingabeverzögerung, Verarbeitung und Darstellung messen; lange Tasks in Stücke unter 50 Millisekunden zerteilen.
• Die schlechtesten Interaktionen per web-vitals-Bibliothek an GA4 senden und aus dem Feld lernen, welche Komponente das Budget sprengt.

Das Budget richtet sich nach Zielgerät und Netzprofil: ein Android-Gerät der Mittelklasse mit 4G ist für viele Märkte die realistische Basis. Validiert wird am 75. Perzentil der Felddaten; jeder Pull Request über dem Budget wird vor dem Release über Lighthouse CI gestoppt.