Narzędzie Lighthouse obsługuje teraz budżety wydajności. Ta funkcja, zwana LightWallet, może zostać skonfigurowana w mniej niż 5 minut i zapewnia informacje o danych dotyczących wydajności oraz rozmiaru i liczby zasobów strony.
Instalacja Lighthouse
LightWallet jest dostępny w wersji Lighthouse 5 lub nowszej w wersji wiersza poleceń.
Aby rozpocząć, zainstaluj Lighthouse:
npm install -g lighthouse
Tworzenie budżetu
Utwórz plik o nazwie budget.json. W tym pliku dodaj ten fragment kodu JSON:
[
{
"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
}
]
}
]
W tym przykładowym pliku budget.json zdefiniowano 5 oddzielnych budżetów:
- Budżet 3000 ms na czas do pełnej interaktywności.
- Budżet 1000 ms na pierwsze wyrenderowanie elementu znaczącego
- Budżet 125 KB na łączną ilość kodu JavaScript na stronie.
- Budżet 300 KB na łączny rozmiar strony.
- Budżet 10 żądań na liczbę żądań wysłanych do źródeł zewnętrznych.
Pełną listę obsługiwanych danych o skuteczności i typów zasobów znajdziesz w sekcji Budżety wydajności w dokumentacji Lighthouse.
Uruchamianie Lighthouse
Uruchom Lighthouse, używając flagi --budget-path. Ten parametr informuje Lighthouse o lokalizacji pliku budżetu.
lighthouse https://example.com --budget-path=./budget.json
Wyświetlanie wyników
Jeśli LightWallet jest prawidłowo skonfigurowany, raport Lighthouse będzie zawierać sekcję Budżety w kategorii Skuteczność.
W raporcie Lighthouse w formacie JSON wyniki Lightwallet można znaleźć w wynikach audytu dotyczącego performance-budget.