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ı: PNG ve JPG yerine %40-%60 daha hafif AVIF ve WebP formatlarına geçin.
- Fetch Priority ve Preload: Hero görseline
fetchpriority="high"veloading="eager"vererek tarayıcının ilk bu kaynağı indirmesini sağlayı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 sıfırlama: Kaymaları ve zıplamaları önleyin.
Kullanıcı tam bir butona tıklayacakken üstte aniden bir banner veya resim belirmesi ve sayfanın aşağı kayması CLS cezasının başlıca sebebidir.
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.
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