Core Web Vitals Nedir? Google Sıralama Faktörü Rehberi

Core Web Vitals Nedir?

Core Web Vitals (CWV), Google'ın web sayfalarının kullanıcı deneyimini ölçmek için tanımladığı üç temel metriktir. Google bu metrikleri 2021'den itibaren sıralama faktörü olarak kullanmaya başlamıştır. Yavaş yüklenen, düzeni kayarak kullanıcıyı rahatsız eden veya etkileşimlere geç yanıt veren sayfalar, arama sonuçlarında dezavantajlı duruma düşer.

Üç metrik şunlardır: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS). Her birinin ne anlama geldiğini, nasıl ölçüleceğini ve nasıl iyileştirileceğini inceleyelim.

LCP — Largest Contentful Paint

LCP, sayfadaki en büyük görünür içerik öğesinin yüklenme süresini ölçer. Bu öğe genellikle hero görseli, büyük bir metin bloğu veya video kapak görseli olur.

• İyi: 2,5 saniye veya altı
• İyileştirme gerekli: 2,5 — 4 saniye arası
• Kötü: 4 saniyenin üzeri

LCP NASIL İYİLEŞTİRİLİR?

• Sunucu yanıt süresini azaltın — TTFB (Time to First Byte) yüksekse CDN kullanmayı değerlendirin. Sunucu tarafı önbellekleme etkinleştirin.
• Görselleri optimize edin — WebP veya AVIF formatlarını tercih edin. Görselleri gerçek görüntülenme boyutunda sunun. Lazy loading kullanın ancak ekranın üst kısmındaki (above-the-fold) görseller için kullanmayın.
• Render-blocking kaynakları azaltın — Kritik olmayan CSS ve JavaScript dosyalarını erteleyerek ilk boyamayı hızlandırın. Seoptera CSS Minifier ile CSS dosyalarınızı küçülterek yükleme süresini kısaltabilirsiniz.
• Fontları önceden yükleyin — Web fontları LCP'yi geciktirebilir. <link rel="preload"> ile kritik fontları önceden yükleyin ve font-display: swap kullanın.

INP — Interaction to Next Paint

INP, kullanıcının sayfayla etkileşime girmesinden (tıklama, dokunma, klavye girişi) sonra tarayıcının görsel yanıt vermesine kadar geçen süreyi ölçer. 2024'te eski FID (First Input Delay) metriğinin yerini almıştır. FID yalnızca ilk etkileşimi ölçerken, INP sayfanın tüm ömrü boyunca en yavaş etkileşimi yakalar.

• İyi: 200 milisaniye veya altı
• İyileştirme gerekli: 200 — 500 milisaniye arası
• Kötü: 500 milisaniyenin üzeri

INP NASIL İYİLEŞTİRİLİR?

• Ana iş parçacığını meşgul etmeyin — Uzun süren JavaScript görevlerini parçalara bölün. requestIdleCallback veya scheduler.yield() kullanarak tarayıcıya nefes alma alanı bırakın.
• Gereksiz JavaScript'i azaltın — Kullanılmayan kodları kaldırın. Üçüncü taraf betiklerini (analytics, reklamlar, widget'lar) geciktirerek yükleyin.
• DOM boyutunu küçük tutun — Çok derin veya çok geniş DOM ağaçları, tarayıcının stil hesaplama ve düzen işlemlerini yavaşlatır.
• Olay işleyicilerini optimize edin — Tıklama ve kaydırma olaylarına bağlı yoğun hesaplamaları debounce veya throttle ile sınırlayın.

CLS — Cumulative Layout Shift

CLS, sayfa yüklenirken içerik öğelerinin beklenmedik şekilde kaymasını ölçer. Bir düğmeye basmak üzereyken sayfa kayar ve yanlış yere tıklarsınız — işte CLS bunu yakalar.

• İyi: 0,1 veya altı
• İyileştirme gerekli: 0,1 — 0,25 arası
• Kötü: 0,25 üzeri

CLS NASIL İYİLEŞTİRİLİR?

