Temel Web Verileri: LCP FID CLS
Largest Contentful Paint, First Input Delay ve Cumulative Layout Shift'in neyi ölçtüğünü ve Google'ın bunları neden sıralama sinyalleri olarak kullandığını öğrenin.
Temel Web Verileri: LCP FID CLS, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Performans Neden Önemlidir
Yavaş sayfalar kullanıcı kaybettirir. Google, performansı bir sıralama sinyali hâline getirdi: Core Web Vitals puanları düşük olan siteler arama sonuçlarında daha alt sıralarda yer alır. SEO'nun ötesinde, her 100 ms'lik gecikme dönüşüm ve etkileşimi ölçülebilir biçimde azaltır.
Üç Temel Core Web Vitals
Google üç kullanıcı deneyimi metriğini ölçer: LCP (yükleme hızı), FID (etkileşim) ve CLS (görsel kararlılık). Her birinin 'İyi', 'İyileştirme Gerekiyor' ve 'Zayıf' eşikleri vardır.
En Büyük İçerikli Boyama (LCP)
LCP, görünür en büyük içerik öğesinin (görüntü, video afişi veya metin bloğu) oluşturulmasının tamamlandığı zamanı ölçer. İyi: 2,5 saniyenin altında. Zayıf: 4 saniyenin üzerinde. Ana görselleri önceden yükleyerek, oluşturmayı engelleyen kaynakları azaltarak ve hızlı bir CDN kullanarak optimize edin.
İlk Girdi Gecikmesi (FID) ve INP
FID, kullanıcının ilk etkileşimi (tıklama, dokunma) ile tarayıcının yanıt vermesi arasındaki gecikmeyi ölçer. İyi: 100 ms'nin altında. 2024'te FID'nin yerini, yalnızca ilk etkileşimi değil tüm etkileşimleri ölçen Interaction to Next Paint (INP) aldı.
Kümülatif Düzen Kayması (CLS)
CLS, sayfa yüklenirken meydana gelen beklenmedik düzen kaymalarını ölçer. İyi: 0,1'in altında. Zayıf: 0,25'in üzerinde. Boyutları belirtilmemiş görseller, geç yüklenen yazı tipleri ve ilk çizimden sonra eklenen reklamlar buna neden olur.
Tarayıcıda CWV Ölçümü
Gerçek kullanıcı ölçümlerini yakalayıp analiz uç noktanıza göndermek için web-vitals npm paketini kullanın.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}LCP'yi Düzeltme: Ana Görseli Önceden Yükleme
Tarayıcıya, HTML kodunun geri kalanını ayrıştırmadan önce ana görseli erkenden indirmesini söyleyin.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">CLS'yi Düzeltme: Alan Ayırma
Varlık ulaşmadan önce tarayıcının alan ayırabilmesi için görsellerde ve gömülü içeriklerde her zaman width ve height kullanın. Duyarlı kapsayıcılar için aspect-ratio CSS'sini kullanın.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">INP'yi Düzeltme: Uzun Görevleri Bölme
Uzun JavaScript görevleri ana iş parçacığını engelleyerek tıklamalara verilen yanıtı geciktirir. Tarayıcının ekrana çizim yapıp girdilere yanıt verebilmesi için çalışmayı scheduler.yield() veya setTimeout ile parçalara bölün.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Laboratuvar Verileri ve Saha Verileri
Laboratuvar verileri (Lighthouse), denetimli bir ortamda gerçekleştirilen sentetik bir sınamadır. Saha verileri (CrUX, RUM), gerçek cihazlardaki gerçek kullanıcılardan toplanır. Arama motoru optimizasyonu sıralaması için doğru kaynak saha verileridir.
Performans Bütçeleri
Açık sınırlar belirleyin: örneğin LCP 2 saniyenin altında, JS paketi 200 KB'ın altında olsun. Performansı geriye götüren derlemeleri başarısız kılmak için bunu Lighthouse CI veya @bundle-analyzer ile sürekli tümleştirme ortamında zorunlu tutun.
Hızlı Kontrol
Hangi Temel Web Verisi, sayfa yüklenirken meydana gelen beklenmedik görsel sıçramaları ölçer?
Özet: Temel Web Verileri
LCP: en büyük öğenin yüklenme hızı; hedef 2,5 saniyenin altında. INP (eski adıyla FID): yanıt verebilirlik; hedef 200 ms'nin altında. CLS: görsel kararlılık; hedef 0,1'in altında. Üretimde web-vitals paketiyle ölçün; sürekli tümleştirmede Lighthouse kullanın. Arama motoru optimizasyonunu laboratuvar verileri değil, saha verileri yönlendirir.
Sıkça Sorulan Sorular
“Temel Web Verileri: LCP FID CLS” dersi ücretsiz mi?
Evet — “Temel Web Verileri: LCP FID CLS” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Temel Web Verileri: LCP FID CLS” dersinde ne öğreneceğim?
Largest Contentful Paint, First Input Delay ve Cumulative Layout Shift'in neyi ölçtüğünü ve Google'ın bunları neden sıralama sinyalleri olarak kullandığını öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Temel Web Verileri: LCP FID CLS” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Temel Web Verileri: LCP FID CLS
- Lighthouse Denetimleri ve Puanlama
- Görsel Optimizasyonu: tembel yükleme biçimleri WebP
- Kod Bölme ve Tembel Rotalar