Lighthouse artık performans bütçelerini destekliyor. Lightwallet olarak bilinen bu özellik beş dakikadan daha kısa sürede kurulabilir ve performans metrikleri ile sayfa kaynaklarının boyutu ve miktarı hakkında geri bildirim sağlar.
Lighthouse'u yükleme
LightWallet, Lighthouse v5 ve sonraki sürümlerin komut satırı sürümünde kullanılabilir.
Başlamak için Lighthouse'u yükleyin:
npm install -g lighthouse
Bütçe Oluşturma
budget.json adlı bir dosya oluşturun. Bu dosyaya aşağıdaki JSON öğesini ekleyin:
[
{
"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
}
]
}
]
Bu örnek budget.json dosyası beş ayrı bütçe ayarlıyor:
- Etkileşime Hazır Olma Süresi için 3.000 ms'lik bütçe.
- İlk Anlamlı Boyama için 1.000 ms. bütçe
- Sayfadaki toplam JavaScript miktarı için 125 KB'lık bütçe.
- Sayfanın genel boyutu için 300 KB'lık bir bütçe.
- Üçüncü taraf kaynaklarına yapılan isteklerin sayısı için 10 isteklik bütçe.
Desteklenen performans metriklerinin ve kaynak türlerinin tam listesi için Lighthouse belgelerinin Performans Bütçeleri bölümüne bakın.
Lighthouse'u çalıştır
--budget-path işaretini kullanarak Lighthouse'u çalıştırın. Bu işaret, Lighthouse'a bütçe dosyanızın konumunu bildirir.
lighthouse https://example.com --budget-path=./budget.json
Sonuçları Görüntüle
Lightwallet doğru yapılandırıldıysa Lighthouse raporunda Performans kategorisinde Bütçeler bölümü bulunur.
Lighthouse raporunun JSON sürümünde, Lightwallet sonuçları performance-budget denetiminin denetim bulgularında bulunabilir.