• Görsellere boyut belirtin — <img> etiketlerinde width ve height niteliklerini veya CSS aspect-ratio özelliğini kullanın. Böylece tarayıcı, görsel yüklenmeden önce gerekli alanı ayırır.
• Reklam alanlarını önceden ayırın — Dinamik reklamlar sayfanın en büyük CLS kaynağıdır. Reklam konteynerleri için sabit yükseklik belirleyin.
• Font yüklemesini yönetin — font-display: swap kullanırken yedek fontu ana fontla benzer metriklerle eşleştirin. font-display: optional da CLS'yi sıfırlar ancak font yüklenmezse varsayılan font görüntülenir.
• Dinamik içerikleri dikkatli ekleyin — Sayfa yüklendikten sonra eklenen bildirimler, çerez bantları veya açılır pencereler, mevcut içeriği kaydırmamalıdır. Bunları sayfanın üstüne veya alt kenarına sabitlenmiş (fixed) olarak konumlandırın.

Core Web Vitals Nasıl Ölçülür?

Google birkaç farklı araç sunar:

• PageSpeed Insights — Hem laboratuvar (simülasyon) hem de alan (gerçek kullanıcı) verilerini gösterir. Tek tek sayfaları test etmek için idealdir.
• Google Search Console — Tüm sitenizin CWV durumunu toplu olarak görüntüler. Hangi sayfaların sorunlu olduğunu bulmak için en iyi araçtır.
• Chrome DevTools (Lighthouse) — Tarayıcınızda çalışan laboratuvar ortamı testi. Geliştirme sürecinde hızlı kontrol için kullanışlıdır.
• Web Vitals uzantısı — Chrome uzantısı olarak gerçek zamanlı CWV verilerini gösterir.
• CrUX (Chrome User Experience Report) — Google'ın gerçek Chrome kullanıcılarından topladığı veri seti. Sıralama için kullanılan veriler buradan gelir.

Küçük Görseller İçin Base64

LCP'yi iyileştirmenin yollarından biri, çok küçük görselleri (ikonlar, logolar) Base64 formatına dönüştürüp doğrudan HTML veya CSS içine gömmektir. Bu, ek HTTP isteklerini ortadan kaldırır. Ancak yalnızca birkaç kilobaytlık dosyalar için uygundur; büyük görselleri Base64'e çevirmek HTML boyutunu şişirir ve performansı olumsuz etkiler. Seoptera Image to Base64 aracıyla dönüşümü hızlıca yapabilirsiniz.

CWV ve SEO İlişkisi

Core Web Vitals tek başına sıralamayı belirlemez — içerik kalitesi, bağlantı profili ve arama niyeti uyumu gibi faktörler hâlâ daha ağır basar. Ancak iki sayfa içerik açısından eşdeğer olduğunda, CWV metrikleri iyi olan sayfa öne çıkar. Ayrıca Google Search Console'da "Sayfa deneyimi" raporunda iyi performans gösteren sayfalar özel bir işaretle belirtilir.

CWV iyileştirmelerinin en büyük etkisi kullanıcı deneyimi üzerindedir. Hızlı yüklenen, kayma yapmayan ve etkileşimlere anında yanıt veren sayfalar, daha düşük hemen çıkma oranı ve daha uzun oturum süresi sağlar — bu da dolaylı olarak SEO'ya katkı yapar.

Sayfalarınızın arama sonuçlarında nasıl göründüğünü Google SERP Önizleme aracıyla kontrol edebilirsiniz.

Sonuç

Core Web Vitals, web sitenizin performansını üç somut metrikle ölçen bir çerçevedir: LCP (yükleme hızı), INP (etkileşim yanıtı) ve CLS (görsel kararlılık). Bu metrikleri iyileştirmek yalnızca Google sıralamalarına değil, doğrudan kullanıcı deneyimine ve dönüşüm oranlarına da olumlu etki eder.

Optimizasyona CSS ve JavaScript dosyalarını küçültmekle başlayabilirsiniz. Seoptera CSS/JS Minifier ile dosyalarınızı anında optimize edin.