WordPress Resim Optimizasyonu: WebP, Sıkıştırma ve Lazy Load

WordPress görsellerle kendiliğinden ne yapar?

1. Doğru boyut: en büyük kazanç

Telefonla çekilmiş bir fotoğraf 4000 piksel genişliğinde ve birkaç megabayt olabilir. Sitenizin içerik alanı ise çoğunlukla 700–1200 piksel genişliktedir. WordPress’in 2560 piksel eşiği aşırı büyük dosyaları sınırlar ama yine de gerekenden büyük kalabilir.

1. 1

   İçerik alanınızın genişliğini öğrenin

   Tarayıcıda görsele sağ tıklayıp “İncele” ile gösterildiği genişliğe bakın. Yüksek çözünürlüklü ekranlar için bunun yaklaşık iki katı yeterlidir.

2. 2

   Yüklemeden önce küçültün

   Görseli bu genişliğe göre dışa aktarın; kırpmayı da yüklemeden önce yapın.

3. 3

   Kapak ve arka plan görsellerine özellikle dikkat edin

   Tam genişlikli alanlarda kullanılan görseller en büyük dosyalardır ve sıklıkla sayfanın LCP öğesidir.

2. Biçim: JPEG, PNG, WebP, AVIF

Mevcut medya kütüphanesini WebP veya AVIF’e dönüştürmek için dönüştürme eklentileri veya görseli sunucu/CDN düzeyinde dönüştüren hizmetler kullanılabilir. Bu araçların çoğu orijinal dosyayı saklar ve tarayıcı destekliyorsa modern biçimi sunar.

3. Sıkıştırma

Kayıplı sıkıştırma, gözün fark etmediği ayrıntıları atarak dosyayı küçültür; kayıpsız sıkıştırma görüntüyü bire bir korur ama daha az kazanç sağlar. Fotoğraflar için makul bir kayıplı sıkıştırma çoğu zaman gözle ayırt edilemez. Sıkıştırmayı yükleme sırasında otomatik yapan bir eklenti veya yüklemeden önce masaüstü/çevrimiçi bir araç kullanılabilir.

4. Tembel yükleme ve LCP görseli

Tembel yükleme, ekranın altındaki görsellerin ancak kullanıcı oraya yaklaştığında indirilmesidir; ilk yüklemeyi hafifletir. Ancak sayfanın ilk ekranındaki büyük görsel tembel yüklenirse tarayıcı onu geç ister ve Core Web Vitals metriklerinden LCP kötüleşir. WordPress 6.3’ten beri ilk büyük görseli bu kuraldan ayırmaya çalışır; ancak görsel tema tarafından arka plan olarak veya bir slider içinde ekleniyorsa bu mantık devreye girmeyebilir.

• İlk ekrandaki büyük görselin loading="lazy" taşımadığını tarayıcı geliştirici araçlarından kontrol edin.
• Optimizasyon eklentilerinin “tüm görselleri tembel yükle” ayarı ilk görseli de kapsıyor olabilir; ilk N görseli hariç tutma seçeneğini kullanın.
• Hero alanında slider kullanmak LCP’yi genellikle geciktirir; tek bir sabit görsel çoğu zaman daha hızlıdır.

5. Boyut bilgisi ve alt metin

Görselin genişlik ve yükseklik öznitelikleri tarayıcının görsel yüklenmeden önce yer ayırmasını sağlar; bu bilgi yoksa görsel geldiğinde içerik aşağı kayar. WordPress içerik görsellerine bu bilgiyi ekler; tema veya sayfa oluşturucu tarafından elle eklenen görsellerde eksik olabilir.

Alt metin, görseli göremeyen kullanıcılar ve arama motorları için görselin ne gösterdiğini anlatır. Anahtar kelime dizmek yerine görseli kısa ve doğru biçimde tarif edin; yalnızca süs amaçlı görsellerde alt metin boş bırakılabilir.

Uygulama sırası

Görseller hızlandırmanın bir parçasıdır; sunucu, önbellek ve JavaScript tarafıyla birlikte izlenecek sıra WordPress site hızlandırma rehberinde.