Core Web Vitals Nedir?
Core Web Vitals (Önemli Web Metrikleri), Google'ın bir web sayfasının kullanıcı deneyimini (UX) nesnel olarak ölçmek için kullandığı 3 temel performans metriğidir. Başlangıçta sadece mobil sıralama faktörü olarak ortaya çıksalar da, bugünlerde Yapay Zeka (RAG) motorlarının sitenizi zaman aşımına uğramadan (Timeout) okuyup okuyamayacağını belirleyen en kritik teknik altyapı skorudur.
Büyük Üçlü: LCP, INP ve CLS
YüklemeLCP (Largest Contentful Paint)
Ekranda görünen en büyük öğenin (genellikle bir Hero görseli veya H1 başlığı) yüklenme süresidir. İdeal Skor: 2.5 saniyenin altı. LCP'yi iyileştirmek için ilk ekran görsellerinde loading="lazy" kullanmamalı, kritik CSS'leri (Critical CSS) satıriçi (inline) olarak vermeli ve CDN (Cloudflare vb.) kullanmalısınız.
EtkileşimINP (Interaction to Next Paint)
Eski FID (First Input Delay) metriğinin yerine gelen INP, kullanıcının bir butona veya menüye tıkladığı an ile tarayıcının bu eyleme tepki verip ekranı güncellediği an arasındaki süredir. İdeal Skor: 200 milisaniyenin altı. Zayıf INP'nin en büyük nedeni, ana iş parçacığını (Main Thread) kilitleyen ağır JavaScript (React Hydration, 3. parti izleme kodları) dosyalarıdır.
KararlılıkCLS (Cumulative Layout Shift)
Sayfa yüklenirken öğelerin aniden yer değiştirmesi (Görsel Kayma) durumudur. Örneğin kullanıcı tam butona tıklayacakken üstten bir reklam yüklenir ve buton aşağı kayar. İdeal Skor: 0.1'in altı. Çözümü basittir: Tüm <img> ve <iframe> etiketlerine mutlaka sabit width ve height değerleri atayın.
Yapay Zeka (RAG) İçin CWV Neden Önemli?
Perplexity veya ChatGPT gibi yapay zeka cevap motorları (Answer Engines), bir kullanıcı sorusu üzerine sitenize veri çekmek için geldiğinde milisaniyelerle yarışır. Eğer siteniz JS Hydration (Client-Side Rendering) nedeniyle içeriği ekrana basmak için 3-4 saniye bekletiyorsa (Kötü LCP/INP), YZ botu Timeout (Zaman Aşımı) yer ve rakibinizin daha hızlı açılan (SSR/SSG) statik sayfasına gider.
Next.js 15+ ile Core Web Vitals Optimizasyonu
// LCP ve CLS'yi aynı anda çözen Next.js Image bileşeni
import Image from 'next/image';
export default function HeroSection() {
return (
<Image
src="/hero-banner.webp"
alt="Intent SEO Kampanyası"
width={1200} // CLS'yi (Kaymayı) önler
height={600} // CLS'yi önler
priority={true} // LCP'yi (Yüklemeyi) hızlandırır (Lazy loading'i iptal eder)
quality={85}
/>
);
}Bunun dışında, Google Tag Manager veya Hotjar gibi INP katili (Main-thread blocking) üçüncü parti betiklerinizi, Next.js'in next/third-parties kütüphanesi veya <Script strategy="worker"> (Partytown) kullanarak Web Worker seviyesine indirmelisiniz.