React Uygulamalarında Temel Web Ölçümlerini Ölçme
Lighthouse, WebPageTest ve web-vitals kütüphanesini kullanarak LCP, INP ve CLS puanlarını toplayın.
React Uygulamalarında Temel Web Ölçümlerini Ölçme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Temel Web Verileri Nedir?
Temel Web Verileri, SEO sıralamasını etkileyen Google kullanıcı deneyimi ölçümleridir: LCP (Largest Contentful Paint — yükleme), INP (Interaction to Next Paint — yanıt verme hızı) ve CLS (Cumulative Layout Shift — görsel kararlılık).
İyi Eşik Değerleri
Hedef değerler: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. "poor" eşiğinin üzerindeki değerler (LCP > 4s, INP > 500ms, CLS > 0.25) kullanıcı deneyimini ve SEO'yu önemli ölçüde olumsuz etkiler.
web-vitals Kütüphanesi
web-vitals npm paketi, basit bir API ile gerçek tarayıcılarda CWV ölçümü yapar.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Temel Verileri Analiz Sistemine Gönderme
Gerçek kullanıcı izleme (RUM) için temel verileri analiz uç noktanıza gönderin; Lighthouse laboratuvar performansını ölçerken RUM, gerçek kullanıcıların ne deneyimlediğini gösterir.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Next.js Yerleşik Temel Verileri
Next.js, Temel Web Verilerini otomatik olarak araçlarla ölçer. Pages'te _app.js dosyasından bir reportWebVitals işlevini dışa aktarın veya App Router'ın yerleşik desteğini kullanın.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Chrome DevTools'ta Lighthouse
Laboratuvar tabanlı CWV ölçümleri için Chrome DevTools'ta Lighthouse denetimi çalıştırın (Lighthouse sekmesi). Uzantıların etkileşimini önlemek için Gizli modu kullanın ve mobil cihazı benzetmek üzere ağ hızını sınırlayın.
WebPageTest
WebPageTest.org, farklı coğrafi konumlardaki gerçek cihazlardan ayrıntılı şelale grafikleri, video kaydı ve CWV ölçümleri sağlar; yerel Lighthouse'a göre daha gerçekçidir.
Chrome Kullanıcı Deneyimi Raporu (CrUX)
Google'ın CrUX veri kümesi, milyonlarca web sitesi için gerçek kullanıcıların CWV verilerini toplar. Bu verilere Google Search Console, PageSpeed Insights veya CrUX API aracılığıyla erişebilirsiniz.
LCP için PerformanceObserver
LCP girdilerini izlemek ve en büyük içerikli boyamanın hangi öğe olduğunu anlamak için yerel PerformanceObserver API'sini kullanın.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });CLS Hatalarını Ayıklama
Kırmızı katmanlarla düzen kaymalarına neden olan öğeleri vurgulamak için Chrome DevTools'un Rendering panelindeki Layout Shift Regions özelliğini kullanın.
İlişkilendirme Verileri
web-vitals kütüphanesi, kötü ölçüme neyin neden olduğunu belirleyen ilişkilendirme verileri sağlar: LCP öğesi, INP etkileşimi veya CLS'ye neden olan öğe.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Hızlı Kontrol
Yanıt verme hızını, özellikle sayfanın kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçen Temel Web Verisi hangisidir?
Özet
CWV'yi web-vitals kütüphanesi veya Lighthouse ile ölçün. Gerçek kullanıcı izleme için ölçümleri analiz sisteminize gönderin. LCP ≤ 2.5s, INP ≤ 200ms ve CLS ≤ 0.1 değerlerini hedefleyin. Kötü puanlara neden olan belirli öğeleri veya etkileşimleri belirlemek için ilişkilendirme verilerini kullanın.
Sıkça Sorulan Sorular
“React Uygulamalarında Temel Web Ölçümlerini Ölçme” dersi ücretsiz mi?
Evet — “React Uygulamalarında Temel Web Ölçümlerini Ölçme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“React Uygulamalarında Temel Web Ölçümlerini Ölçme” dersinde ne öğreneceğim?
Lighthouse, WebPageTest ve web-vitals kütüphanesini kullanarak LCP, INP ve CLS puanlarını toplayın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“React Uygulamalarında Temel Web Ölçümlerini Ölçme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React Uygulamalarında Temel Web Ölçümlerini Ölçme
- Paket Analizi ve Kod Bölme Stratejisi
- React'te Görüntü ve Yazı Tipi Optimizasyonu
- INP'yi Azaltma: Olay İşleyicisi Optimizasyonu