Core Web Vitals Rehberi — LCP, CLS, INP
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) ve INP (Interaction to Next Paint). Bu metrikler hem SEO hem de kullanıcı memnuniyeti için önemlidir. Görseller bu metriklerin üçünde de kritik rol oynar.
LCP (Largest Contentful Paint) Nedir?
LCP, sayfadaki en büyük görünür içeriğin (genelde hero görsel veya başlık bloğu) render edilme süresidir. 2,5 saniye altı "iyi" kabul edilir. LCP genelde bir görsel olduğu için görsel optimizasyonu doğrudan LCP'yi iyileştirir. Büyük hero görselleri sıkıştırmak, WebP kullanmak ve gerekirse preload eklemek LCP'yi düşürür. PageSpeed LCP görsel sayfamızda pratik adımlar var.
CLS (Cumulative Layout Shift) ve Görseller
CLS, sayfa yüklenirken içeriğin ne kadar "zıpladığını" ölçer. Görsellere width ve height vermezseniz tarayıcı yer ayıramaz; görsel yüklendiğinde sayfa kayar. Her <img> etiketine width/height ekleyin veya CSS'te aspect-ratio kullanın. CLS 0,1 altında olmalıdır.
INP (Interaction to Next Paint)
INP, kullanıcı etkileşiminden (tıklama, dokunma, klavye) sonra sayfanın ne kadar hızlı yanıt verdiğini ölçer. Ağır görsel işleme veya büyük görsel decode işlemleri ana iş parçacığını bloke edebilir. Sıkıştırılmış ve uygun boyuttaki görseller decode süresini kısaltır.
Görsel Optimizasyon Stratejileri
LCP görselini küçültün ve WebP/AVIF kullanın. Tüm görsellere width/height ekleyin. Below-the-fold görsellere lazy loading uygulayın (LCP görseline lazy load yapmayın). Responsive görseller için srcset ile uygun boyutta kaynak sunun. Görsel boyutu ve SEO rehberimiz bu konuda detaylı bilgi içerir.
Ölçüm ve İzleme
Google Search Console, PageSpeed Insights ve Chrome DevTools ile Core Web Vitals değerlerinizi ölçebilirsiniz. Real User Monitoring (RUM) ile gerçek kullanıcı verilerini toplamak daha doğru sonuç verir. Optimizasyondan sonra metrikleri tekrar kontrol edin.
Görsel optimizasyonu Core Web Vitals skorlarınızı belirgin şekilde iyileştirir. Sıkıştırma aracımızla hemen başlayın.
Görsellerinizi hemen optimize edin.
Sıkıştırma Aracına Git →