Core Web Vitals:
Sayfa Hızınızı Artırmanın Yolları

Core Web Vitals, Google'ın bir web sayfasının kullanıcı deneyimi açısından performansını ölçmek için tanımladığı üç temel metriğin bütününüdür. Bu metrikler yalnızca teknik bir kıyaslama ölçütü değil; sayfa hızı, etkileşim kalitesi ve görsel kararlılık gibi kullanıcının doğrudan hissettiği deneyim boyutlarını sayısal olarak ifade eder.

Google, bu üç metriği 2021'deki Page Experience güncellemesiyle doğrudan sıralama faktörü haline getirdi. Buna göre eşdeğer içerik kalitesinde iki sayfa arasında Core Web Vitals skorları daha yüksek olan sayfa sıralamada öne geçer. Bunun ötesinde, Amazon ve Walmart'ın yürüttüğü araştırmalar sayfa hızındaki her 100 milisaniyelik iyileşmenin geliri doğrudan etkilediğini ortaya koymuştur.

Largest Contentful Paint (LCP), sayfanın görünür alanındaki en büyük içerik öğesinin — genellikle hero görseli veya büyük bir başlık bloğu — tarayıcı tarafından ne kadar sürede boyandığını ölçer. Kullanıcının "sayfa yüklendi" hissini en doğrudan etkileyen metrik olduğu için Core Web Vitals içinde en yüksek ağırlığa sahiptir.

• Hero görselini önceden yükleyin (preload): <link rel="preload"> etiketi ile LCP öğesini tarayıcının kaynak keşif sürecini beklemeden erken yükleyin; bu tek adım LCP'yi ortalama 300-600ms iyileştirebilir.
• Sunucu yanıt süresini (TTFB) 600ms altına indirin: LCP'nin büyük bölümü sunucudan ilk baytın gelmesiyle başlar; yavaş TTFB tüm sonraki süreleri doğrudan uzatır.
• LCP öğesini lazy load etmeyin: Görünür alandaki hero görselini loading="lazy" ile işaretlemek, yüklemeyi kasıtlı olarak geciktirir ve LCP'yi ciddi ölçüde kötüleştirir.
• Görsel boyutunu optimize edin: WebP veya AVIF formatı, aynı görsel kalitesinde JPEG'e kıyasla %30-50 daha küçük dosya boyutu sağlar.
• CDN kullanarak coğrafi gecikmeyi azaltın: İçerik dağıtım ağı, statik dosyaların kullanıcıya en yakın sunucudan sunulmasını sağlar.

Interaction to Next Paint (INP), kullanıcının sayfa ile gerçekleştirdiği her tıklama, dokunma veya klavye etkileşiminden sonra sayfanın görsel olarak ne kadar sürede güncelleneceğini ölçer. Oturum boyunca gerçekleşen tüm etkileşimlerin 75. yüzdelik dilim değerini raporladığından, sayfanın genelindeki tepki hızını temsil eder.

INP sorunlarının temel kaynağı, uzun görevler (Long Tasks) olarak adlandırılan ve ana iş parçacığını (main thread) 50ms'den uzun süre bloke eden JavaScript işlemleridir. Bu görevler arasında ağır event handler'lar, senkron API çağrıları ve gereksiz DOM manipülasyonları öne çıkar.

• Uzun görevleri parçalayın: 50ms'den uzun JavaScript görevlerini setTimeout veya Scheduler API kullanarak küçük parçalara bölün ve ana iş parçacığının nefes almasına izin verin.
• Üçüncü taraf scriptleri denetleyin: Reklam, analitik ve canlı destek scriptleri INP üzerindeki en büyük dış kaynaklı yüktür; kritik olmayan scriptleri defer veya async ile yükleyin.
• Event handler'ları hafif tutun: Tıklama gibi kullanıcı eylemlerine bağlı fonksiyonlar mümkün olduğunca az iş yapmalı; ağır hesaplamaları Web Worker'a taşımayı değerlendirin.
• Gereksiz DOM boyutunu küçültün: 1.500'den fazla DOM düğümüne sahip sayfalar, stil yeniden hesaplama ve düzen işlemlerini yavaşlatır.

