Temel metrikler
Core Web Vitals metrikleri ve Google’ın kabul ettiği yeşil eşikler.
Google, kullanıcı deneyimini üç temel ayak üzerinden ölçümler: Yükleme hızı (LCP), etkileşim hızı (INP) ve görsel kararlılık (CLS). Bu metriklerin tamamı 75. yüzdelik dilimde (p75) gerçek kullanıcı verileriyle (CrUX) değerlendirilir.
| Metrik | Açıklama | İyi (Yeşil Eşik) | Geliştirilmeli | Kötü (Kırmızı Eşik) |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ana içeriğin (görsel/başlık) ekranda belirmesi | ≤ 2.5 sn | 2.5 - 4.0 sn | > 4.0 sn |
| INP (Interaction to Next Paint) | Tıklama/dokunmaya arayüzün yanıt verme süresi | ≤ 200 ms | 200 - 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Sayfa yüklenirken öğelerin beklenmedik kayması | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
Yükleme hızı
LCP süresini 2.5 saniyenin altına çekmenin 4 yolu.
LCP genellikle ana sayfadaki büyük kahraman görseli (Hero image) veya H1 başlığıdır. Yavaş yüklenen LCP’nin ana nedeni büyük dosya boyutları ve sunucu yanıt süresidir.
- Modern Görsel Formatları: Görsel kalite ve dosya boyutunu karşılaştırarak uygun olduğunda AVIF veya WebP kullanın.
- Önceliklendirme: Gerçek LCP görseli için gerektiğinde
fetchpriority="high"ve eager yükleme kullanın; her görseli yüksek öncelikli yapmayın. - Kritik CSS Ayırma: Ekranın üst kısmında (above-the-fold) gerekmeyen tüm stil dosyalarını ve scriptleri erteleyin (defer/async).
- CDN ve Edge Caching: Statik varlıkları Cloudflare veya hızlı bir CDN üzerinden kullanıcıya coğrafi olarak en yakın sunucudan dağıtın.
Etkileşim hızı
INP metriğini iyileştirme: Ağır JavaScript yükünden kurtulun.
Sayfada çok fazla üçüncü taraf izleme kodu (etiketler, canlı destek araçları, ağır animasyon kütüphaneleri) bulunduğunda ana iş parçacığı kilitlenir. Kullanıcı bir butona bastığında arayüz milisaniyelerce tepki veremez.
Gereksiz JavaScript paketlerini silin; ağır işlemleri Web Workers veya requestIdleCallback ile ana iş akışının dışına taşıyın.
Görsel kararlılık
CLS’yi iyileştirme: Beklenmedik kaymaları azaltın.
Kullanıcı bir butona tıklayacakken üstte banner veya görsel belirmesi beklenmedik düzen kaymasına yol açabilir. CLS doğrudan “ceza” olarak değil, sayfa deneyiminin ölçülen bileşenlerinden biri olarak ele alınmalıdır.
Tüm <img> ve <video> etiketlerinde width ve height özniteliklerini mutlaka belirtin; özel yazı tipleri yüklenirken metin kaymalarını önlemek için font-display: swap kuralını dikkatli yapılandırın.
Sık sorulan sorular
Kısa ve doğrudan cevaplar.
Core Web Vitals nedir ve neden önemlidir?
Google’ın LCP (yükleme hızı), INP (etkileşim gecikmesi) ve CLS (görsel kayma) metrikleriyle web sitesi kullanıcı deneyimini ölçtüğü resmî standartlardır.
LCP (Largest Contentful Paint) nasıl iyileştirilir?
Hero görselini optimize etmek (WebP/AVIF, fetchpriority="high"), sunucu yanıt süresini (TTFB) düşürmek ve gereksiz JS yükünü kaldırmakla iyileşir.
INP (Interaction to Next Paint) neden zayıf çıkar?
Sayfadaki ağır JavaScript işlemleri, ana iş parçacığını (main thread) kilitleyerek kullanıcının tıklamalarına geç yanıt verilmesine neden olur.
Birincil kaynaklar
Kaynaklar ve kapsam.
Bağlantılar içerikteki değişebilir veya dış doğrulama gerektiren bilgilerin kaynağıdır. Ticari ilişki veya sponsorlu bağlantı değildir.
İlgili rehberler