Google, “kullanıcı bu sayfada iyi bir deneyim yaşıyor mu?” sorusunu ölçülebilir hale getirmek için Core Web Vitals adını verdiği üç metrik kullanır. Bu metrikler arama sıralamasında sayfa deneyimi sinyallerinin parçasıdır, ama asıl önemleri şudur: yavaş yüklenen, tıklamalara geç tepki veren ya da okurken kayan bir sayfa, ziyaretçiyi ve satışı kaçırır. Bu rehberde üç metriği, eşik değerlerini, saha ve laboratuvar verisi farkını ve her birinin nasıl düzeltileceğini anlatıyoruz.
Üç metrik ve eşik değerleri
| Metrik | Neyi ölçer? | İyi | İyileştirilmeli | Kötü |
|---|---|---|---|---|
| LCP – Largest Contentful Paint | Ana içeriğin ne kadar sürede göründüğü | ≤ 2,5 sn | 2,5–4 sn | > 4 sn |
| INP – Interaction to Next Paint | Tıklama/dokunma sonrası ekranın ne kadar sürede tepki verdiği | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS – Cumulative Layout Shift | Sayfa öğelerinin beklenmedik kayma miktarı | ≤ 0,1 | 0,1–0,25 | > 0,25 |
Bir sayfanın “iyi” sayılması için ziyaretlerin 75. yüzdelik diliminde üç metriğin de iyi aralıkta olması gerekir. Yani ziyaretçilerin en az %75’i iyi deneyim yaşamalıdır. Değerlendirme mobil ve masaüstü için ayrı yapılır.
INP, Mart 2024’te eski FID (First Input Delay) metriğinin yerini aldı. FID yalnızca ilk tıklamanın gecikmesine bakıyordu; INP ise ziyaret boyunca yapılan etkileşimlerin en yavaşlarından birini raporlar ve bu nedenle JavaScript ağırlıklı sitelerde daha zorlayıcıdır.
Saha verisi ve laboratuvar verisi
Core Web Vitals’ı konuşurken iki tür veri karıştırılır:
- Saha verisi (field data): Gerçek Chrome kullanıcılarından toplanan anonim ölçümlerdir (Chrome UX Report, CrUX). Search Console’daki Core Web Vitals raporu ve PageSpeed Insights’ın üst bölümü bu veriyi gösterir. Son 28 günün ortalamasıdır; yaptığınız düzeltmenin etkisi bu yüzden birkaç hafta içinde yansır.
- Laboratuvar verisi (lab data): Lighthouse veya site hız testi aracımız gibi araçların kontrollü bir ortamda yaptığı tek seferlik ölçümdür. Sorunu bulmak ve düzeltmeyi hemen denemek için idealdir.
Laboratuvar testinde INP doğrudan ölçülemez, çünkü kimse sayfaya tıklamaz. Bunun yerine Total Blocking Time (TBT) değerine bakılır; TBT yüksekse INP’nin de kötü olma ihtimali yüksektir.
LCP nasıl iyileştirilir?
LCP öğesi çoğu sayfada büyük bir kapak görseli, slider’ın ilk karesi ya da büyük bir başlık metnidir. LCP süresi dört parçadan oluşur: sunucu yanıtı (TTFB), kaynağın keşfedilme gecikmesi, kaynağın indirilmesi ve çizim. Pratik düzeltmeler:
- Sunucu yanıtını hızlandırın: sayfa önbelleği, iyi bir hosting, CDN.
- LCP görselini erken keşfettirin: görsel CSS arka planı yerine
<img>olarak HTML’de olsun ve öncelik verin:
<img src="/img/hero.avif" width="1200" height="600" fetchpriority="high" alt="Kampanya görseli">- LCP görseline asla
loading="lazy"eklemeyin. Bu, en sık yapılan hatadır. - Görseli küçültün: doğru boyut ve WebP/AVIF formatı ile dosya boyutunu düşürün.
- Render’ı engelleyen CSS ve fontları azaltın: kritik CSS’i satır içine alın, fontlarda
font-display: swapkullanın.
INP nasıl iyileştirilir?
INP kötüyse sorun neredeyse her zaman ana iş parçacığını (main thread) uzun süre meşgul eden JavaScript’tir. Kullanıcı bir butona bastığında tarayıcı başka bir işi bitirmeyi bekliyorsa, tepki gecikir.
- Uzun görevleri bölün: 50 ms’yi aşan işleri parçalara ayırın; ağır hesaplamaları
setTimeout,requestIdleCallbackveya Web Worker ile erteleyin. - Üçüncü taraf betikleri azaltın: canlı sohbet, ısı haritası, birden fazla reklam/izleme kodu INP’yi ciddi biçimde bozar.
- Olay işleyicilerini hafif tutun: tıklamada önce görsel geri bildirimi verin (ör. buton durumunu değiştirin), ağır işi sonra yapın.
- DOM boyutunu küçültün: binlerce öğeli sayfalarda her güncelleme pahalıdır.
- Gereksiz yeniden çizimleri önleyin: React/Vue gibi çatılarda gereksiz render’ları azaltın.
CLS nasıl iyileştirilir?
CLS, kullanıcı tam bir bağlantıya tıklayacakken içeriğin aşağı kaymasıyla ortaya çıkan can sıkıcı durumu ölçer. Başlıca nedenler ve çözümler:
| Neden | Çözüm |
|---|---|
| Boyutu belirtilmemiş görseller | width ve height niteliklerini yazın veya CSS aspect-ratio kullanın |
| Sonradan yüklenen reklam ve gömülü içerik | Reklam alanı için önceden sabit yükseklik ayırın |
| Sayfanın üstüne sonradan eklenen banner (çerez, kampanya) | Banner’ı içeriğin üstüne bindirin (overlay) veya alanını baştan ayırın |
| Web fontu yüklenince değişen metin boyutu | font-display: swap ile birlikte uyumlu yedek font ve size-adjust kullanın |
Kullanıcının bir eylemi (tıklama, dokunma) sonrası 500 ms içinde olan kaymalar CLS’ye sayılmaz; yani bir akordeon menünün açılması sorun değildir.
Ölçüm ve takip için adımlar
- Search Console → Core Web Vitals raporunda sorunlu URL gruplarını bulun.
- Gruptan örnek bir sayfayı PageSpeed Insights ve hız testi aracımızla inceleyin; LCP öğesini ve uzun görevleri tespit edin.
- Düzeltmeyi yapın ve laboratuvarda doğrulayın.
- Search Console’da “Düzeltmeyi doğrula” butonuna basın; değerlendirme 28 günlük bir süreç sonunda tamamlanır.
- Kendi saha verinizi toplamak isterseniz Google’ın açık kaynak
web-vitalsJavaScript kütüphanesini Analytics’e bağlayabilirsiniz.
Hangi sayfalardan başlamalı?
Her sayfayı tek tek düzeltmeye çalışmak yerine şablon mantığıyla düşünün. Çoğu sitede sayfalar birkaç şablondan üretilir: ana sayfa, kategori, ürün, blog yazısı, iletişim. Bir ürün sayfası şablonundaki LCP sorununu düzelttiğinizde yüzlerce ürün sayfası aynı anda iyileşir. Search Console da sorunlu URL’leri zaten benzer sayfalar halinde gruplar. Önceliği, en çok trafik ve dönüşüm getiren şablona verin; genellikle bu, e-ticarette ürün ve kategori sayfaları, hizmet işletmelerinde ise ana sayfa ve hizmet sayfalarıdır.
Sık yapılan hatalar
- Sadece masaüstü sonucuna bakıp mobil sorunları gözden kaçırmak.
- Laboratuvar puanı 100 olunca işin bittiğini sanmak; saha verisi farklı söyleyebilir.
- Ana görsele lazy loading eklemek.
- Çerez onay banner’ını içerik akışına sonradan ekleyip CLS yaratmak.
- Her sayfaya ağır bir sayfa oluşturucu ve onlarca eklenti yüklemek.
Core Web Vitals tek başına sıralamayı belirlemez; alakalı ve faydalı içerik her zaman önce gelir. Ama içerik kaliteniz rakiplerinize yakınsa, hızlı ve kararlı sayfa farkı yaratır. Genel hızlandırma adımları için web sitesi hızlandırma rehberimize, görseller için görsel optimizasyonu rehberine göz atın.