Cumulative Layout Shift (CLS), sayfa yüklenirken içeriklerin beklenmedik biçimde yer değiştirmesini ölçer. Okunmakta olan bir metnin reklam yüklenmesiyle aşağı kayması ya da tıklanmak üzere olunan bir butonun yerinin değişmesi, CLS'in en yaygın tezahürleridir. Bu durum hem kullanıcıyı rahatsız eder hem de Google'ın görsel kararlılık değerlendirmesini doğrudan etkiler.

Görseller, ortalama bir web sayfasının toplam veri ağırlığının yaklaşık %50-65'ini oluşturur. Bu nedenle görsel optimizasyonu, LCP başta olmak üzere genel sayfa hızı üzerinde en yüksek getiri sağlayan müdahale alanıdır. Doğru format seçimi, sıkıştırma ve yükleme stratejisinin kombinasyonu, bu ağırlığı önemli ölçüde azaltabilir.

• Modern formatları benimseyin: JPEG ve PNG yerine WebP veya AVIF tercih edin. <picture> etiketi ile tarayıcı desteğine göre geri dönüş sağlayabilirsiniz.
• Duyarlı görseller kullanın: srcset ve sizes nitelikleriyle her ekran boyutuna uygun görsel sürümü sunun; mobil kullanıcıların masaüstü boyutunda görsel indirmesinin önüne geçin.
• Görünür alan dışındaki görsellere lazy loading uygulayın: loading="lazy" niteliği, ekranda henüz görünmeyen görsellerin yüklenmesini erteleyerek başlangıç yükleme süresini kısaltır.
• Görsel sıkıştırma araçları kullanın: Squoosh, ImageOptim veya Cloudinary gibi araçlarla görsel kalitesinden ödün vermeden dosya boyutunu azaltın. Derleme sürecine otomatik sıkıştırma entegre etmek uzun vadede zaman kazandırır.
• Hero görselini preload edin: LCP öğesi olduğu belirlenen görseli <link rel="preload" as="image"> ile önceden yükleme kuyruğuna alın.

Sunucudan ilk baytın gelme süresi olan Time to First Byte (TTFB), LCP'nin zeminini oluşturur. TTFB yüksekse diğer tüm optimizasyonların etkisi sınırlı kalır; tarayıcı, sunucudan veri almadan hiçbir şeyi işleyemez. Google, iyi bir TTFB değerini 800ms veya altı olarak tanımlar; ancak rekabetçi sıralamalar için 200ms altını hedeflemek daha gerçekçidir.

• Sunucu tarafı önbellekleme uygulayın: Dinamik sayfaları bile önbelleğe alarak tekrarlayan isteklerde veritabanı sorgularını atlayın; WordPress için WP Rocket, Node.js için Redis yaygın çözümlerdir.
• CDN (İçerik Dağıtım Ağı) kullanın: Cloudflare, AWS CloudFront veya Fastly gibi CDN'ler statik varlıkları kullanıcıya coğrafi olarak en yakın düğümden sunar ve gecikmeyi dramatik biçimde azaltır.
• HTTP/2 veya HTTP/3 kullanın: Bu protokoller çoklu bağlantı sorununu ortadan kaldırarak paralel kaynak yüklemeyi mümkün kılar; büyük çoğunluk CDN ve modern barındırma sağlayıcıları bunları destekler.
• Barındırma planını yeniden değerlendirin: Paylaşımlı hosting planları, trafik artışlarında TTFB'yi öngörülemez biçimde yükseltir. VPS veya bulut tabanlı çözümler tutarlı performans sunar.
• Veritabanı sorgularını optimize edin: Yavaş TTFB'nin önemli bir kaynağı verimsiz veritabanı işlemleridir; sorgu önbellekleme ve indeks optimizasyonu bu süreyi doğrudan kısaltır.

JavaScript, sayfa performansının hem en büyük düşmanı hem de en büyük dostudur. Yanlış yüklendiğinde tarayıcının HTML ayrıştırmasını ve render işlemini durdurur; doğru yönetildiğinde ise dinamik deneyimi mümkün kılar. Render engelleyen JavaScript, kritik içeriğin boyamasını geciktirerek doğrudan LCP ve INP'i olumsuz etkiler.

