Lighthouse artık performans bütçelerini destekliyor. LightWallet olarak bilinen bu özellik beş dakikadan 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+ sürümünün 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 belirler:
- Etkileşime Hazır Olma Süresi için 3.000 ms'lik bir bütçe.
- Sayfadaki toplam JavaScript miktarı için 125 KB'lık bir bütçe.
- Sayfanın toplam boyutu için 300 KB'lık bir bütçe.
- Üçüncü taraf kaynaklara yapılan istek sayısı için 10 istek bütçesi.
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ırma
--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 raporunun Performans kategorisinde bir Bütçeler bölümü bulunur.
Lighthouse raporunun JSON sürümünde, Lightwallet sonuçları performance-budget denetiminin denetim bulgularında bulunabilir.