Core Web Vitals Rehberi: LCP, INP ve CLS Nasıl İyileştirilir?

Core Web Vitals, Google’ın gerçek kullanıcı deneyimini ölçtüğü üç metrikten oluşur: LCP (yüklenme), INP (etkileşim) ve CLS (görsel kararlılık). Bu rehberde her metriği alan verisiyle nasıl ölçeceğinizi, sorunun kaynağını nasıl bulacağınızı ve kod düzeyinde nasıl çözeceğinizi adım adım anlatıyoruz.

Önemli: Google sıralama değerlendirmesinde laboratuvar skorunu değil, alan verisini (CrUX — Chrome User Experience Report) kullanır. PageSpeed Insights’taki 100 puan hedef değil araçtır; hedef, gerçek kullanıcılarınızın %75’inin “iyi” eşiğinin altında kalmasıdır.

Metrikler ve “iyi” eşikleri

1. Doğru ölçüm: alan verisinden başlayın

Sıralamada önemli olan veri kaynağı sırasıyla:

1. Search Console → Core Web Vitals raporu: URL gruplarına göre gerçek kullanıcı durumu. İyileştirme sonrası “Doğrulamayı başlat” ile süreci takip edin.
2. PageSpeed Insights (üst bölüm): URL ve origin bazında CrUX verisi.
3. Lighthouse / laboratuvar testi: Tanı aracı — sorunun nerede olduğunu gösterir, sıralamayı etkilemez.

Denetimlerimizde en sık gördüğümüz hata, ekiplerin laboratuvar skorunu kovalayıp alan verisindeki mobil segmenti gözden kaçırması. Türkiye’de mobil trafik payı çoğu sitede %80’in üzerinde; önce mobil CrUX verisine bakın.

2. LCP: en büyük öğeyi hızlandırın

LCP sorunlarının neredeyse tamamı dört nedenden çıkar: yavaş sunucu yanıtı (TTFB), render’ı bloklayan kaynaklar, geç keşfedilen LCP görseli ve istemci tarafı render.

• LCP görseline asla loading="lazy" vermeyin. Ekranın üstündeki görsellerde lazyload, LCP’yi doğrudan geciktirir; lazyload yalnızca ekran altı içerik içindir.
• LCP görselini erken keşfettirin: <link rel="preload" as="image" fetchpriority="high"> veya img üzerinde fetchpriority="high".
• Kritik CSS’i inline verin, kalan CSS’i küçültün; kullanılmayan CSS/JS’i ayıklayın.
• Görselleri modern formatta (AVIF/WebP) ve gerçek görüntülenme boyutunda servis edin.
• TTFB için: CDN, önbеlleğe alma ve sunucu yanıt süresi optimizasyonu (hedef ≤ 800 ms).

<img src="/gorsel/kapak.avif" alt="Kapak görseli"
     width="1200" height="675"
     fetchpriority="high" decoding="async">

3. INP: ana iş parçacığını serbest bırakın

INP, 2024’te FID’in yerini aldı ve çok daha zorlu bir metrik: yalnızca ilk etkileşimi değil, sayfa ömrü boyunca tüm etkileşimlerin en yavaşlarını ölçer.

• 50 ms’den uzun görevleri (long tasks) bölün; ağır işleri requestIdleCallback veya web worker’a taşıyın.
• Üçüncü taraf script’leri denetleyin: her tag yöneticisi eklentisi, sohbet balonu ve analitik kodu INP bütçenizden yer.
• JS’i defer ile yükleyin; hydration maliyeti yüksek framework’lerde adalı (islands) mimariyi değerlendirin.
• Etkileşim sonrası görsel geri bildirimi hemen verin; ağır işlemi sonraya bırakın.

4. CLS: her öğeye yerini önceden ayırın

Denetimlerimizde CLS’nin bir numaralı nedeni boyutsuz medya, ikincisi geç enjekte edilen bloklardır (reklam, banner, embed). Kural basit: sonradan gelen her şeyin alanı önceden rezerve edilir.

• Tüm <img> ve <video> öğelerine gerçek width/height (veya CSS aspect-ratio) verin.
• Reklam ve embed alanlarına sabit min-height tanımlayın; içerik gelmezse alan boş kalsın, düzen kaymasın.
• Web fontlarında font-display: swap + metrik uyumlu fallback (size-adjust) kullanın.
• Sayfa yüklenirken görünüp sonra kaybolan öğelerden kaçının; bu desen hem CLS üretir hem kullanıcıyı yanıltır.

5. Mobil deneyimi kısıtlamayın

Sayfa deneyimi yalnız hız değildir. Viewport meta etiketinde maximum-scale veya user-scalable=0 kullanmak, kullanıcının yakınlaştırma hakkını elinden alır ve erişilebilirlik denetimlerinden geçmez:

<!-- Doğru -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Benzer şekilde, araya giren reklam pencereleri (intrusive interstitial) ve ekran üstünü kaplayan banner yoğunluğu Google’ın sayfa deneyimi değerlendirmesinde açıkça olumsuz sinyaldir.

Sık sorulan sorular

PageSpeed 100 almak şart mı?

Hayır. Şart olan, CrUX alan verisinde üç metriğin de “iyi” bölgede olması. 100 puan mükemmel bir mühendislik göstergesidir ama 95 ile 100 arasındaki fark sıralamada ölçülebilir etki yaratmaz; alan verisindeki “zayıf → iyi” geçişi yaratır.

Core Web Vitals tek başına sıralamayı belirler mi?

Hayır; içerik kalitesi her zaman öndedir. Ancak benzer kalitedeki rakipler arasında sayfa deneyimi ayrıştırıcıdır ve zayıf CWV, özellikle Discover ve Top Stories görünürlüğünü sınırlar.

İyileştirme sonrası etkiyi ne zaman görürüm?

CrUX 28 günlük hareketli pencere kullanır; kalıcı düzelmeyi Search Console'da görmek genellikle 4–6 hafta alır.

Kaynaklar

• Google — Sayfa deneyimini anlama
• Google — Arama'da sayfa deneyimi (blog)
• web.dev — Core Web Vitals