Web fontları ve CSS, doğru yönetilmediğinde hem LCP'yi (render engelleme yoluyla) hem de CLS'i (font değiştirme kayması yoluyla) olumsuz etkileyen iki önemli kaynaktır. Google Fonts gibi harici kaynaklardan yüklenen fontlar ek bir DNS çözümleme ve bağlantı maliyeti taşır; bu gecikme render sürecinin başına eklenir.

• Fontları kendi sunucunuzda barındırın: Harici font servislerine olan bağımlılığı ortadan kaldırarak DNS çözümleme ve bağlantı kurma gecikmelerini önleyin.
• font-display: swap veya optional kullanın: swap sistemi, web fontu yüklenene kadar sistem fontunu göstererek görünmez metin sorununu (FOIT) önler; optional ise düzen kaymasını tamamen ortadan kaldırır.
• Kritik CSS'i inline olarak sunun: İlk ekranda görünen içeriklerin stilini <head> içinde inline CSS olarak tanımlayın; bu, tarayıcının harici stil dosyasını beklemeden ilk boyamayı yapmasını sağlar.
• Kullanılmayan CSS'i temizleyin: PurgeCSS veya UnCSS gibi araçlarla büyük CSS dosyalarından kullanılmayan kuralları kaldırın; özellikle Bootstrap gibi genel framework'lerde dramatik boyut azalması mümkündür.
• preconnect ile harici kaynakları erken hazırlayın: Google Fonts veya CDN bağlantıları için <link rel="preconnect"> etiketi, bağlantı kurma sürecini önceden başlatır.

Google, Core Web Vitals skorlarını ağırlıklı olarak mobil kullanıcı verileri üzerinden hesaplar. Bu, masaüstünde mükemmel skorlar alan bir sitenin Google Search Console'da yetersiz performans gösterebileceği anlamına gelir. Türkiye'deki ortalama web trafiğinin %65'inden fazlasının mobil cihazlardan geldiği düşünüldüğünde, mobil performans ayrı ve öncelikli bir optimizasyon ekseni olmalıdır.

Mobil cihazların masaüstüne kıyasla daha düşük işlemci gücü ve değişken ağ koşulları altında çalıştığı göz önüne alındığında, aynı kaynak kodu mobilde çok daha yavaş çalışabilir. Özellikle JavaScript işleme süresi, mobil cihazlarda masaüstüne kıyasla 3-5 kat daha uzun sürebilmektedir.

• Chrome DevTools'ta mobil simülasyon ile test edin: "Throttling: Slow 4G" ve "CPU: 4x slowdown" ayarları ile gerçek mobil koşulları simüle ederek gerçekçi performans verileri elde edin.
• Dokunma alanlarını yeterince büyük tutun: Google, minimum 44×44px dokunma alanı önermektedir; küçük butonlar hem INP hem kullanıcı deneyimini olumsuz etkiler.
• Viewport meta etiketini doğru yapılandırın: width=device-width, initial-scale=1 olmadan mobil tarayıcılar sayfayı ölçeklendirmek için ekstra hesaplama yapar.
• Ağ koşullarına duyarlı yükleme stratejisi benimseyin: Service Worker ile kritik kaynakları önbelleğe alarak tekrarlayan ziyaretlerde mobil deneyimi dramatik biçimde iyileştirin.

Core Web Vitals optimizasyonu tek seferlik bir proje değil, sürekli izleme gerektiren bir süreçtir. Yeni içerik, tema güncellemeleri, eklenti eklemeleri veya üçüncü taraf script değişiklikleri performansı beklenmedik biçimde etkileyebilir. Bu nedenle düzenli ölçüm ve uyarı mekanizmaları kurmak, kazanımlarınızı korumak için zorunludur.

Önemli bir ayrım: lab verileri (PageSpeed Insights, Lighthouse) kontrollü ortamda elde edilen tahminlerdir; field verileri (CrUX, Search Console) ise gerçek kullanıcılardan toplanan ölçümlerdir. Google, sıralama kararlarında field verilerini esas alır; dolayısıyla her ikisini de takip etmek gerekmektedir.