Performans bütçeleri için Lighthouse'u kullanma

Katie Hempenius
Katie Hempenius

Lighthouse artık performans bütçelerini destekliyor. LightWallet olarak bilinen bu özellik beş dakikadan kısa sürede ayarlanabilir 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'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.
  • İlk Anlamlı Boyama için 1.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 kaynaklarına yapılan istek sayısı için 10 isteklik bir bütçe.

Desteklenen performans metriklerinin ve kaynak türlerinin tam listesi için Lighthouse dokümanlarının Performans Bütçeleri bölümüne bakın.

Lighthouse'u çalıştırma

Lighthouse'u --budget-path işaretini kullanarak ç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üleme

LightWallet doğru şekilde yapılandırılmışsa Lighthouse raporunda Performans kategorisinde bir Bütçeler bölümü bulunur.

Lighthouse raporunun "Bütçeler" bölümü

Lighthouse raporunun JSON sürümünde, Lightwallet sonuçları performance-budget denetimine ait denetleme bulgularında bulunabilir.