Görseller Core Web Vitals'ı Nasıl Etkiler - ve Nasıl Düzeltilir
LCP (Largest Contentful Paint) hatalarının çoğundan görseller sorumludur. Core Web Vitals değerleriniz kırmızıysa, sebep büyük ihtimalle görsellerinizdir. İşte tam olarak nasıl düzelteceğiniz.
Hemen deneyin - ücretsiz, kayıt yok.
Görselleri Akıllıca Sıkıştırın →Görseller ve LCP (Largest Contentful Paint)
LCP, görünen en büyük öğenin ne zaman yüklenmeyi bitirdiğini ölçer. Çoğu sayfada bu bir görseldir. Google, LCP'nin 2,5 saniyenin altında olmasını ister.
LCP nasıl düzeltilir:
- WebP/AVIF kullanın: %25-50 daha küçük dosyalar = daha hızlı indirme. Şimdi dönüştürün.
- Görselleri boyutlandırın: Alana uygun boyutu sunun. Buradan boyutlandırın.
- Hero görsellerini önceden yükleyin:
<link rel="preload" as="image" href="hero.webp"> - CDN kullanın: Görselleri kullanıcılara yakın uç sunuculardan sunun.
- fetchpriority ayarlayın: Ekranın üst kısmındaki görseller için
<img fetchpriority="high">.
Görseller ve CLS (Cumulative Layout Shift)
CLS, beklenmedik düzen kaymalarını ölçer. Boyutu belirtilmemiş görseller yüklendiğinde sayfanın zıplamasına neden olur.
CLS nasıl düzeltilir:
- width ve height'ı her zaman belirtin:
<img width="800" height="600"> - aspect-ratio CSS kullanın: modern bir alternatif olarak
aspect-ratio: 16/9; - Üst kısımda geç yüklemeden kaçının: Hero görselinize
loading="lazy"eklemeyin
Hızlı Düzeltme Listesi
- Tüm görselleri Akıllı Sıkıştırma ile sıkıştırın (otomatik en uygun kalite)
- Gerçek gösterim boyutlarına boyutlandırın
- Tüm
<img>etiketlerine width/height öznitelikleri ekleyin - LCP görselinizi önceden yükleyin
- Ekranın alt kısmındaki her şeyi geç yükleyin
- PageSpeed Insights ile yeniden test edin
SSS
İyi bir LCP puanı nedir?
2,5 saniyenin altı "İyi" (yeşil). 2,5-4 saniye "İyileştirilmeli" (sarı). 4 saniyenin üstü "Zayıf" (kırmızı). Tek başına görsel optimizasyonu çoğu zaman sizi kırmızıdan yeşile taşıyabilir.
Tüm görselleri geç yüklemeli miyim?
Hayır! Ekranın üst kısmındaki görselleri (özellikle hero/LCP görselinizi) geç yüklemeyin. Yalnızca başlangıçta ekran dışında kalan görselleri geç yükleyin. Aşırı geç yükleme LCP'ye aslında zarar verir.
Hazır mısınız? %100 ücretsiz, tarayıcınızda çalışır.
Görselleri Akıllıca Sıkıştırın →