WordPress sitelerde yavaşlığın en büyük sebeplerinden biri “ağır görsellerdir”. Doğru format, doğru boyut ve doğru yükleme stratejisiyle hem PageSpeed hem de kullanıcı deneyimi ciddi şekilde iyileşir. PageSpeed Insights da, görsellerin boyut/encoding optimizasyonlarının sayfa hızına doğrudan etki ettiğini vurgular.
Ayrıca Core Web Vitals tarafında:
- LCP (yüklenme performansı) için hedef ~2.5 saniye,
- INP (etkileşim gecikmesi) için hedef <200 ms.
1) Doğru format: JPEG/PNG yerine WebP (ve mümkünse AVIF)
Modern formatlar aynı kaliteyi daha küçük dosya boyutuyla sunabildiği için yükleme süresini düşürür; bu da LCP’ye iyi gelir.
- WordPress’te WebP: WordPress 5.8 itibarıyla WebP yükleme ve kullanma desteği vardır (hosting destekliyse).
- Google’ın desteklediği formatlar: Google Search, görsellerde WebP ve AVIF gibi modern formatları destekler.
Pratik öneri
- Fotoğraf: WebP (gerekirse JPEG)
- Logo/ikon: SVG (uygunsa) veya WebP/PNG
- Ekran görüntüsü: WebP (bazı durumlarda PNG)
2) “Doğru boyutlandırma” kuralı: Büyük görseli küçük alanda göstermeyin
“3000px genişliğinde görseli 700px alanda göstermek” PageSpeed’te “Properly size images / Optimize images” uyarılarını doğurur.
WordPress’te işin püf noktası:
- Görseli Medya Kütüphanesi’ne yükleyince WordPress farklı boyutlar üretir.
- İçeriğe görsel eklerken çoğu zaman “Tam boy (Full)” yerine Büyük/Orta gibi uygun boyutu seçmek daha doğru olur.
3) Responsive Images (srcset/sizes): WordPress zaten otomatik destekler
WordPress, 4.4’ten beri görseller için otomatik olarak srcset ve sizes üretip tarayıcının cihaz boyutuna göre en uygun görseli seçmesini sağlar.srcset mantığı (tarayıcının seçenekler arasından seçmesi) HTML seviyesinde de MDN’de anlatılır.
Ne yapman yeterli?
- Görseli WordPress’in standart “Görsel” bloğuyla ekle.
- Temada “hardcoded” sabit genişlik/yükseklik veya görseli sürekli “Full size” basan yapı varsa düzelt.
4) Lazy Load: Aşağıdaki görsellere evet, LCP görseline hayır
Tarayıcı seviyesinde lazy load, ekranın altında kalan görselleri daha sonra yükleyerek hız kazandırır.
Ama web.dev net bir şekilde uyarıyor: LCP olan (sayfanın en büyük/ana görseli) görseli lazy-load yapmayın, LCP’yi kötüleştirir.
WordPress pratik kuralı
- Yazı içindeki “aşağı kaydırınca görülen” görseller: lazy load ✅
- Hero/kapak/ilk ekranda görünen ana görsel (çoğu zaman LCP): lazy load ❌
5) CLS düşürmek için: width/height (boyut) bilgisi şart
Görsel yüklenmeden önce sayfada yer ayrılmazsa içerik kayar ve CLS artar. En güvenli çözüm:
- Görselin en-boy oranını koruyacak şekilde tema/WordPress’in boyut bilgilerini doğru üretmesi (çoğu modern tema bunu yapar).
- Görseli CSS ile “sonradan zorlama” şekilde esnetmemek.
6) SEO tarafı: Dosya adı + alt metin (ALT) ihmal edilmesin
Google’ın Image SEO rehberinde; desteklenen formatların yanında görsellerin doğru şekilde işaretlenmesi ve Google Images için iyi uygulamalar anlatılır (ALT metin, doğru yerleşim, vb.).
Kısa pratik
- Dosya adı:
rank-math-sitemap-ayarlari.webpgibi açıklayıcı - ALT: görseli gerçekten tarif eden kısa açıklama
7) WordPress için 10 dakikalık uygulama checklist’i
- Mevcut görselleri tarayın (PageSpeed “Optimize images / Properly size images”).
- Yeni yüklemelerde WebP kullanın (WP 5.8+).
- İçerikte “Full size” yerine uygun boyutu seçin.
- İlk ekrandaki ana görseli lazy-load yapmayın (LCP).
- Aşağıdaki görsellerde lazy load’u koruyun.
- Tema/eklenti görselleri
srcset/sizesüretiyor mu kontrol edin (WordPress core destekler). - Her görsele ALT ekleyin (özellikle bilgi veren ekran görüntüleri).
- Değişiklik sonrası Cache’i temizleyin (LiteSpeed/Cloudflare).
- Core Web Vitals hedeflerine göre tekrar ölçün (LCP/INP).
- En kritik 5 sayfayı (anasayfa + en çok okunanlar) önceliklendirin.