Ürün görselleri performans için nasıl optimize edilir
Bir ürün sayfasında veya kategori sayfasında görseller genellikle sayfanın toplam ağırlığının büyük bölümünü oluşturur. Aynı zamanda koda veya barındırmaya dokunmadan devreye alınabilecek en basit performans kaldıracıdır.
Sırasıyla devreye alınması gereken kaldıraçlar
-
Gerçekten görüntülenen boyuta yeniden boyutlandırın
300 piksellik bir küçük resimde gösterilen, genişliği birkaç bin piksel olan bir görsel, hiçbir görsel fayda sağlamadan bant genişliği israf eder. Üretilen boyutlar, temanın gerçekte kullandığı boyutlarla eşleşmelidir.
-
Modern, sıkıştırılmış bir formata dönüştürün
WebP ve giderek daha fazla AVIF, eşdeğer görsel kalitede JPEG veya PNG'ye göre belirgin şekilde daha düşük ağırlık sunar. Çoğu güncel CMS ve barındırma hizmeti bu formatları otomatik olarak üretebilir veya dönüştürebilir.
-
Ekran dışındaki görsellerin yüklenmesini erteleyin
HTML loading="lazy" özniteliği, tarayıcıya bir görseli yalnızca görünür alana yaklaştığında yüklemesini söyler; bu da çok sayıda ürün içeren bir sayfanın ilk görüntülenmesini hızlandırır.
-
Yüklemede görünür olan ana görseli ertelemeyin
Hemen görünen en büyük görsel (genellikle ana ürün görseli) ertelenmemelidir, çünkü Google'ın Core Web Vitals göstergelerinden biri olan LCP ölçümünü belirleyen tam olarak budur.
-
Trafiğe göre görselleri bir CDN üzerinden sunun
Bir CDN, görsel sunumunu ziyaretçiye coğrafi olarak yakın bir noktadan dağıtır; bu da yalnızca sıkıştırmanın sağlayabileceğinin ötesinde aktarım süresini azaltır.
Görsellerin algılanan performansı neden bu kadar etkilediği
Onlarca ürün gösteren bir kategori sayfasında, optimize edilmemiş her küçük resim diğerlerine eklenir: her görselde birkaç on kilobaytlık bir tasarruf, görünen ürün sayısıyla çarpıldığında, tek bir CSS veya JavaScript dosyasında yapılacak eşdeğer bir optimizasyondan çok daha fazla, ziyaretçinin algıladığı yükleme süresini doğrudan değiştirir.
Arama motoru optimizasyonuyla bağlantı doğrudandır: Google'ın kullandığı üç Core Web Vitals göstergesinden biri olan LCP, tam olarak sayfanın en büyük görünür öğesinin görüntülenme süresini ölçer; bu öğe çoğunlukla bir ürün sayfasındaki ürün görseli veya ana sayfadaki bir banner'dır. Görselleri optimize etmek, hem ziyaretçi deneyimini hem de Google tarafından açıkça dikkate alınan bir kriteri iyileştirir.
Sık yapılan hatalar
- Herhangi bir ön yeniden boyutlandırma yapmadan doğrudan bir fotoğraf makinesinden veya akıllı telefondan gelen, genellikle birkaç megabaytlık fotoğrafları yüklemek.
- Hemen görünen ana görselin yüklenmesini ertelemek; bu, LCP'yi iyileştirmek yerine tam tersine kötüleştirir.
- Bu formatları desteklemeyen eski tarayıcılar için bir yedek sürüm öngörmeden modern formatlara dönüştürmek.
- Algılanan kaliteyi belirgin şekilde bozacak kadar aşırı sıkıştırmak; bu, bir ürün sayfasında ziyaretçinin güvenine zarar verebilir.
Sıkça sorulan sorular
Görselleri manuel olarak mı optimize etmek gerekir, yoksa otomatik araçlar var mı?
Görsel optimizasyonu yavaş bir mağazayı çözmeye yeter mi?
WebP formatı tüm tarayıcılarla uyumlu mu?
İhtiyacınızı bir dakikada anlatın
Size bir anket daha değil, doğrudan bir tahmin sunabilmem için birkaç hedefli soru.