Lighthouse unterstützt jetzt Leistungsbudgets. Diese Funktion namens LightWallet lässt sich in weniger als fünf Minuten einrichten und liefert Feedback zu Leistungsmesswerten sowie zur Größe und Menge der Seitenressourcen.
Lighthouse installieren
LightWallet ist in der Befehlszeilenversion von Lighthouse Version 5 und höher verfügbar.
Installiere einfach Lighthouse:
npm install -g lighthouse
Budget erstellen
Erstellen Sie eine Datei mit dem Namen budget.json. Fügen Sie in dieser Datei die folgende JSON-Datei hinzu:
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
In dieser Beispieldatei budget.json sind fünf separate Budgets festgelegt:
- Ein Budget von 3.000 ms für „Time to Interactive“.
- Ein Budget von 1.000 ms für First Meaningful Paint
- Ein Budget von 125 KB für die Gesamtmenge an JavaScript auf der Seite.
- Ein Budget von 300 KB für die Gesamtgröße der Seite.
- Ein Budget von 10 Anfragen für die Anzahl der Anfragen an Drittanbieterquellen.
Eine vollständige Liste der unterstützten Leistungsmesswerte und Ressourcentypen finden Sie in der Lighthouse-Dokumentation im Abschnitt Leistungsbudgets.
Lighthouse ausführen
Führen Sie Lighthouse mit dem Flag --budget-path aus. Dieses Flag informiert Lighthouse über den Speicherort Ihrer Budgetdatei.
lighthouse https://example.com --budget-path=./budget.json
Ergebnisse ansehen
Wenn LightWallet richtig konfiguriert wurde, enthält der Lighthouse-Bericht in der Kategorie Leistung den Bereich Budgets.
In der JSON-Version des Lighthouse-Berichts finden Sie die Lightwallet-Ergebnisse in den Prüfungsergebnissen der performance-budget-Prüfung.