Core Web Vitals Nedir, Nasıl İyileştirilir?

Sayfa hızı tartışmasında en büyük kafa karışıklığı, hangi sayının önemli olduğudur. Core Web Vitals bu karışıklığı üç net metriğe indirir.

LCP — En büyük içerik ne zaman göründü?

Hedef: 2,5 saniyenin altı. LCP, ekranda görünen en büyük öğenin (genellikle hero görseli veya başlık bloğu) çizilme süresini ölçer. Kullanıcının "sayfa açıldı" hissini yakalar.

LCP'yi ne bozar, nasıl düzeltilir?

• Ağır hero görseli. Modern formata (WebP/AVIF) çevirin, gerçek gösterim boyutunda sunun, fetchpriority="high" ekleyin ve lazy-load yapmayın.
• Render'ı engelleyen CSS/JS. Kritik CSS'i satır içine alın, geri kalanı asenkron yükleyin.
• Yavaş sunucu yanıtı (TTFB). Önbellek katmanı (Redis), CDN ve daha yakın sunucu lokasyonu.
• Web fontları. font-display: swap kullanın, yalnızca gerçekten kullandığınız ağırlıkları yükleyin.

CLS — Sayfa gözünüzün önünde kaydı mı?

Hedef: 0,1'in altı. CLS, beklenmeyen düzen kaymalarını ölçer. Butona basmak üzereyken içeriğin zıplaması tam olarak bu metriğe yansır.

CLS'yi ne bozar?

• Boyutu tanımlanmamış görsel. Her <img> etiketine width ve height yazın; tarayıcı yeri baştan rezerve eder. En yaygın sebep budur.
• Sonradan enjekte edilen bannerlar. Çerez bildirimi, duyuru çubuğu ve reklam alanlarına sabit yüksekliği baştan ayırın.
• Geç yüklenen fontlar. Yedek font ile asıl font arasındaki ölçü farkı metni kaydırır; size-adjust ile dengeleyin.
• Animasyonda yanlış özellik. top/left/height yerine transform kullanın.

INP — Dokunduğunuzda ne kadar hızlı yanıt verdi?

Hedef: 200 milisaniyenin altı. INP, 2024'te FID'in yerini aldı ve sayfa ömrü boyunca tüm etkileşimlerin yanıt süresini değerlendirir.

INP'yi ne bozar?

• Ana iş parçacığını kilitleyen uzun JavaScript görevleri. Kodu bölün, gereksiz kütüphaneyi kaldırın.
• Ağır üçüncü taraf betikleri. Chat widget, ısı haritası, birden fazla analiz betiği. Gerçekten gerekli olanları tutun, geri kalanını geciktirin.
• Aşırı DOM boyutu. 3.000+ öğeli sayfalarda her etkileşim pahalıdır.
• Senkron hesaplama. Ağır işleri requestIdleCallback veya Web Worker'a taşıyın.

Ölçüm: laboratuvar mı saha mı?

Bu ayrımı bilmeyen ekipler yanlış yerde vakit harcar:

• Laboratuvar verisi (Lighthouse, PageSpeed puanı): kontrollü simülasyon. Sorunu bulmak için iyi.
• Saha verisi (Search Console, CrUX): gerçek kullanıcılar. Sıralamayı bu belirler.

PageSpeed puanı 100 olan bir site saha verisinde "iyileştirme gerekli" görünebilir. Kararınızı saha verisine göre verin.

Öncelik sırası: en yüksek etkiden başlayın

1. Hero görselini optimize et ve önceliklendir → LCP
2. Tüm görsellere width/height ekle → CLS
3. Kullanılmayan JavaScript'i kaldır → INP
4. Sunucu önbelleği ve CDN kur → LCP (TTFB)
5. Fontları sadeleştir → LCP + CLS
6. Üçüncü taraf betiklerini gözden geçir → INP

Pratik not

Optimizasyona başlamadan önce mevcut değerleri kaydedin. "Hızlandırdık" demek yerine "LCP 4,1 saniyeden 1,9 saniyeye indi" demek, hem çalışmanın değerini kanıtlar hem sonraki kararları yönlendirir. Ayrıntılı denetim listesi: teknik SEO kontrol listesi.