Performance-Budget berechnen

{
    "ci": {
        "assert": {
            "assertions": {
                "resource-summary:total:size": [
                    "error",
                    {
                        "maxNumericValue": 4608000
                    }
                ],
                "resource-summary:script:size": [
                    "error",
                    {
                        "maxNumericValue": 1689600
                    }
                ],
                "resource-summary:image:size": [
                    "error",
                    {
                        "maxNumericValue": 1075200
                    }
                ],
                "resource-summary:stylesheet:size": [
                    "error",
                    {
                        "maxNumericValue": 92160
                    }
                ],
                "resource-summary:font:size": [
                    "error",
                    {
                        "maxNumericValue": 184320
                    }
                ],
                "resource-summary:total:count": [
                    "warn",
                    {
                        "maxNumericValue": 130
                    }
                ],
                "largest-contentful-paint": [
                    "error",
                    {
                        "maxNumericValue": 4000
                    }
                ],
                "total-blocking-time": [
                    "error",
                    {
                        "maxNumericValue": 800
                    }
                ],
                "cumulative-layout-shift": [
                    "error",
                    {
                        "maxNumericValue": 0.25
                    }
                ],
                "categories:performance": [
                    "error",
                    {
                        "minScore": 0.4
                    }
                ]
            }
        }
    }
}

[
    {
        "path": "/*",
        "timings": [
            {
                "metric": "largest-contentful-paint",
                "budget": 4000
            },
            {
                "metric": "total-blocking-time",
                "budget": 800
            },
            {
                "metric": "cumulative-layout-shift",
                "budget": 0.25
            }
        ],
        "resourceSizes": [
            {
                "resourceType": "total",
                "budget": 4500
            },
            {
                "resourceType": "script",
                "budget": 1650
            },
            {
                "resourceType": "image",
                "budget": 1050
            },
            {
                "resourceType": "stylesheet",
                "budget": 90
            },
            {
                "resourceType": "font",
                "budget": 180
            }
        ],
        "resourceCounts": [
            {
                "resourceType": "total",
                "budget": 130
            }
        ]
    }
]

Budget und Ziel: zwei Werte mit unterschiedlicher Aufgabe

Das Ziel beschreibt, wo eine Seite hin soll, zum Beispiel ein LCP unter 2,5 Sekunden oder eine Startseite unter einem Megabyte. Das Budget ist die Grenze, die auf dem Weg dorthin nicht mehr überschritten wird. Tammy Everts von SpeedCurve empfiehlt, das Budget am schlechtesten Wert der letzten zwei bis vier Wochen auszurichten und einen kleinen Puffer aufzuschlagen. So greift es vom ersten Tag an bei Rückschritten, statt jeden Build scheitern zu lassen, bis der große Umbau erledigt ist. Wird die Seite schneller, ziehen Sie das Budget nach.

Nach dieser Logik rechnet auch der Rechner. Ohne eigene Werte dient der Median der Vergleichsgruppe als Budget: Wer schwerer ist als die typische Website auf derselben Plattform, hat ein klares Warnsignal. Das Ziel liegt 20 Prozent darunter. Tragen Sie Ihre aktuellen Werte ein, ergibt sich das Budget aus Ihrem Wert plus fünf Prozent, und das Ziel bleibt am Vergleich ausgerichtet.

Metriken im Performance-Budget: wenige, aber die richtigen

Ein Budget mit zwanzig Grenzwerten liest niemand. SpeedCurve spricht vom Minimum Viable Budget, also wenigen Metriken, auf die das Team tatsächlich schaut. Am Anfang stehen Größenbudgets je Ressourcentyp. Sie fangen versehentliche Rückschritte früh ab, etwa eine neue Slider-Bibliothek oder ein unkomprimiertes Titelbild, lange bevor sich das in den Felddaten zeigt. Für JavaScript gilt die strengste Grenze, weil jedes Kilobyte geladen, geparst und auf dem Hauptthread ausgeführt werden muss.

Zeitbudgets verbinden die Grenzen mit dem, was Besucher erleben. Im Labor ist die Total Blocking Time der beste Stellvertreter für INP, der Labor-LCP zeigt, ob das größte Element rechtzeitig erscheint. Ein Mindestwert für den Lighthouse-Score taugt als Kennzahl für Übersichten, hängt aber von vielen Faktoren gleichzeitig ab und sollte deshalb nie die einzige Grenze sein. Die Felddaten aus dem Chrome UX Report bewegen sich über 28 Tage und eignen sich eher für den Alarm als für das Blockieren eines Builds.

Berechnung: Median der Vergleichsgruppe als Budget, 20 Prozent darunter als Ziel

Grundlage sind die Messungen von PerfDelta. Jede Website der monatlichen Statistik wurde mit Lighthouse im mobilen Profil getestet, die Mediane entstehen je Plattform und je Branche. Das Seitengewicht ist die übertragene Datenmenge, aufgeteilt in JavaScript, Bilder, CSS und Schriften, so wie die Ressourcenübersicht von Lighthouse sie ausweist. Wo die Stichprobe einer Branche für einen stabilen Median je Ressourcentyp noch nicht reicht, stammen die Gewichte aus allen Websites, und ein Hinweis unter der Tabelle sagt das.

