Core Web Vitals Nedir? Sayfa Deneyimi Rehberi

Bir ziyaretçi sitenize girdikten sonra kalıp kalmayacağına birkaç saniye içinde karar verir. Bu kararı çoğu zaman içeriğin kalitesi değil, sayfanın ne kadar çabuk açıldığı ve ekranın ne kadar sakin durduğu belirler. Google bu deneyimi ölçmek için Core Web Vitals adlı üç metrik tanımladı ve bu metrikleri sıralama sinyallerine dahil etti.

Bu rehberde üç metriğin neyi ölçtüğünü, hangi değerlerin iyi sayıldığını ve pratikte hangi değişikliklerin skoru yükselttiğini sırayla ele alıyorum. Amaç teoriyi uzatmak değil, hangi ayarı değiştirdiğinizde sonucun değiştiğini net biçimde göstermek.

Core Web Vitals Üç Metrikten Oluşur

Google, sayfa deneyimini üç ayrı ölçümle özetliyor: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS). LCP yükleme hızını, INP etkileşime verilen tepkiyi, CLS ise görsel kararlılığı ölçer. 2024 yılında Google, eski First Input Delay metriğini INP ile değiştirdi; çünkü INP yalnızca ilk tıklamayı değil, sayfanın tüm ömrü boyunca etkileşim gecikmesini ölçüyor.

Bu üç metrikte iyi kabul edilen sınırlar şöyle: LCP 2,5 saniyenin altında, INP 200 milisaniyenin altında, CLS ise 0,1'in altında. Bu değerler zamanla güncellenebilir; güncel sınırları web.dev üzerinden kontrol etmek en doğrusu.

Üç metriğin ortak yanı, gerçek kullanıcı verisinden türetilmiş olmaları. Google bu eşikleri laboratuvarda rastgele belirlemiyor; milyonlarca Chrome kullanıcısının deneyimini toplayıp buna göre kalibre ediyor.

Sayfa hızı ile dönüşüm oranı arasındaki bağlantı da göz ardı edilmemeli; yükleme süresi uzadıkça ziyaretçinin sayfayı terk etme olasılığı artıyor. Bu yüzden Core Web Vitals'ı yalnızca bir SEO metriği değil, gelire doğrudan etkisi olan bir gösterge olarak ele almak daha doğru.

LCP: Sayfa Ne Zaman "Yüklendi" Sayılır

LCP, sayfadaki en büyük görsel öğenin -genelde bir kapak görseli, video kapağı ya da büyük bir başlık- ekranda görünme süresini ölçer. Kullanıcı açısından bu, sayfanın açılıp açılmadığının cevabıdır. Gecikmenin en sık görülen nedenleri optimize edilmemiş görseller, yavaş sunucu yanıtı ve render'ı bekleten CSS/JS dosyalarıdır.

Görselleri sıkıştırmak ve modern formatlara (WebP, AVIF) çevirmek, LCP'de en hızlı kazanılan puanlardan biri. etiketine loading="eager" ve fetchpriority="high" eklemek, LCP görselinin tarayıcı tarafından öncelikli indirilmesini sağlar:

<img src="hero.webp" fetchpriority="high" loading="eager" alt="Kapak görseli">

Sunucu tarafında TTFB (Time to First Byte) süresini kısaltmak da önemli; bir CDN kullanmak, statik içeriği kullanıcıya coğrafi olarak yakın sunuculardan servis ederek bu süreyi doğrudan düşürür. Önbellekleme başlıklarını (Cache-Control) doğru ayarlamak, tekrar ziyaretlerde LCP'yi neredeyse sıfıra indirir.

INP: Tıklamadan Tepkiye Geçen Süre

INP, kullanıcı bir düğmeye bastığında ya da bir bağlantıya dokunduğunda, tarayıcının görsel tepki vermesine kadar geçen süreyi ölçer. Ağır JavaScript çalıştıran sayfalarda bu metrik kötüleşir; tarayıcının ana iş parçacığı (main thread) uzun bir görevle meşgulken kullanıcı etkileşimleri kuyrukta bekler.

Uzun görevleri, yani 50 milisaniyeden uzun süren JS bloklarını küçük parçalara bölmek INP'yi doğrudan iyileştirir. Kritik olmayan betikleri defer ile geciktirmek de main thread'i boşaltır:

<script src="analytics.js" defer></script>

Chrome DevTools'daki Performance sekmesi, hangi JS dosyasının main thread'i ne kadar meşgul ettiğini gösterir; INP sorununun kaynağını bulmanın en pratik yolu budur. Üçüncü parti betikler -reklam, canlı destek, takip kodları- genelde en büyük suçlu olur; bunları asenkron yüklemek veya geciktirmek skoru gözle görülür biçimde iyileştirir.

CLS: Sayfanın Aniden Kayması

CLS, sayfa yüklenirken öğelerin beklenmedik biçimde yer değiştirmesini ölçer. Klasik örnek şu: bir haberi okumaya başlarsınız, geç yüklenen bir reklam üstte yer açar, metin aşağı kayar ve yanlış yere tıklarsınız. Bu, kullanıcı deneyimini bozan en can sıkıcı davranışlardan biri.

