Core Web Vitals (CWV), Google'ın "Page Experience" (Sayfa Deneyimi) sinyallerinin temelidir. Kullanıcının web sayfasında yaşadığı deneyimin yükleme hızı, etkileşim süresi ve görsel kararlılık açısından ölçülmesini sağlar. LCP, INP ve CLS olmak üzere üç ana metrik vardır. Bu metrikler 2021'den beri sıralama faktörü olarak kullanılıyor.
Google, kullanıcı deneyimini ölçmek için üç temel metriği seçti: yükleme performansı (LCP), etkileşim performansı (INP) ve görsel kararlılık (CLS). Her metrik "iyi", "geliştirilmeli" ve "kötü" olmak üzere eşik değerlere sahiptir. Tüm metrikler "iyi" aralığındayken sayfa deneyimi Google açısından başarılı kabul edilir.
LCP, sayfadaki en büyük görsel veya metin bloğunun görüntülenene kadar geçen süreyi ölçer. Genelde hero görseli, büyük bir banner veya ana başlık LCP öğesi olur. Kullanıcı "içerik geldi" hissini ne kadar hızlı alıyorsa LCP o kadar iyidir.
Sunucu yanıt süresini (TTFB) düşürün: iyi hosting, CDN, veritabanı optimizasyonu. LCP öğesini (genelde büyük görsel) mümkün olan en kısa sürede sunun; above-the-fold görsellere lazy loading uygulamayın. Render-blocking JavaScript ve CSS'i azaltın. Görselleri WebP/AVIF ile sıkıştırın, fetchpriority="high" ile LCP öğesine öncelik verin. Preload ile kritik kaynakları erken yükleyin.
"LCP'nin öğesi viewport dışındaysa veya iframe içindeyse ölçülmez. Ana içeriğiniz ilk ekranda olmalı."
INP, kullanıcı bir butona tıkladığında, form alanına yazdığında veya başka bir etkileşimde bulunduğunda, tarayıcının yanıt vermesi için geçen süreyi ölçer. Düşük INP, sayfanın hızlı ve akıcı hissettiği anlamına gelir.
Ana thread'i boş bırakın: uzun JavaScript görevlerini bölün (code splitting). Third-party script'leri azaltın veya lazy load edin. Event handler'ları optimize edin; debounce ve throttle kullanın. Ağır DOM manipülasyonlarını Web Worker'lara taşıyın. Büyük JavaScript paketlerini küçültün ve geciktirin.
CLS, sayfa yüklenirken veya kullanıcı etkileşimde bulunurken beklenmedik layout kaymalarını ölçer. Örneğin görsel yüklenince metin aşağı kayıyorsa veya reklam yerleşimi değişiyorsa CLS puanı yükselir. Yüksek CLS, kullanıcının yanlış butona tıklamasına neden olabilir; bu da rahatsız edici bir deneyimdir.
Görsellere ve videolara width ve height attribute'u ekleyin; böylece tarayıcı yüklemeden önce alan ayırır. Reklamlar, embed'ler ve iframe'ler için sabit yükseklik rezerve edin. Dinamik içerikleri (banner, form) mevcut içeriğin üstüne eklemek yerine yeterli boşluk bırakın. Web font yüklenirken FOIT/FOUT'u azaltmak için font-display: optional veya size-adjust kullanın.
Chrome DevTools Lighthouse, PageSpeed Insights ve Chrome UX Report (CrUX) CWV verilerini sunar. CrUX, gerçek kullanıcı verisidir; laboratuvar testleri ise tek seferlik simülasyondur. Her ikisine de bakılmalıdır. Google Search Console'daki "Core Web Vitals" raporu sitenizin URL'lerine göre performans dağılımını gösterir; "kötü" veya "geliştirilmeli" URL'leri tespit edip önceliklendirebilirsiniz.
Core Web Vitals tek başına sıralamayı belirlemez; meta title, meta description ve içerik kalitesi gibi faktörlerle birlikte değerlendirilir. Ancak aynı kalitede iki sayfa arasında CWV'si daha iyi olan tercih edilir. Sayfa hızı rehberimiz CWV ile doğrudan ilgilidir; birlikte incelenmesi faydalıdır.