Die Zeitbudgets folgen den Schwellen von Google: Vier Sekunden LCP und ein CLS von 0,25 markieren die Grenze zum schlechten Bereich, 2,5 Sekunden und 0,1 den guten Bereich und damit das Ziel. Alle Werte sind auf runde Stufen gerundet, weil sich über 500 KB im Team leichter sprechen lässt als über 487 KB.

Lighthouse CI: budget.json und Assertions in der lighthouserc.json

Lighthouse CI führt Lighthouse in der Build-Pipeline aus und lässt den Build scheitern, wenn eine Grenze überschritten ist. Lange war die budget.json das übliche Format, mit Dateigrößen in Kilobyte und Zeiten in Millisekunden. Mit Version 12 vom April 2024 hat Lighthouse die Budgets entfernt, und die Option budgetsFile von Lighthouse CI baut auf genau dieser Prüfung auf. In aktuellen Pipelines stehen die Grenzen deshalb als Assertions in der lighthouserc.json: resource-summary:script:size begrenzt das JavaScript mit einem Wert in Byte, categories:performance setzt den Mindest-Score.

Der Rechner gibt beide Formate aus. Die lighthouserc.json ist für aktuelle Pipelines gedacht, die budget.json für ältere Setups und Werkzeuge, die das Format weiterhin lesen. Der Seitentyp legt den Pfad fest. Weil Vorlagen für Artikel und Produktseiten andere Skripte und Bilder laden als die Startseite, verdient jeder Seitentyp ein eigenes Budget.

Budget einhalten: Alarm, Nachschärfen und klare Zuständigkeit

Ein Budget wirkt nur, wenn jemand von der Überschreitung erfährt. Lassen Sie Lighthouse CI bei jedem Pull Request laufen und messen Sie die Live-Seite zusätzlich im festen Takt, denn Tag-Manager und Inhalte aus dem CMS verändern Seiten auch ohne Deployment. Paul Calvano rät, auf Felddaten zu alarmieren und mit Labordaten zu diagnostizieren: Das Feld zeigt, dass Besucher betroffen sind, der Labortest zeigt, welche Datei es verursacht.

Prüfen Sie das Budget alle paar Wochen. Liegt eine Metrik einen Monat lang deutlich unter ihrer Grenze, senken Sie die Grenze auf das neue Niveau, sonst verbraucht das nächste Feature den gewonnenen Spielraum. Legen Sie außerdem fest, wer für welches Budget verantwortlich ist und was bei einer Überschreitung passiert, ob die Änderung zurückgerollt oder mit Ticket bewusst akzeptiert wird.

In den bezahlten Tarifen prüft das Monitoring von PerfDelta Ihre Budgets automatisch: Grenzen je Projekt oder URL, eine E-Mail bei Überschreitung und bei der Rückkehr ins Budget sowie ein Bestanden-Status über API und MCP für Ihre CI-Pipeline. Tarife und Umfang stehen auf der Preisseite.

Häufige Fragen

Was ist ein Performance-Budget?

Eine Reihe von Obergrenzen für Kennzahlen, die die Ladezeit bestimmen, etwa Seitengewicht, JavaScript-Größe, Total Blocking Time oder Lighthouse-Score. Überschreitet eine Änderung eine Grenze, scheitert der Build oder es kommt ein Alarm, bevor Besucher die langsamere Seite bemerken.

Welches Budget für das Seitengewicht ist sinnvoll?

Eine allgemeingültige Zahl gibt es nicht. Beginnen Sie mit dem Median Ihrer Plattform aus dem Rechner und setzen Sie das Budget nicht unter Ihr aktuelles Gewicht plus Puffer. Danach senken Sie es schrittweise. Unter einem Megabyte gilt eine ganze Seite als schlank, und beim JavaScript ist jedes Kilobyte am teuersten.

Unterstützt Lighthouse die budget.json noch?

Lighthouse hat Budgets mit Version 12 im April 2024 entfernt. In Lighthouse CI lassen sich dieselben Grenzen als Assertions in der lighthouserc.json formulieren, etwa resource-summary:script:size mit einem Wert in Byte. Der Rechner erzeugt beide Formate.

Budget für Mobil oder Desktop?

Zuerst mobil. Die Vergleichswerte stammen aus mobilen Lighthouse-Tests, bei denen langsamere CPU und langsameres Netz schwere Seiten deutlich zeigen. Desktop-Budgets leiten Sie später aus Ihren eigenen Messungen ab.

Siehe auch: Core Web Vitals Monitoring.

Anleitungen zu jeder Metrik und jedem Befund stehen im Pagespeed optimieren.

PerfDelta wird von Christian Schreiber entwickelt, der seit über 15 Jahren an SEO und Web Performance arbeitet.