Core Web Vitals ve Sayfa Hızı Optimizasyonu: 2026 Rehberi

Core Web Vitals Nedir?

Core Web Vitals, Google'ın web sayfalarındaki kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir.

2021'de sıralama faktörü olarak devreye girdi. 2026'da ise her zamankinden daha kritik. Çünkü Google, kullanıcı deneyimini giderek daha fazla ağırlıklandırıyor.

Bu metrikler sadece "teknik SEO" konusu değil — doğrudan dönüşüm oranlarını etkiler. Yavaş bir sayfa, potansiyel müşteriyi rakibe gönderir.

Üç Temel Metrik

LCP — Largest Contentful Paint

Sayfanın ana içeriğinin görünür hale gelmesi için geçen süre.

Kullanıcı sayfaya girdiğinde, en büyük içerik öğesi (genellikle hero görseli, büyük metin bloğu veya video) ne kadar sürede yükleniyor?

LCP'yi etkileyen faktörler:

• Yavaş sunucu yanıt süresi (TTFB)
• Render-blocking CSS ve JavaScript
• Yavaş yüklenen görseller ve videolar
• Client-side rendering gecikmeleri

INP — Interaction to Next Paint

Kullanıcı etkileşimlerine sayfanın ne kadar hızlı yanıt verdiğini ölçer.

2024'te FID (First Input Delay) metriğinin yerini aldı. FID sadece ilk etkileşimi ölçerken, INP tüm etkileşimleri kapsar — tıklamalar, dokunmalar, klavye girişleri.

INP'yi etkileyen faktörler:

• Uzun süren JavaScript görevleri
• Ağır üçüncü parti scriptler
• Ana iş parçacığını (main thread) meşgul eden işlemler
• DOM boyutunun aşırı büyük olması

CLS — Cumulative Layout Shift

Sayfa yüklenirken içeriklerin beklenmedik şekilde kaymasını ölçer.

Bir butona tıklamak üzereyken sayfanın kayması ve yanlış yere tıklanması — bu CLS problemidir.

CLS'yi etkileyen faktörler:

