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

Katie Hempenius
Katie Hempenius
X

Lighthouse obsługuje teraz budżety wydajności. Tę funkcję, znaną jako LightWallet, można skonfigurować w mniej niż 5 minut. Dostarcza ona informacji o wskaźnikach skuteczności oraz rozmiarze i liczbie zasobów strony.

Instalowanie Lighthouse

Narzędzie LightWallet jest dostępne w wersji Lighthouse 5 lub nowszej w wierszu poleceń.

Aby rozpocząć, zainstaluj Lighthouse:

npm install -g lighthouse

Utwórz budżet

Utwórz plik o nazwie budget.json. W tym pliku dodaj ten 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
      }
    ]
  }
]

W tym przykładowym pliku budget.json ustawiono 5 osobnych budżetów:

  • Budżet 3000 ms na czas do pełnej interaktywności.
  • Budżet 125 KB na łączną ilość kodu JavaScript na stronie.
  • Budżet 300 KB na łączny rozmiar strony.
  • Budżet 10 żądań dla liczby żądań wysyłanych do źródeł zewnętrznych.

Pełną listę obsługiwanych wskaźników skuteczności i typów zasobów znajdziesz w sekcji Budżety wydajności w dokumentacji Lighthouse.

Uruchamianie Lighthouse

Uruchom Lighthouse z flagą --budget-path. Ta flaga informuje Lighthouse o lokalizacji pliku budżetu.

lighthouse https://example.com --budget-path=./budget.json

Wyświetlanie wyników

Jeśli narzędzie LightWallet zostało skonfigurowane prawidłowo, raport Lighthouse będzie zawierać sekcję Budżety w kategorii Wydajność.

Sekcja „Budżety” w raporcie Lighthouse

W wersji JSON raportu Lighthouse wyniki Lightwallet można znaleźć w wynikach kontroli performance-budget.