Core Web Vitals
Uzman Rehberi
Google'ın yeni nesil kullanıcı deneyimi standartlarını keşfedin. Sitenizi hızlandırmanın ötesinde, milisaniyelerle sıralama kazanma stratejileri.
Core Web Vitals Nedir?
Core Web Vitals (CWV), Google'ın bir web sayfasının kullanıcı deneyimini (UX) ölçmek için kullandığı üç temel performans metriğinden oluşan bir settir. 2021 yılından itibaren "Sayfa Deneyimi" sinyalinin en kritik parçası haline gelen bu veriler, sitenizin teknik başarısını matematiksel olarak kanıtlar.
Bu metrikler sadece "sayfa ne kadar hızlı açılıyor?" sorusuna yanıt vermez. Sayfanın ne kadar hızlı görselleştiğini, kullanıcının tıklamalarına ne kadar sürede tepki verdiğini ve yükleme sırasında öğelerin ne kadar stabil durduğunu ölçer.
Loading
LCP Metriği
Interactivity
INP Metriği
Visual Stability
CLS Metriği
Mesele Sadece Hız Değil...
Core Web Vitals, web sitenizin kullanıcıyla kurduğu ilk fiziksel temastır. Bir sayfanın hızlı yüklenmesi kadar, yüklendiği andaki görsel stabilitesi ve etkileşim hızı da sıralamanızı belirler. Bu rehberde, saniyeleri değil, milisaniyeleri nasıl kazanacağınızı konuşacağız.
Gökhan Vatancı
Stratejik SEO Uzmanı
Neden Core Web Vitals
Kritik Bir Önem Taşır?
Google, düşük performanslı siteleri arama sonuçlarında "cezalandırmasa" bile, yüksek performanslı siteleri açıkça yukarı taşımaktadır. CWV optimizasyonu yapılmış bir site; hem SEO'da hem de kullanıcı tarafında kazanç sağlar.
Uzman Analizi: Gökhan Vatancı
"Bir site saniyeler içinde açılabilir ama kullanıcı sayfadaki bir butona tıklamaya çalıştığında sayfa yanıt vermiyorsa (INP) veya bir görsel sonradan yüklenip içeriği aşağı itiyorsa (CLS), kullanıcı o siteden hızla ayrılır. Core Web Vitals, bu 'hüsran' anlarını ölçmemizi ve gidermemizi sağlar."
SEO Strategy ArchitectCore Web Vitals Sözlüğü: Teknik Terimler
Largest Contentful Paint (En Büyük İçerik Boyaması)
Sayfadaki en büyük içerik öğesinin (görsel veya yazı bloğu) görünür hale geldiği süredir.
İdeal: < 2.5s
Cumulative Layout Shift (Kümülatif Düzen Kayması)
Sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini ölçen puandır.
İdeal: < 0.1
Interaction to Next Paint (Sonrakine Boyama Etkileşimi)
Tüm sayfa ziyareti boyunca kullanıcının etkileşimlerine verilen en uzun yanıt süresidir.
İdeal: < 200ms
Time to First Byte (İlk Bayt Süresi)
Sunucunun kullanıcının tarayıcısına ilk veriyi gönderdiği süredir. Sunucu kalitesini gösterir.
Total Blocking Time (Toplam Engelleme Süresi)
Sayfanın etkileşimli hale gelmeden önce JavaScript tarafından kilitlendiği süreyi temsil eder.
First Contentful Paint (İlk İçerik Boyaması)
Tarayıcının sayfadaki ilk metni veya görseli çizmeye başladığı andır.
Hemen Analiz Başlatın
Web sitenizin URL'sini girin ve doğrudan Google PageSpeed üzerinden performansınızı ölçün.
Görsel Teşhis: Lighthouse Raporunu Okuma
FCP (İlk İçerik Boyaması)
İlk Boyama: Tarayıcının ilk pikseli çizdiği andır.
TBT (Toplam Engelleme Süresi)
Toplam Engelleme Süresi: JS'in sayfayı kilitlediği süredir.
SI (Hız İndeksi)
Hız İndeksi: İçeriğin görsel olarak dolma hızıdır.
TTFB (İlk Bayt Süresi)
Sunucu Yanıtı: İlk baytın sunucudan çıktığı andır.
Harekete Geçin: Core Web Vitals Nasıl İyileştirilir?
LCP (En Büyük İçerik Boyaması) İyileştirme
LCP'yi iyileştirmenin yolu, tarayıcının en büyük öğeye odaklanmasını sağlamaktır. Bu genellikle büyük bir görsel (Hero Image) olduğu için ön yükleme (preload) hayati önem taşır.
- Preload Kullanın: LCP görselini tarayıcıya erkenden bildirin.
- WebP/AVIF Formatına Geçin: Görsel boyutlarını %80 oranında düşürün.
- Fetch Priority Ayarlayın: Kritik görsellere 'high' önceliği verin.
- Kritik CSS'i Inline Yapın: İlk açılışta gereken CSS'i HTML içine gömün.
Kritik Kod Bloğu:
CLS (Kümülatif Düzen Kayması) İyileştirme
CLS'yi sıfırlamak için tarayıcıya sayfa yüklenmeden önce alan rezerve etmesini söylemeniz gerekir. Bu sayede içerik sonradan yüklense bile sayfa "atlama" yapmaz.
- Boyut Atayın: Tüm görsel ve iframe etiketlerine width/height verin.
- Reklam Alanları: Reklamlar için min-height içeren bir placeholder alanı oluşturun.
- Font-Display Swap: Yazı tiplerinin boyut değiştirip düzeni bozmasını engelleyin.
- Dinamik İçerik: Sayfanın üstüne sonradan içerik eklemekten kaçının.
CSS Uygulaması:
INP (Sonrakine Boyama Etkileşimi) İyileştirme
INP, sayfanın kullanıcının tıklamalarına ne kadar sürede yanıt verdiğini ölçer. Ağır JavaScript görevleri bu süreyi uzatır.
- JS Görevlerini Parçalayın: Uzun süren scriptleri daha küçük parçalara bölün.
- Yielding Kullanın: Ana kanalı serbest bırakmak için setTimeout(0) kullanın.
- Scriptleri Erteleyin: Kritik olmayan JS dosyalarına 'defer' ekleyin.
- Gereksiz Kodları Eleme: Kullanılmayan JS kodlarını temizleyin.
JavaScript Örneği:
TTFB (İlk Bayt Süresi) İyileştirme
TTFB, sunucu performansının doğrudan göstergesidir. Sunucu ne kadar hızlı yanıt verirse, tarayıcı sayfayı o kadar erken çizmeye başlar.
- Sunucu Yanıt Süresini Azaltın: Veritabanı sorgularını ve kodu optimize edin.
- CDN Kullanın: Veriyi kullanıcının coğrafi konumuna yakın sunuculardan iletin.
- Edge Caching Uygulayın: Statik içeriği CDN üzerinde önbelleğe alın.
- HTTP/3'e Geçin: Daha hızlı ve güvenli bir ağ protokolü kullanın.
Nginx / Server Config:
Hız Bir Seçenek Değil,
Bir Zorunluluktur.
Sitenizin teknik skorlarını yeşile döndürmek ve Google sıralamalarında fark yaratmak için profesyonel bir yol haritası belirleyelim.