In Lighthouse werden jetzt Leistungsbudgets unterstützt. Diese Funktion, das sogenannte LightWallet, lässt sich in weniger als fünf Minuten einrichten und gibt Feedback zu Leistungsmesswerten sowie zur Größe und Menge der Seitenressourcen.
Lighthouse installieren
LightWallet ist in der Befehlszeilenversion von Lighthouse Version 5 oder höher verfügbar.
Installieren Sie zunächst Lighthouse:
npm install -g lighthouse
Budget erstellen
Erstellen Sie eine Datei mit dem Namen budget.json. Fügen Sie dieser Datei den folgenden JSON-Code 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 der Beispieldatei budget.json werden fünf separate Budgets festgelegt:
- Ein Budget von 3.000 ms für „Zeit bis Interaktivität“.
- Ein Budget von 1.000 ms für First Meaningful Paint
- Ein Budget von 125 KB für die Gesamtmenge von JavaScript auf der Seite.
- Ein Budget von 300 KB für die Gesamtgröße der Seite.
- Ein Budget von 10 Anfragen basierend auf der 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. Damit wird Lighthouse über den Speicherort Ihrer Budgetdatei informiert.
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 Abschnitt Budgets.
In der JSON-Version des Lighthouse-Berichts finden Sie die Lightwallet-Ergebnisse unter den Auditergebnissen für den performance-budget-Audit.