Performans izleme

Lighthouse ve web vitals ile performansı izlemeyi öğrenirsin.

Performans izleme

Web Vitals, kullanıcı deneyimini özetleyen üç temel ölçümdür: LCP (en büyük boyalı içerik), INP (etkileşim gecikmesi) ve CLS (düzen kayması). React'te web-vitals paketi bu değerleri yakalar.

Değerleri bir toplama servisine gönderirsin; örneğin sendToAnalytics(metric). CI içine Lighthouse denetimi ekleyerek her push'ta regresyon yakalarsın.

Lighthouse, erişilebilirlik ve SEO puanını da verir; düşük puan derleme başarısız sayılabilir.

Lighthouse denetimi

Lighthouse, sayfanın performans, erişilebilirlik ve SEO puanını verir. CI içinde lhci komutu ile çalıştırılır; eşik altına düşerse build başarısız olur.

Regresyon yakalamak için temel (baseline) bir JSON kaydedilir; sonraki koşular bununla karşılaştırılır. Puan düşerse ekip uyarılır.

Önemli ölçümler için bir bütçe (budget) belirlersin; örneğin JS paketi 200 KB'ı geçemez.

Uygulama Web Vitals toplama fonksiyonu yaz

reportWebVitals fonksiyonu yaz. metric parametresi alsın, içine console.log(metric.name, metric.value) yaz. Dışa aktar.

Örnek çözümü göster

function reportWebVitals(metric) {
  console.log(metric.name, metric.value);
}
export default reportWebVitals;

Kendini test et

Web Vitals ölçümlerini eşleştir

LCP

En büyük boyalı içerik
INP

Etkileşim gecikmesi
CLS

Düzen kayması
TTFB

İlk bayt süresi
INP neyi ölçer?
- En büyük boyalı içeriği
- Düzen kaymasını
- Etkileşimden sonra tepki gecikmesini
- İlk bayt süresini
Cevabı göster

Etkileşimden sonra tepki gecikmesini — INP, etkileşim gecikmesini ölçer.

Boşluğu doldur: Lighthouse eşiği ayarla

assertions:
  categories:
    performance: ____
    accessibility: 90

Cevabı göster

assertions:
  categories:
    performance: 0.8
    accessibility: 90

Sıradaki ders: Özet - CI/CD ve izleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler