Lighthouse artık performans bütçelerini desteklemektedir. Lightwallet olarak bilinen bu özellik, beş dakikadan kısa bir süre içinde kurulabilir. Bu özellik, performans metrikleri ve 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'u 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 3000 ms'lik bir bütçe.
- İlk Anlamlı Boyama için 1000 ms'lik bütçe
- Sayfadaki toplam JavaScript miktarı için 125 KB'lık bir bütçe.
- Sayfanın genel boyutu için 300 KB'lık bir bütçe.
- Üçüncü taraf kaynaklara gönderilen isteklerin sayısı için 10 kişilik 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ın
--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üleyin
Lightwallet doğru şekilde yapılandırılmışsa Lighthouse raporu Performans kategorisinde bir Bütçeler bölümü içerir.
Lighthouse raporunun JSON sürümünde, Lightwallet sonuçları performance-budget denetiminin denetim bulgularında bulunabilir.