Performans izleme
- React kursu
- İleri seviye
- Ders 51/56
- 4 dk
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.
Başlangıç kodu
// reportWebVitals fonksiyonunu buraya yazÖrnek çözüm
function reportWebVitals(metric) {
console.log(metric.name, metric.value);
}
export default reportWebVitals;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Web Vitals ölçümlerini eşleştir
| Kavram | Anlamı |
|---|---|
LCP |
En büyük boyalı içerik |
INP |
Etkileşim gecikmesi |
CLS |
Düzen kayması |
TTFB |
İlk bayt süresi |
2 INP neyi ölçer?
- En büyük boyalı içeriği
- Düzen kaymasını
- Etkileşimden sonra tepki gecikmesini Doğru cevap
- İlk bayt süresini
Açıklama: INP, etkileşim gecikmesini ölçer.
3 Boşluğu doldur: Lighthouse eşiği ayarla
assertions:
categories:
performance: ____
accessibility: 90assertions:
categories:
performance: 0.8
accessibility: 90Açıklama: Lighthouse puanları 0-1 arası ondalık olur.