Używaj Lighthouse do określania budżetów wydajności

Katie Hempenius
Katie Hempenius

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ść.

Sekcja „Budżety” w raporcie Lighthouse

W raporcie Lighthouse w formacie JSON wyniki Lightwallet można znaleźć w wynikach audytu dotyczącego performance-budget.