Kaymayı önlemenin en güvenilir yolu, görsellere ve gömülü içeriklere önceden genişlik ve yükseklik tanımlamaktır:

<img src="urun.jpg" width="800" height="600" alt="Ürün fotoğrafı">

Bu iki özellik, tarayıcının görsel yüklenmeden önce doğru boyutta yer ayırmasını sağlar. Reklam alanları ve dinamik bileşenler için sabit boyutlu yer tutucular (placeholder) kullanmak da aynı mantıkla düzen kaymasını engeller. Özel yazı tipi kullanıyorsanız font-display: optional veya swap tanımlamak, yazı tipi değişiminin metni kaydırmasını azaltır.

Ölçüm: Laboratuvar Verisi mi, Saha Verisi mi

Core Web Vitals'ı iki farklı kaynaktan ölçebilirsiniz. Laboratuvar verisi (lab data), Lighthouse gibi araçlarla kontrollü bir ortamda üretilir ve geliştirme sürecinde sorun teşhisi için uygundur. Saha verisi (field data) ise gerçek kullanıcıların tarayıcılarından toplanır ve Chrome User Experience Report (CrUX) üzerinden Google Search Console'da görünür.

İkisi arasında fark olabilir; laboratuvar testi tek bir cihazı ve bağlantıyı simüle ederken, saha verisi binlerce farklı cihazı ve ağ koşulunu yansıtır. Google sıralama için saha verisini kullanır; bu yüzden Search Console'daki "Önemli Web Verileri" raporunu düzenli takip etmek gerçek etkiyi görmenin tek yolu. Bir sayfa laboratuvar testinde mükemmel çıkıp saha verisinde kötü görünebilir; bu fark genelde gerçek kullanıcıların yavaş ağ veya eski cihaz kullanmasından kaynaklanır.

Mobil Performans Neden Ayrı Bir Öncelik

Google mobil öncelikli indeksleme kullandığı için, sitenizin mobil sürümündeki Core Web Vitals skorları sıralamayı doğrudan etkiler. Mobil cihazlar genelde daha zayıf işlemciye ve daha değişken ağ bağlantısına sahiptir; masaüstünde sorunsuz çalışan bir sayfa, orta segment bir telefonda INP'de zorlanabilir.

PageSpeed Insights'ı hem mobil hem masaüstü sekmesinden ayrı ayrı çalıştırmak aradaki farkı somut biçimde gösterir. Görselleri srcset ile farklı ekran boyutlarına göre sunmak, mobilde gereksiz büyük dosya indirmenin önüne geçer:

<img srcset="urun-400.webp 400w, urun-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" src="urun-800.webp" alt="Ürün">

Bu tek satır, tarayıcının ekran genişliğine uygun görseli seçmesini sağlar ve mobil LCP'yi belirgin biçimde iyileştirir. Mobil testi gerçek bir orta segment telefonda yapmak, simülatörden çok daha güvenilir sonuç verir.

Nereden Başlamalı

Öncelik sırası genelde nettir: önce PageSpeed Insights ile mevcut skorunuzu ölçün ve en kötü performans gösteren metriği belirleyin. Çoğu sitede en büyük kazanım görsel optimizasyonundan gelir; çünkü LCP en sık ihlal edilen metriktir. Sonra render'ı bekleten kaynakları azaltın ve gereksiz üçüncü parti betikleri (sohbet widget'ları, takip kodları) gözden geçirin.

Her değişiklikten sonra tekrar ölçüm yapmak, hangi adımın gerçekten işe yaradığını gösterir. Bir performans bütçesi belirlemek de yardımcı olur; örneğin sayfa boyutu için bir üst sınır koymak, eklediğiniz her görselin veya betiğin bu sınırı zorlayıp zorlamadığını görmenizi sağlar. Bir kez optimize edip unutmak yerine, her içerik güncellemesinde skorları kontrol etmek zamanla oluşan kademeli bozulmayı önler.

Core Web Vitals'ı tek seferlik bir proje değil, sürekli izlenen bir gösterge paneli olarak ele almak en sağlıklısı. Sitenize yeni bir özellik, banner ya da üçüncü parti araç eklediğinizde bu değişikliğin skorları nasıl etkilediğini kontrol etmek, zamanla birikip fark edilmeyen bir yavaşlamayı erken yakalamanızı sağlar.

Yazan Celil Uyanikoglu

Bilgisayar mühendisiyim; 25 yılı aşkın süredir bilgi işlem sektörünün içindeyim. Bu blogu 2020'de, işimde her gün karşılaştığım sorunların çözümlerini bir yere yazmak için açtım: Linux, güvenlik, tarayıcılar, yapay zeka araçları. Yazdığım her rehberi önce kendi bilgisayarımda ya da sunucumda deniyorum; çalıştığını görmediğim adımı yayınlamam. Hatalı ya da eskimiş bir şey görürsen iletişim sayfasından yaz — düzeltirim.