Lighthouse obsługuje teraz budżety wydajności. Tę funkcję, nazywaną LightWallet, można skonfigurować w niecałe 5 minut. Zapewnia ona informacje zwrotne na temat danych o wydajności oraz rozmiaru i liczby zasobów strony.
Zainstaluj Lighthouse
Usługa LightWallet jest dostępna w Light Wallet w wersji 5 lub nowszej z wiersza poleceń.
Aby rozpocząć, zainstaluj Lighthouse:
npm install -g lighthouse
Tworzenie budżetu
Utwórz plik o nazwie budget.json. W tym pliku dodaj następujący kod 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
}
]
}
]
Ten przykładowy plik budget.json ustawia 5 osobnych budżetów:
- Budżet na czas do pełnej interaktywności to 3000 ms.
- Budżet 1000 ms na pierwsze wyrenderowanie istotnego elementu
- Budżet 125 KB dotyczący łącznej ilości kodu JavaScriptu na stronie.
- Budżet o wielkości 300 KB dla ogólnego rozmiaru strony.
- Budżet wynoszący 10 żądań na podstawie liczby żądań wysłanych do zewnętrznych źródeł.
Pełną listę obsługiwanych danych o skuteczności i typów zasobów znajdziesz w sekcji Budżety wydajności w dokumentacji Lighthouse.
Uruchom latarnię morską
Uruchom Lighthouse, używając flagi --budget-path. Ta flaga informuje Lighthouse o lokalizacji pliku z budżetem.
lighthouse https://example.com --budget-path=./budget.json
Wyświetl wyniki
Jeśli usługa LightWallet jest prawidłowo skonfigurowana, raport Lighthouse będzie zawierał sekcję Budżety w kategorii Skuteczność.
W wersji raportu Lighthouse w formacie JSON wyniki z Lightwallet można znaleźć w wynikach z audytu performance-budget.