Core Web Vitals Nedir?
Core Web Vitals (Önemli Web Verileri), Google tarafından tanımlanan ve bir web sayfasındaki gerçek kullanıcı deneyimini ölçümlemeyi amaçlayan temel performans kriterleridir. Bu metrik seti; bir sayfanın ana içeriğinin ne kadar sürede yüklendiğini, sayfanın kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ve sayfa yüklenirken görsel ögelerin kayıp kaymadığını değerlendirir. Web sitelerinin teknik altyapısını bu standartlara uygun hale getirmek, hem ziyaretçilerin sitede kalma sürelerini hem de arama motoru taranabilirliğini doğrudan etkiler.
Google, kullanıcı odaklı bir web ekosistemi oluşturmak adına sayfa deneyimini (Page Experience) bir sıralama sinyali olarak kabul eder. Core Web Vitals metrikleri de bu sayfa deneyimi değerlendirmesinin merkezinde yer alır. Performans ölçümleri yalnızca teorik testlere değil, Chrome Kullanıcı Deneyimi Raporu (CrUX) üzerinden toplanan gerçek kullanıcı verilerine dayanır.
Temel Core Web Vitals Metrikleri Nelerdir?
Core Web Vitals üç ana ölçüm alanına odaklanır. Her bir metrik, sayfa yükleme ve kullanım sürecinin farklı bir boyutunu analiz eder:
- LCP (Largest Contentful Paint): Sayfadaki en büyük içerik ögesinin (görsel, video veya büyük metin bloğu) ekranda görünür hale gelme süresidir. Yükleme performansını ölçer.
- INP (Interaction to Next Paint): Kullanıcının sayfadaki bir ögeye (buton, link vb.) tıklaması veya dokunması ile sayfanın bir sonraki kareyi ekrana getirmesi arasında geçen süredir. Etkileşim ve tepki süresini ölçer. (First Input Delay – FID metriğinin yerini almıştır.)
- CLS (Cumulative Layout Shift): Sayfa yüklenirken veya kullanılırken ögelerin beklenmedik şekilde yer değiştirmesidir. Görsel kararlılığı ölçer.
Core Web Vitals Metriklerinin Detaylı İncelemesi
1. Largest Contentful Paint (LCP)
LCP, kullanıcının sayfaya giriş yaptığı andan itibaren ekranın üst kısmında kalan en büyük içerik ögesinin işlenme süresini ifade eder. Bu öge genellikle bir kahraman görseli (hero image), öne çıkan bir banner veya büyük bir başlık bloğudur.
Google standartlarına göre ideal bir LCP süresi 2.5 saniye veya altında olmalıdır. 2.5 ile 4.0 saniye arası iyileştirme gerektirirken, 4.0 saniyenin üzerindeki değerler zayıf performans olarak değerlendirilir.
LCP Değerini Etkileyen Faktörler:
- Yavaş sunucu yanıt süreleri (TTFB).
- İşlemeyi engelleyen JavaScript ve CSS dosyaları.
- Optimize edilmemiş ve yüksek boyutlu görseller.
- İstemci tarafında işlenen (client-side rendering) ağır içerikler.
2. Interaction to Next Paint (INP)
INP, kullanıcının sayfa yaşam döngüsü boyunca gerçekleştirdiği tüm tıklama, dokunma ve klavye girdilerini izler. Bu girdilerden en uzun sürenini baz alarak sayfanın genel tepki verme kabiliyetini raporlar.
İdeal bir INP değeri 200 milisaniye veya altında olmalıdır. 200 ms ile 500 ms arası geliştirilmeye açık kabul edilirken, 500 ms üzeri değerler yavaş etkileşim süresi olarak sınıflandırılır.
INP Değerini Etkileyen Faktörler:
- Ana iş parçacığını (main thread) uzun süre meşgul eden ağır JavaScript kodları.
- Karmaşık ve derin DOM (Document Object Model) yapısı.
- Eşzamansız çalıştırılmayan uzun görevler (long tasks).
3. Cumulative Layout Shift (CLS)
CLS, sayfa yüklenirken içeriklerin kayması sonucu oluşan kullanıcı kafa karışıklığını ve hatalı tıklamaları önlemeyi hedefler. Örneğin, bir metni okurken aniden üstte beliren bir reklam nedeniyle sayfanın aşağı kayması CLS skorunu olumsuz etkiler.
İdeal bir CLS skoru 0.1 veya altında olmalıdır. 0.1 ile 0.25 arası iyileştirilmesi gereken alan olarak görülürken, 0.25 üzerindeki skorlar zayıf görsel kararlılık anlamına gelir.
CLS Değerini Etkileyen Faktörler:
- Boyutları (width ve height) önceden belirtilmemiş görseller ve videolar.
- Boyutsuz iframe veya dinamik eklenen reklam alanları.
- Sonradan yüklenen özel web yazı tipleri (FOUT/FOIT durumları).
- Dinamik olarak sayfanın üstüne eklenen içerik blokları.
Core Web Vitals Nasıl Ölçülür?
Core Web Vitals metriklerini analiz ederken iki farklı veri türü dikkate alınır: Saha Verileri (Field Data) ve Lab Verileri (Lab Data).
Saha Verileri (Field Data)
Gerçek ziyaretçilerin farklı cihaz, tarayıcı ve bağlantı hızlarında elde ettiği deneyimlerin anonim olarak toplanmasıyla oluşur. Google Search Console ve PageSpeed Insights raporlarındaki gerçek kullanıcı verileri bu kategoriye girer. Sıralama değerlendirmelerinde temel alınan veri türü budur.
Lab Verileri (Lab Data)
Geliştirme aşamasında, sabit bir ağ ve cihaz simülasyonu altında yapılan teknik testlerdir. Sorunların kaynağını tespit etmek için kullanılır. Lighthouse ve Chrome DevTools bu verileri sağlar.
Kullanılabilecek Temel Araçlar:
- Google Search Console: Sitenin genelindeki Core Web Vitals durumunu sayfa grupları halinde raporlar.
- PageSpeed Insights: Tekil sayfalar için hem lab hem saha verilerini sunar, somut öneriler getirir.
- Chrome DevTools: Performans sekmesi üzerinden kod seviyesinde darboğazları tespit etmeye yardımcı olur.
- Web Vitals Chrome Eklentisi: Gezinme esnasında anlık metrik değerlerini tarayıcı üzerinde gösterir.
Web Site Hızı ve UX Optimizasyonu Adımları
Core Web Vitals skorlarını iyileştirmek ve daha hızlı bir web site tecrübesi sunmak için aşağıdaki teknik optimizasyon adımları uygulanabilir:
1. LCP Optimizasyonu İçin Yapılması Gerekenler
- Görsel Sıkıştırma ve Format Güncellemesi: Görseller WebP veya AVIF gibi yeni nesil formatlara dönüştürülmeli, kaliteden ödün vermeden dosya boyutları küçültülmelidir.
- Kritik İçeriklerin Önceden Yüklenmesi: LCP ögesi olan görseller için
rel="preload"etiketi kullanılarak tarayıcının bu kaynağa öncelik vermesi sağlanmalıdır. - Önbellekleme ve CDN Kullanımı: İçerik Dağıtım Ağı (CDN) kullanarak sunucu yanıt süreleri düşürülmeli ve tarayıcı önbellekleme (browser caching) kuralları doğru yapılandırılmalıdır.
- Kritik CSS İşleme: Sayfanın ilk ekranında ihtiyaç duyulan CSS kodları dahili (inline) olarak yüklenmeli, kullanılmayan CSS ve JS dosyaları ertelenmelidir.
2. INP Optimizasyonu İçin Yapılması Gerekenler
- JavaScript Yükünü Azaltma: Gereksiz üçüncü taraf kodlar (analiz araçları, chat balonları vb.) temizlenmeli veya ertelenmiş olarak yüklenmelidir.
- Uzun Görevleri (Long Tasks) Bölme: 50 milisaniyeden uzun süren JavaScript iş parçacıkları daha küçük parçalara (micro-tasks) bölünerek ana iş parçacığının kilitlenmesi engellenmelidir.
- Web Workers Kullanımı: Ağır hesaplama gerektiren işlemler arka planda çalışmak üzere Web Worker yapısına aktarılmalıdır.
3. CLS Optimizasyonu İçin Yapılması Gerekenler
- Görsel ve Medya Boyutlarını Belirtme: Tüm
<img>ve<video>etiketlerinewidthveheightöznitelikleri eklenmeli veya CSSaspect-ratioözelliği kullanılmalıdır. - Reklam ve Banner Alanlarını Rezerve Etme: Dinamik olarak yüklenecek reklam veya banner alanları için önceden sabit bir genişlik ve yükseklik alanı (min-height) ayrılmalıdır.
- Yazı Tipi (Font) Optimizasyonu: Web yazı tiplerinin yüklenmesi sırasında metinlerin görünmez olmasını engellemek için CSS tanımına
font-display: swap;kuralı eklenmelidir.
Sürekli İzleme ve İyileştirme Süreci
Web sitesi optimizasyonu tek seferlik bir işlem değildir. Eklenen yeni içerikler, güncellenen yazılımlar ve değişen tarayıcı standartları nedeniyle Core Web Vitals metrikleri zaman içinde dalgalanma gösterebilir. Bu nedenle Search Console raporlarının düzenli aralıklarla kontrol edilmesi, teknik değişikliklerin canlı ortama alınmadan önce lab araçlarıyla test edilmesi önerilir.
Metriklerin hedeflenen aralıklarda tutulması, kullanıcıların sitede geçirdiği sürenin ve dönüşüm potansiyelinin korunmasına katkı sağlar.
