Lighthouse obsługuje teraz budżety skuteczności. Funkcję tę, znaną jako LightWallet, można skonfigurować w mniej niż 5 minut. Dostarcza ona informacji na temat danych dotyczących wydajności oraz rozmiaru i ilości zasobów strony.
Zainstaluj Lighthouse
Pakiet LightWallet jest dostępny w wierszu poleceń narzędzia Lighthouse w wersji 5 lub nowszej.
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 pięć osobnych budżetów:
- Budżet 3000 ms na potrzeby czasu interakcji z reklamą.
- Budżet 1000 ms na pierwsze wyrenderowanie elementu znaczącego
- Budżet wynoszący 125 KB za łączną ilość kodu JavaScript na stronie.
- Budżet wynoszący 300 KB na ogólny rozmiar strony.
- Budżet wynoszący 10 żądań na liczbę żądań skierowanych do źródeł zewnętrznych.
Pełną listę obsługiwanych danych o wydajności i typów zasobów znajdziesz w sekcji Budżety wydajności w dokumentacji Lighthouse.
Uruchom Lighthouse
Uruchom Lighthouse, korzystając z flagi --budget-path. Ta flaga informuje Lighthouse o lokalizacji pliku budżetu.
lighthouse https://example.com --budget-path=./budget.json
Zobacz wyniki
Jeśli usługa LightWallet została skonfigurowana prawidłowo, raport Lighthouse będzie zawierał sekcję Budżety w kategorii Skuteczność.
W wersji JSON raportu Lighthouse wyniki z usługi Lightwallet można znaleźć w wynikach z kontroli performance-budget.