• Boyut belirtilmemiş görseller ve videolar
• Dinamik eklenen içerik (reklamlar, banner'lar)
• Geç yüklenen web fontları
• Boyutsuz iframe'ler

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

Lab Verileri (Simülasyon)

• Google PageSpeed Insights: Hem lab hem alan verileri sunar
• Lighthouse: Chrome DevTools'ta entegre
• WebPageTest: Detaylı waterfall analizi

Lab verileri kontrollü ortamda ölçülür. Gerçek kullanıcı deneyimini yansıtmayabilir ama sorunları tespit etmek için idealdir.

Alan Verileri (Gerçek Kullanıcı)

• Google Search Console: CWV raporu gerçek kullanıcı verilerine dayanır
• Chrome UX Report (CrUX): Chrome kullanıcılarından toplanan anonim veriler
• PageSpeed Insights: "Bu URL'nin alan verileri" bölümü

Google sıralamalarda alan verilerini kullanır. Lab verileri iyi olsa bile alan verileri kötüyse sıralama etkilenir.

LCP Optimizasyonu

Sunucu Yanıt Süresini Azaltın (TTFB)

Sunucu yanıt süresi, LCP'nin temelini oluşturur.

• CDN kullanın: İçeriği kullanıcıya en yakın sunucudan servis edin
• Sunucu tarafı önbellekleme: Veritabanı sorgularını ve sayfa çıktılarını önbelleğe alın
• HTTP/2 veya HTTP/3 kullanın: Paralel kaynak yükleme
• TTFB hedefi: 800 ms'nin altı

Görselleri Optimize Edin

Görseller çoğu sayfada LCP elemanıdır.

• WebP veya AVIF formatı kullanın — JPEG'den %25-50 daha küçük
• Responsive görseller: srcset ve sizes attribute'larıyla cihaza uygun boyut
• Lazy loading: Ekranın altındaki görseller için loading="lazy"
• LCP görseli için preload: <link rel="preload" as="image" href="hero.webp">
• CDN üzerinden servis edin: Imgix, Cloudinary veya Cloudflare Images

Render-Blocking Kaynakları Ortadan Kaldırın

CSS ve JavaScript dosyaları, sayfanın render edilmesini engelleyebilir.

• Kritik CSS'i inline edin: İlk görünüm için gereken CSS'i <style> tag'inde ekleyin
• CSS'i asenkron yükleyin: media="print" onload="this.media='all'"
• JavaScript'i defer/async ile yükleyin: <script defer>
• Kullanılmayan CSS'i temizleyin: PurgeCSS veya benzeri araçlarla

Font Optimizasyonu

Web fontları LCP'yi ciddi şekilde etkileyebilir.

• font-display: swap kullanın — font yüklenene kadar sistem fontu gösterilir
• Font dosyalarını preload edin: <link rel="preload" as="font" type="font/woff2">
• Yalnızca kullanılan karakter setlerini yükleyin (subsetting)
• Mümkünse sistem fontlarını tercih edin

INP Optimizasyonu

Uzun JavaScript Görevlerini Parçalayın

Tarayıcının ana iş parçacığı 50 ms'den uzun süren görevlerle meşgulse, kullanıcı etkileşimlerine yanıt veremez.

• Büyük JavaScript paketlerini code-split edin
• Uzun görevleri requestIdleCallback veya scheduler.yield() ile parçalayın
• Web Worker'lara taşıyın: Ana thread'den bağımsız çalışan arka plan işlemleri

Üçüncü Parti Scriptleri Kontrol Edin

Analytics, reklam, canlı sohbet, sosyal medya widget'ları — her biri main thread'i meşgul eder.

• Her scriptin etkisini ölçün
• Gerekli olmayanları kaldırın
• Kalan scriptleri defer veya dinamik import ile gecikmeli yükleyin
• Facade pattern kullanın — örneğin YouTube embed yerine önce thumbnail gösterin

DOM Boyutunu Küçültün

Aşırı büyük DOM yapısı, her etkileşimi yavaşlatır.

• 1500'den fazla DOM elemanından kaçının
• Derinlik (nesting) 32 seviyeyi geçmesin
• Gereksiz wrapper div'leri temizleyin
• Sanal kaydırma (virtual scrolling) kullanın — büyük listelerde yalnızca görünür öğeleri render edin

CLS Optimizasyonu

Görseller ve Videolar İçin Boyut Belirtin

Her <img> ve <video> elemanına width ve height attribute'u ekleyin.

<img src="photo.webp" width="800" height="600" alt="Açıklama">

Tarayıcı, görsel yüklenmeden önce alan ayırır ve sayfa kayması olmaz.

Modern yaklaşım olarak CSS aspect-ratio özelliğini de kullanabilirsiniz.

Reklamlar ve Dinamik İçerik

Reklamlar CLS'nin en büyük düşmanıdır.

• Reklam alanları için sabit yükseklik ayırlayın (min-height)
• Reklam yoksa bile alanın çökmesini engelleyin
• Sticky reklam pozisyonları kullanın

Font Kaymasını Önleyin

Web fontları yüklendiğinde metin boyutu değişebilir ve sayfa kayar.

• font-display: swap veya optional kullanın
• Font metriklerini sistem fontuyla eşleştirin (size-adjust)
• Fontları <head> içinde preload edin

Sayfa Hızı Genel Optimizasyon

Önbellekleme Stratejisi

Doğru önbellekleme, tekrar ziyaretlerde sayfa hızını dramatik artırır.

• Tarayıcı önbelleği: Cache-Control header'larını ayarlayın
• Service Worker: Offline erişim ve önbellek kontrolü
• CDN önbelleği: Statik kaynakları edge sunucularında önbelleğe alın

Statik kaynaklar (CSS, JS, görseller) için uzun süreli önbellek (1 yıl), HTML için kısa süreli veya no-cache kullanın.

HTTP İsteklerini Azaltın

Her HTTP isteği ek gecikme yaratır.

• CSS ve JavaScript dosyalarını birleştirin (bundling)
• Sprite kullanın veya SVG icon setine geçin
• Gereksiz üçüncü parti isteklerini kaldırın
• dns-prefetch ve preconnect ile DNS çözümleme süresini azaltın

Sıkıştırma

• Gzip veya Brotli sıkıştırma kullanın — dosya boyutunu %60-80 azaltır
• Brotli, Gzip'ten %15-20 daha iyi sıkıştırır
• Sunucu yapılandırmasında sıkıştırmayı etkinleştirin

Modern Görsel Formatları

Her görsel formatı için fallback stratejisi oluşturun.

Performans Bütçesi

Sayfa hızını korumanın en etkili yolu, baştan performans bütçesi belirlemektir.

Örnek performans bütçesi:

• Toplam sayfa boyutu: < 1.5 MB
• JavaScript: < 300 KB (sıkıştırılmış)
• Görseller: < 500 KB
• LCP: < 2 saniye
• INP: < 150 ms
• HTTP istekleri: < 50

Bu bütçeyi CI/CD pipeline'ına entegre edin. Bütçeyi aşan deployment'ları engelleyin.

Mobil Performans

Mobil cihazlar, masaüstüne göre daha yavaş işlemci ve daha yavaş ağ bağlantısına sahiptir.

Google, mobil öncelikli indeksleme kullanır. Mobil performansınız kötüyse, masaüstü sıralamanız da etkilenir.

• 3G bağlantıda test edin
• Düşük performanslı cihazlarda test edin (Chrome DevTools throttling)
• AMP veya performans odaklı framework'ler düşünün

Core Web Vitals ve SEO İlişkisi

Google, CWV'yi sıralama sinyali olarak kullanıyor. Ama nasıl?

CWV tek başına sizi birinci sıraya taşımaz. Ancak içerik kalitesi ve backlink profili eşit olan iki sayfa arasında CWV fark yaratır.

Öte yandan dolaylı etkileri de önemli:

• Hızlı sayfa → düşük hemen çıkma oranı
• İyi UX → yüksek sayfa etkileşimi
• Yüksek etkileşim → daha iyi kullanıcı sinyalleri
• Daha iyi sinyaller → daha iyi sıralama

Bu domino etkisi, CWV'yi doğrudan bir sıralama faktöründen daha değerli kılar.

E-Ticaret ve Sayfa Hızı

E-ticaret sitelerinde sayfa hızı doğrudan gelire dönüşür.

• %1 hız iyileşmesi → %2 dönüşüm artışı (ortalama)
• 3 saniyeden yavaş sayfa → ziyaretçilerin %53'ü terk ediyor
• Mobil dönüşüm oranı zaten masaüstünün yarısı — hızı artırmak bu açığı kapatır

CWV İzleme ve Raporlama

Bir kez optimize edip bırakmak yetmez. Yeni içerik, eklentiler ve güncellemeler performansı bozabilir.

Düzenli izleme araçları:

• Google Search Console — CWV raporu
• PageSpeed Insights — sayfa bazlı analiz
• Web Vitals Chrome eklentisi — anlık ölçüm
• Lighthouse CI — otomatik test pipeline'ı

Teknik SEO sorunlarını manuel olarak tespit etmek zor ve zaman alıcıdır. DexterGPT sitenizi otomatik olarak tarayarak CWV ve sayfa hızı sorunlarını tespit eder, çözüm önerileri sunar.

Sonuç

Core Web Vitals ve sayfa hızı, SEO'nun teknik temelini oluşturur.

LCP, INP ve CLS — bu üç metriği optimize etmek hem kullanıcı deneyimini hem sıralamayı iyileştirir. Üstelik dönüşüm oranlarına doğrudan katkı sağlar.

Performans bir kerelik iş değil, sürekli süreçtir. Ölçün, optimize edin, tekrar ölçün. Bu döngüyü asla kırmayın.

Teknik SEO kontrol listemiz sayfa hızı dışındaki teknik konuları da kapsamlı şekilde ele alıyor.