Telefonla çekilmiş bir fotoğraf 4-5 MB olabilir. Onu olduğu gibi siteye yükleyip sayfaya koyduğunda, ziyaretçi her açılışta o koca dosyayı indirmek zorunda kalır. Görseller çoğu WordPress sitesinde yavaşlığın bir numaralı sebebi. Bu yazıda görselleri yüklemeden önce nasıl küçülteceğini, eklentiyle nasıl otomatik sıkıştıracağını ve WebP biçimine nasıl geçeceğini anlatıyorum.
Büyük görseller siteyi neden yavaşlatır
Bir sayfanın toplam boyutunun büyük bölümü genelde görsellerdir. 3000 piksel genişliğinde bir fotoğrafı, ekranda 800 piksel gösterilen bir alana koyarsan, tarayıcı yine de tüm dosyayı indirir ve sonra küçültür. Yani boşa indirilen onlarca megabayt. Mobil bağlantıda bu, sayfanın geç açılması demek. Google’ın hız ölçümlerinde de en büyük görsel genelde LCP değerini belirler, yani kullanıcının sayfayı yüklenmiş saydığı anı geciktirir. Mobil cihazların çoğu masaüstünden daha yavaş bağlantıda çalışır, dolayısıyla ağır görsellerin bedelini en çok telefondan giren ziyaretçi öder. Birçok sitede ziyaretçilerin yarısından fazlası mobilden geldiği için, görsel boyutunu düşürmek doğrudan o kitlenin deneyimini iyileştirir. Yavaş açılan bir sayfada insanlar beklemeden çıkar, bu da hem satışı hem de arama performansını etkiler.
Görseli yüklemeden önce hazırlamak
En iyi sonuç kaynağı düzeltmekle gelir. Görseli siteye atmadan önce doğru ölçüye getir ve sıkıştır.
- Gerçek görüntüleme boyutunu bul. İçerik alanın 800 piksel genişse, görseli 1600 pikselden büyük yüklemene gerek yok (retina ekranlar için iki katı yeter).
- Fotoğrafı bir düzenleyicide ya da Squoosh gibi ücretsiz bir araçta yeniden boyutlandır ve kaliteyi yüzde 75-80 bandına çek. Gözle fark edilmez ama dosya üçte birine iner.
- Logo, ikon ve düz renkli grafikler için PNG yerine SVG düşün; vektör olduğu için her boyutta keskin kalır ve çok küçüktür.
WordPress zaten yüklediğin her görselin küçük kopyalarını (thumbnail, medium, large) üretir. Ayarlar bölümünden Medya sayfasında bu boyutları sitenin tasarımına göre düzenlersen, temanın doğru ölçüyü çağırması kolaylaşır.
Eklentiyle otomatik optimize ve WebP
Her görseli elle hazırlamak yorucu. Bir optimizasyon eklentisi bunu yükleme anında otomatik yapar. ShortPixel, Imagify ya da Smush yaygın seçenekler. Kurduktan sonra yeni yüklenen görseller otomatik sıkışır, mevcut kütüphaneni de toplu olarak işleyebilirsin.
WebP, JPEG ve PNG’ye göre aynı kalitede belirgin olarak daha küçük dosya üreten bir biçim. Bugün tüm güncel tarayıcılar destekler. Bu eklentiler görsellerinin WebP kopyasını oluşturur ve destekleyen tarayıcıya onu, desteklemeyene eski biçimi sunar; yani hiçbir ziyaretçi kırık görsel görmez. Eklentinin ayarlarından WebP üretimini açman ve bir kez toplu dönüşüm çalıştırman yeterli. Dönüşümden sonra görsellerin bozulmadığını birkaç sayfada gözle kontrol et. Eklenti orijinal dosyaları silmeden WebP kopya ürettiği için, sonuçtan memnun kalmazsan geri dönebilirsin; yine de ilk toplu dönüşümden önce medya klasörünün bir yedeğini almak iyi olur. WebP’nin bir adım ötesi AVIF biçimidir ve genelde daha da küçük dosya üretir, ancak tarayıcı desteği henüz WebP kadar geniş değil; bu yüzden çoğu site için WebP güvenli tercih olmayı sürdürüyor. Çok sayıda görseli olan bir mağazada toplu dönüşüm sunucuyu bir süre meşgul edebilir, bu işlemi sakin bir saatte başlatmak mantıklı. Hız tarafını bütün olarak ele almak istersen WordPress site hızlandırma hizmetine bakabilir, ayrıntıları WordPress hız ve performans rehberinde bulabilirsin.
Sık sorulan sorular
WebP görsellerin kalitesini bozar mı?
Doğru ayarla hayır. WebP’yi yüzde 75-80 kalitede ürettiğinde gözle fark edilen bir kayıp olmaz, buna karşılık dosya belirgin küçülür. Kaliteyi çok düşük verirsen bulanıklaşır, o yüzden abartma.
Eski görsellerimi de dönüştürmem gerekir mi?
Evet, en büyük kazancı orada alırsın. Optimizasyon eklentilerinin hepsinde mevcut medya kütüphanesini toplu işleme seçeneği var. Bir kez çalıştırman yeterli, sonrasını otomatik halleder.
Görsel optimizasyonunu ve sitenin genel hızını kendin kurcalamak istemiyorsan, site hızlandırma hizmetiyle ben baştan sona ayarlayabilirim. Sitenin mevcut durumu için ücretsiz ön analiz isteyebilirsin.
Bu konunun tüm rehberi: WordPress Hız ve Performans Rehberi