Core Web Vitals & Performans
Core Web Vitals, Google'ın gerçek kullanıcı deneyimini ölçtüğü üç temel metriktir: LCP (ana içeriğin ne kadar hızlı göründüğü), CLS (sayfa yüklenirken içeriğin ne kadar zıpladığı) ve INP (bir tıklamaya sayfanın ne kadar hızlı tepki verdiği).
Neden önemli?
Bu üç metrik Google'ın doğrudan sıralama sinyalidir; yavaş ve zıplayan sayfalar hem daha alt sıralara düşer hem de ziyaretçi daha sayfa açılmadan geri döner. Örneğin LCP hedefi 2,5 saniyedir; bunun üstündeki her saniye terk oranını (bounce) belirgin artırır. Kararlı ve hızlı bir sayfa hem sıralamayı hem satışa dönüşümü yükseltir.
Sitenizde nasıl anlarsınız?
SeoPulse "Core Web Vitals & Performans" modülünde LCP, CLS ve INP/TBT değerleri renkli gösterilir: yeşil iyi, sarı sınırda, kırmızı sorunlu. "LCP hedefin üzerinde", "Layout shift (CLS) yüksek" veya "Ana iş parçacığı bloklanıyor (TBT)" uyarısı varsa aksiyon gerekir. Kendiniz ölçmek için pagespeed.web.dev adresine sitenizin adresini girin; "Gerçek kullanıcı verileri" bölümündeki LCP/CLS/INP çubuklarına bakın.
Nasıl düzeltilir?
- 1
LCP (yükleme) için: sayfanın en büyük görselini (genelde en üstteki büyük görsel) WebP/AVIF formatına çevirip sıkıştırın, boyutunu ekranda göründüğü ölçüye indirin.
- 2
LCP için: bu ana görseli <head> içinde preload ile erkenden yükletin ve fetchpriority="high" verin; barındırma/sunucu yanıt süresini (TTFB) düşürün.
- 3
CLS (zıplama) için: TÜM görsel, reklam ve video alanlarına width ve height (veya CSS aspect-ratio) verin ki tarayıcı yerini önceden ayırsın.
- 4
CLS için: mevcut içeriğin üstüne sonradan banner/çerez kutusu/reklam enjekte etmeyin; yazı fontlarını font-display: swap ile yükleyin.
- 5
INP/TBT (tepki) için: kullanılmayan JavaScript'i kaldırın, üçüncü parti scriptleri (chat, analitik) defer ile erteleyin, uzun kod bloklarını bölün.
- 6
Değişiklikten sonra pagespeed.web.dev'de tekrar ölçün; saha verisinin güncellenmesi 28 güne kadar sürebilir, sabırlı olun.
<!-- Boyut verilmemiş görsel: yüklenince altındaki içerik zıplar (CLS artar) -->
<img src="/hero.jpg" alt="Ürün görseli"><!-- Boyut verilmiş + öncelikli yüklenen görsel: kayma olmaz, LCP hızlanır -->
<img src="/hero.webp" alt="Ürün görseli" width="1200" height="600" fetchpriority="high">
<!-- <head> içine: en büyük görseli erkenden indirmeye başlat -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">Kendiniz uğraşmak istemiyor musunuz?
Bu sorunu ve raporunuzdaki diğerlerini sizin için çözelim.