Core Web Vitals Nedir? LCP, INP ve CLS'yi İyileştirme Rehberi

LCP: Largest Contentful Paint

Sayfadaki en büyük görsel ya da metin bloğunun ekranda görünme süresidir. Genellikle hero görseli veya ana başlıktır.

• Hero görselini WebP/AVIF formatında ve doğru boyutta sunun.
• LCP görselini lazy-load ile yüklemeyin; fetchpriority="high" verin.
• Sunucu yanıt süresini CDN ve önbellekle kısaltın.
• Render engelleyen CSS ve fontları azaltın.

INP: Interaction to Next Paint

Kullanıcı bir butona tıkladığında sayfanın görsel olarak yanıt verme süresidir. Ağır JavaScript ana iş parçacığını meşgul ettiğinde INP kötüleşir.

• Kullanılmayan üçüncü taraf script'leri kaldırın.
• Uzun görevleri küçük parçalara bölün.
• Kritik olmayan bileşenleri sonradan yükleyin.

CLS: Cumulative Layout Shift

Sayfa yüklenirken öğelerin beklenmedik şekilde kaymasıdır. Okurken metnin aşağı kayması ya da yanlış butona tıklanması CLS'nin sonucudur.

• Görsel ve videolara width/height ya da aspect-ratio verin.
• Reklam ve gömülü içerikler için önceden alan ayırın.
• Web fontlarında font-display: swap ve uygun yedek font kullanın.

Hangi metrik ne zaman sorun olur?

Kurumsal sitelerde en sık sorun LCP'dir: büyük ve optimize edilmemiş hero görselleri, yavaş sunucu ve web fontları ilk görüntüyü geciktirir. E-ticaret sitelerinde INP öne çıkar; filtreler, sepet ve üçüncü taraf script'ler ana iş parçacığını meşgul eder. Haber ve blog sitelerinde ise reklam alanları ve sonradan yüklenen bileşenler yüzünden CLS sık görülür.

Görsel optimizasyonu adım adım

1. Görselleri gösterildikleri boyutta sunun; 4000 piksellik bir fotoğrafı 400 piksellik alanda kullanmayın.
2. WebP veya AVIF formatına dönüştürün.
3. srcset ve sizes ile farklı ekranlar için farklı boyutlar sunun.
4. İlk ekrandaki görsele öncelik verin, diğerlerini lazy-load ile yükleyin.
5. Her görsele width ve height vererek kaymaları önleyin.

Üçüncü taraf script'leri yönetin

Analitik, sohbet balonu, reklam pikselleri ve harita gibi üçüncü taraf script'ler çoğu zaman sitenin kendi kodundan daha ağırdır. Her birinin gerçekten kullanılıp kullanılmadığını gözden geçirin, mümkün olanları kullanıcı etkileşiminden sonra yükleyin ve etiket yöneticisi üzerinden tek noktadan yönetin. Çerez onayına bağlı yükleme hem KVKK uyumu hem de hız için faydalıdır.

İyileştirmeyi nasıl takip etmeli?

Laboratuvar testleri (Lighthouse) değişikliğin etkisini hemen gösterir; saha verisi (Search Console ve CrUX) ise gerçek kullanıcı deneyimini 28 günlük ortalamayla yansıtır. Bu yüzden iyileştirmeden sonra laboratuvar puanı hemen yükselse de Search Console'daki durumun güncellenmesi birkaç hafta sürebilir.