Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir. 2021'de resmi bir sıralama faktörü olarak devreye giren bu metrikler, 2026 itibarıyla SEO stratejinizin vazgeçilmez bir parçası haline gelmiştir. Bu rehberde LCP, INP ve CLS metriklerini derinlemesine inceleyecek, ölçüm araçlarını tanıyacak ve sayfa hızınızı artırmak için uygulanabilir adımları öğreneceksiniz.
Core Web Vitals Nedir ve Neden Önemlidir?
Core Web Vitals, Google'ın "sayfa deneyimi" (page experience) sinyallerinin merkezinde yer alan üç metriktir. Bu metrikler, bir kullanıcının web sayfanızla etkileşime girdiğinde yaşadığı deneyimi ölçülebilir hale getirir. Google, bu metrikleri sıralama algoritmasında doğrudan kullanarak, kullanıcılarına daha hızlı ve daha konforlu sayfalar sunmayı hedefler.
Core Web Vitals'ın SEO açısından önemi sadece bir sıralama faktörü olmasıyla sınırlı değildir:
- Dönüşüm oranları: Sayfa yükleme süresi her 1 saniye arttığında dönüşüm oranları ortalama %7 düşer
- Hemen çıkma oranı: 3 saniyeden uzun süre yüklenen sayfalarda kullanıcıların %53'ü sayfayı terk eder
- Kullanıcı güveni: Hızlı sayfalar profesyonellik algısı yaratır ve marka güvenilirliğini artırır
- Mobil deneyim: Mobil kullanıcılar için sayfa hızı masaüstüne kıyasla çok daha kritiktir
- Crawl bütçesi: Hızlı sayfalar Googlebot'un daha verimli tarama yapmasını sağlar
Sıralama takibi yapıyorsanız, Core Web Vitals değişikliklerinin anahtar kelime pozisyonlarınızı nasıl etkilediğini gözlemlemek oldukça değerli bir içgörü sunar. Serpux sıralama takibi ile optimizasyon öncesi ve sonrası performansınızı karşılaştırabilirsiniz.
Üç Temel Metrik: LCP, INP ve CLS
Core Web Vitals, yükleme performansı, etkileşim yanıtı ve görsel kararlılık olmak üzere üç farklı boyutu ölçer. Her bir metriği detaylıca inceleyelim.
LCP (Largest Contentful Paint) — Yükleme Performansı
LCP, sayfadaki en büyük içerik öğesinin görünür hale gelmesi için geçen süreyi ölçer. Bu öğe genellikle bir hero görseli, büyük bir metin bloğu veya bir video thumbnail'i olur. LCP, kullanıcının "sayfa yüklendi" algısını doğrudan etkiler.
İdeal değerler:
- İyi (Good): 2.5 saniye veya altı
- İyileştirme gerekiyor: 2.5 — 4.0 saniye arası
- Kötü (Poor): 4.0 saniyenin üzeri
LCP'yi etkileyen başlıca faktörler:
- Yavaş sunucu yanıt süresi (TTFB): Sunucunuz ilk byte'ı ne kadar geç gönderirse LCP o kadar gecikir
- Render-engelleyici kaynaklar: CSS ve JavaScript dosyaları sayfanın render edilmesini engelleyebilir
- Yavaş kaynak yükleme: Hero görseli veya web fontu geç yükleniyorsa LCP artar
- İstemci tarafı render: JavaScript ile render edilen içerikler LCP'yi olumsuz etkiler
INP (Interaction to Next Paint) — Etkileşim Yanıtı
INP, 2024'te FID'in (First Input Delay) yerini alan yeni metriktir. Kullanıcının sayfayla yaptığı tüm etkileşimlerin (tıklama, dokunma, klavye girişi) yanıt süresini ölçer. FID sadece ilk etkileşimi ölçerken, INP sayfa boyunca tüm etkileşimleri değerlendirir ve en kötü performansı raporlar.
İdeal değerler:
- İyi (Good): 200 milisaniye veya altı
- İyileştirme gerekiyor: 200 — 500 milisaniye arası
- Kötü (Poor): 500 milisaniyenin üzeri
INP'yi etkileyen başlıca faktörler:
- Ağır JavaScript işlemleri: Ana thread'i uzun süre meşgul eden JS görevleri etkileşim yanıtını geciktirir
- Büyük DOM ağacı: 1500'den fazla DOM node'u olan sayfalar yavaş yanıt verir
- Uzun görevler (long tasks): 50ms'den uzun süren JavaScript görevleri INP'yi kötüleştirir
- Layout thrashing: JavaScript'in sürekli DOM'u okuyup yazması performansı düşürür
CLS (Cumulative Layout Shift) — Görsel Kararlılık
CLS, sayfa yüklenirken veya kullanıcı etkileşimi sırasında içeriklerin beklenmedik şekilde yer değiştirmesini ölçer. Bir düğmeye tıklamak üzereyken sayfanın kayması ve yanlış yere tıklanması — CLS'nin ölçtüğü tam olarak bu deneyimdir.
İdeal değerler:
- İyi (Good): 0.1 veya altı
- İyileştirme gerekiyor: 0.1 — 0.25 arası
- Kötü (Poor): 0.25'in üzeri
CLS'ye neden olan yaygın sorunlar:
- Boyutsuz görseller ve videolar: width/height belirtilmeyen medya öğeleri yüklendiğinde sayfa kayar
- Geç yüklenen reklamlar: Reklam alanları dolduğunda etrafındaki içerikler yer değiştirir
- Dinamik içerik enjeksiyonu: JavaScript ile sonradan eklenen banner, bildirim veya içerik blokları
- Web fontları (FOUT/FOIT): Fontlar yüklendiğinde metin boyutu değişerek layout kaymasına neden olur
Core Web Vitals Nasıl Ölçülür?
Doğru ölçüm, doğru optimizasyonun başlangıcıdır. Core Web Vitals'ı ölçmek için hem laboratuvar (lab) hem de saha (field) verilerini kullanmalısınız.
Google PageSpeed Insights
En temel ve ücretsiz araçtır. Hem saha verilerini (CrUX — Chrome User Experience Report) hem de laboratuvar verilerini (Lighthouse) gösterir. URL'nizi girdiğinizde mobil ve masaüstü için ayrı ayrı Core Web Vitals skorları sunar. Gerçek kullanıcı verisi ile sentetik test sonuçlarını bir arada değerlendirmek için idealdir.
Google Search Console
Search Console'un "Core Web Vitals" raporu, sitenizin tüm sayfalarını "İyi", "İyileştirme gerekiyor" ve "Kötü" olarak gruplar. Sayfa düzeyinde değil, URL grubu düzeyinde raporlama yapar. Sorunlu URL gruplarını tespit etmek ve zaman içindeki ilerlemeyi takip etmek için kullanın.
Chrome DevTools ve Lighthouse
Chrome tarayıcınızın Geliştirici Araçları'ndaki Performance sekmesi, sayfa yükleme sürecini milisaniye hassasiyetinde analiz etmenizi sağlar. Lighthouse sekmesiyle de detaylı performans denetimi yapabilirsiniz. Özellikle LCP öğesini tespit etmek ve render-engelleyici kaynakları belirlemek için çok faydalıdır.
Web Vitals Chrome Uzantısı
Google'ın resmi Chrome uzantısı, herhangi bir sayfada gerçek zamanlı Core Web Vitals değerlerini görmenizi sağlar. Günlük tarama sırasında hızlı kontroller yapmak için pratik bir araçtır.
CrUX Dashboard
Chrome User Experience Report verilerini Google Data Studio üzerinde görselleştiren hazır bir dashboard'dur. 28 günlük trend verisi ile Core Web Vitals performansınızı zaman içinde izleyebilirsiniz.
LCP Optimizasyonu: Adım Adım
LCP, genellikle en çok iyileştirme potansiyeli taşıyan metriktir. İşte LCP'nizi düşürmek için uygulamanız gereken stratejiler:
Sunucu Yanıt Süresini İyileştirin (TTFB)
- CDN kullanın: Cloudflare, Fastly veya AWS CloudFront gibi bir CDN, içeriğinizi kullanıcıya en yakın sunucudan sunar
- Sunucu tarafı önbellek: Redis, Memcached veya Varnish ile dinamik içerikleri önbelleğe alın
- Veritabanı optimizasyonu: Yavaş sorguları tespit edin, indeksler ekleyin, gereksiz sorguları ortadan kaldırın
- HTTP/2 veya HTTP/3: Çoklu istek multiplexing ile bağlantı verimliliğini artırın
- Hosting kalitesi: Paylaşımlı hosting yerine VPS veya dedicated sunucu tercih edin
Görsel Optimizasyonu
LCP öğesi çoğunlukla bir görseldir. Görsel optimizasyonu LCP'yi doğrudan etkiler:
- Modern formatlar kullanın: WebP veya AVIF formatları, JPEG/PNG'ye göre %25-50 daha küçük dosya boyutu sunar
- Responsive görseller: srcset ve sizes attribute'ları ile cihaza uygun boyutta görsel sunun
- Lazy loading (dikkatli uygulayın): LCP görseline kesinlikle lazy loading uygulamayın! Ekranın alt kısmındaki görsellere uygulayın
- Preload kullanın: LCP görselini <link rel="preload"> ile öncelikli yükleyin
- Sıkıştırma: ImageOptim, Squoosh veya Sharp ile kayıpsız veya kabul edilebilir kayıplı sıkıştırma yapın
Render-Engelleyici Kaynakları Ortadan Kaldırın
- Kritik CSS inline edin: İlk görünüm için gereken CSS'i <style> etiketi ile HTML'e gömün
- CSS dosyalarını ertelerin: Kritik olmayan CSS'i media="print" ve onload ile asenkron yükleyin
- JavaScript'i erteleyin: async veya defer attribute'ları ile JS dosyalarını render-engellemez hale getirin
- Kullanılmayan CSS/JS'i temizleyin: PurgeCSS veya benzeri araçlarla kullanılmayan kodları kaldırın
INP Optimizasyonu: JavaScript Performansı
INP sorunları genellikle ağır JavaScript işlemlerinden kaynaklanır. İşte çözüm stratejileri:
Uzun Görevleri Parçalayın
50ms'den uzun süren JavaScript görevleri "uzun görev" (long task) olarak sınıflandırılır ve ana thread'i bloke eder. Çözüm:
- requestIdleCallback: Acil olmayan işlemleri tarayıcının boş zamanlarına erteleyin
- setTimeout ile bölme: Büyük işlemleri küçük parçalara bölüp setTimeout(fn, 0) ile sıralayın
- Web Worker kullanın: Ağır hesaplamalar (sıralama, filtreleme, veri işleme) için arka plan thread'lerinden faydalanın
- Scheduler API: scheduler.postTask() ile görev önceliklendirmesi yapın
JavaScript Bundle Boyutunu Azaltın
- Code splitting: Sayfaya özel JavaScript dosyaları oluşturun, tüm kodu tek bir bundle'a koymayın
- Tree shaking: Kullanılmayan modülleri build sürecinde otomatik kaldırın
- Lazy import: Kullanıcı etkileşimine bağlı bileşenleri dinamik olarak yükleyin
- Üçüncü parti script'leri değerlendirin: Her eklenen üçüncü parti script INP'yi kötüleştirebilir; gereksiz olanları kaldırın
DOM Boyutunu Küçültün
Büyük DOM ağaçları, her etkileşimde tarayıcının daha fazla hesaplama yapmasına neden olur. Hedef: maksimum 1500 DOM node, maksimum 32 derinlik, maksimum 60 child element. Karmaşık layout'ları CSS Grid veya Flexbox ile daha az HTML elemanı kullanarak oluşturun.
CLS Optimizasyonu: Görsel Kararlılık
CLS sorunları genellikle kolay düzeltilebilir ama tespit edilmesi güç olabilir. İşte yaygın çözümler:
Görsellere ve Videolara Boyut Belirtin
Her <img> ve <video> etiketine width ve height attribute'ları ekleyin. Tarayıcı, görsel yüklenmeden önce gerekli alanı ayırır ve layout kayması önlenir. Modern CSS ile aspect-ratio özelliğini de kullanabilirsiniz.
Font Yükleme Stratejisi Belirleyin
- font-display: swap: Fontu beklemek yerine sistem fontunu gösterir, yüklenince değiştirir (küçük CLS etkisi olabilir)
- font-display: optional: Font 100ms içinde yüklenmezse hiç kullanılmaz — sıfır CLS
- Font preload: <link rel="preload" as="font"> ile font dosyalarını erken yükleyin
- Font subsetting: Sadece kullandığınız karakterleri içeren font dosyaları oluşturun (Türkçe karakterler + rakamlar yeterli olabilir)
Reklam ve Dinamik İçerik Alanları
- Sabit yükseklik ayırın: Reklam alanları için minimum yükseklik (min-height) belirleyin
- Placeholder kullanın: İçerik yüklenene kadar alanı koruyan placeholder elemanlar ekleyin
- Transform animasyonları: Layout özelliklerini (top, left, width, height) animate etmek yerine transform kullanın
Core Web Vitals ve Google Sıralama İlişkisi
Core Web Vitals doğrudan bir sıralama faktörüdür, ancak etkisini doğru perspektiften değerlendirmek gerekir. Google, içerik kalitesi ve anahtar kelime uyumu gibi faktörlerin hâlâ en güçlü sinyaller olduğunu belirtmektedir. Yani mükemmel Core Web Vitals skorları, zayıf içerikli bir sayfayı birinci sıraya taşımaz. Ancak içerik kalitesi birbirine yakın iki sayfa arasında, Core Web Vitals fark yaratabilir.
Özellikle rekabetçi anahtar kelimelerde küçük avantajlar büyük fark yaratabilir. Google sıralama takibi yaparak Core Web Vitals optimizasyonlarınızın anahtar kelime pozisyonlarınıza etkisini gözlemleyebilirsiniz. Optimizasyon öncesi ve sonrası düzenli raporlama yaparak ilerlemeyi belgelemek de önemlidir.
Mobile-First Indexing ve Core Web Vitals
Google, mobile-first indexing kullandığı için mobil Core Web Vitals skorlarınız sıralama açısından daha önemlidir. Masaüstünde mükemmel skorlarınız olabilir, ancak mobilde kötü performans gösteriyorsanız sıralama kaybedebilirsiniz. Optimizasyonlarınızı her zaman mobil öncelikli yapın.
İleri Seviye Performans Teknikleri
Speculation Rules API
Chrome 121 ile gelen Speculation Rules API, kullanıcının tıklayacağı muhtemel bağlantıları önceden yükleyerek anında sayfa geçişi sağlar. Bu, kullanıcı deneyimini dramatik şekilde iyileştirir ve sonraki sayfa LCP'sini neredeyse sıfıra indirir.
103 Early Hints
HTTP 103 Early Hints, sunucu henüz ana yanıtı hazırlarken tarayıcıya kritik kaynakları önceden yüklemeye başlamasını söyler. TTFB ve LCP üzerinde önemli iyileştirme sağlar.
Fetch Priority API
fetchpriority="high" attribute'u ile LCP görselinin yükleme önceliğini artırabilirsiniz. fetchpriority="low" ile de kritik olmayan kaynakları erteleyebilirsiniz.
Performans İzleme ve Sürekli Optimizasyon
Core Web Vitals optimizasyonu tek seferlik bir iş değildir. Yeni özellikler, tasarım değişiklikleri ve üçüncü parti güncellemeleri performansı tekrar bozabilir. Sürdürülebilir bir performans kültürü oluşturmak için:
- Performans bütçesi belirleyin: LCP < 2s, INP < 150ms, CLS < 0.05 gibi hedefler koyun
- CI/CD pipeline'a entegre edin: Her deployment öncesi Lighthouse testleri çalıştırın
- Gerçek kullanıcı izleme (RUM): Web Vitals JavaScript kütüphanesi ile gerçek kullanıcı verilerini toplayın
- Düzenli denetim yapın: Ayda bir tüm önemli sayfaların Core Web Vitals değerlerini kontrol edin
- Sıralama değişikliklerini izleyin: Serpux ile günlük sıralama takibi yaparak performans iyileştirmelerinin sıralama etkisini ölçün
Hemen Harekete Geçin
Core Web Vitals optimizasyonu, hem kullanıcı deneyimini hem de SEO performansınızı iyileştiren güçlü bir yatırımdır. PageSpeed Insights ile sitenizi test ederek mevcut durumunuzu öğrenin, bu rehberdeki adımları sırasıyla uygulayın ve değişikliklerin sıralama etkisini ölçün.
Serpux'un 14 günlük ücretsiz denemesi ile Core Web Vitals iyileştirmelerinizin Google sıralamalarına etkisini günlük olarak takip edin. Uygun fiyatlı planlarımızla profesyonel sıralama takibine hemen başlayın.