Cloudflare arkasındaki Magento 2 mağazasında WebP ürün görselleri sunmak

Ürün görselleri genellikle bir Magento 2 sayfasının en ağır kısmıdır ve çoğu zaman ekrandaki en büyük öğedir. Bunları JPG yerine WebP olarak sunmak, sayfaları hafifletmenin en kolay yollarından biridir.

Tek satırlık bir değişiklik gibi görünüyor. Hyvä demo mağazamızda ise üç denememizi aldı. Bu yazıda neyin işe yaramadığını, şu an ne kullandığımızı ve her şeyi bir arada tutan küçük Magento eklentisini anlatıyoruz. Bu, hız çalışmalarımızın bir parçası; aynı yöntemi her Hyvä mağazasında, hatta Luma'da da kullanabilirsiniz.

1. deneme: WebP dosyaları yüklemek

Akla ilk gelen, ürün görsellerini en baştan WebP olarak yüklemektir. Ancak çoğu sunucuda varsayılan olan Magento GD görsel adaptörü, WebP kaynak dosyalarını “Unsupported image format” hatasıyla reddeder.

Bu yüzden kaynak format olarak JPG'de kaldık. Bunun bir yan faydası da var: Orijinal dosyalar her aracın anladığı bir formatta kalır ve WebP kalitesini daha sonra kataloğa dokunmadan değiştirebilirsiniz.

Magento ürün görsellerini nasıl yeniden boyutlandırır?

Magento, yüklenen orijinal dosyayı hiçbir zaman tarayıcıya göndermez. Bunun yerine temanın şu dosyasında tanımlanan her görsel rolü için yeniden boyutlandırılmış kopyalar oluşturur: view.xml; örneğin kategori listesi, ürün galerisi ve küçük resimler için.

Bu kopyaların bulunduğu klasör: pub/media/catalog/product/cache. Magento bunları ihtiyaç anında ya da şu komutla toplu olarak oluşturur:

bin/magento catalog:images:resize

Toplu yeniden boyutlandırmayı içe aktarmalardan ve tema değişikliklerinden sonra çalıştırıyoruz; böylece müşteriler bir görselin oluşturulmasını hiç beklemiyor. WebP'ye dönüştürdüğümüz dosyalar da bu yeniden boyutlandırılmış dosyalar.

2. deneme: Accept başlığıyla içerik eşleştirme

Klasik sunucu tarafı yaklaşım, tarayıcının gönderdiği Accept başlığına bakmaktır. WebP destekleyen tarayıcılar bunu bu başlıkta belirtir ve nginx file.jpg.webp komutunu file.jpg aynı URL üzerinden sunabilir.

Tek bir sunucuda çalışır. Ancak Cloudflare’in ücretsiz planının arkasında bizde çalışmadı, çünkü Cloudflare görsel önbelleğini Accept başlığına göre ayırmaz.

Cloudflare'in o URL için hangi sürümü önbelleğe alacağına ilk ziyaretçi karar verir. Ondan sonra gelen herkes, tarayıcısı neyi desteklerse desteklesin aynı dosyayı alır. İki farklı dosya sunan tek bir URL, kafa karıştırıcı hatalara davetiye çıkarır; bu yüzden bu fikirden vazgeçtik.

Şu an kullandığımız yöntem

Çalışan kurulumda WebP dosyasının kendi URL'si var. Böylece önbellekleme çok basitleşir; çünkü her URL her zaman aynı dosyayı döndürür.

1. Ürün görselleri JPG olarak yüklenir.
2. Magento bunları görsel önbellek klasöründe yeniden boyutlandırır.
3. Bir cron görevi cwebp -q 80 komutunu çalıştırır ve file.jpg.webp dosyasını, henüz WebP kopyası olmayan her yeniden boyutlandırılmış görselin yanına yazar.
4. Bir eklenti (plugin), diskte ilgili dosya varsa görsel URL'sini .webp sürümüne çevirir.

Dönüştürme adımı kısa bir shell döngüsüdür:

find pub/media/catalog/product/cache -type f -name '*.jpg' | while read -r f; do
    [ -f "$f.webp" ] || cwebp -quiet -q 80 "$f" -o "$f.webp"
done

80 kalite ayarı, ürün fotoğraflarında gözle fark edemediğimiz bir kayıpla belirgin şekilde daha küçük dosyalar verdi. Kendi görsellerinizden birkaçını test edin; çünkü en iyi değer fotoğraflarınıza bağlıdır.

Magento eklentisi

Magento ürün görseli URL'lerini şu sınıfta oluşturur: Magento\Catalog\Model\View\Asset\Image. Bu sınıfa eklenen bir afterGetUrl eklentisi, tek bir şablonu bile değiştirmeden URL'yi değiştirebilir.

Eklenti, modülün şu dosyasında tanımlanır: etc/frontend/di.xml:

<type name="Magento\Catalog\Model\View\Asset\Image">
    <plugin name="vendor_webp_image_url"
            type="Vendor\Webp\Plugin\ImageUrlPlugin"/>
</type>

Eklentinin kendisi yalnızca WebP kopyasının var olup olmadığını kontrol eder:

public function afterGetUrl(Image $subject, string $result): string
{
    if (is_file($subject->getPath() . '.webp')) {
        return $result . '.webp';
    }
    return $result;
}

Cron bir görseli henüz dönüştürmediyse, eklenti normal JPG URL'sini döndürür. Hiçbir şey bozulmaz; dönüştürmeden sonraki ilk sayfa görüntülemesinde WebP dosyası sunulur.

Tüm modern tarayıcılar WebP'yi destekliyor; bu yüzden WebP'yi herkese sunuyor ve eski picture öğesi yedeklerini kullanmıyoruz. Böylece HTML yapısı sade kalıyor.

Hazır bir modül tercih ederseniz, Magento için birkaç WebP eklentisi mevcut. Bunlara güvenmeden önce CDN'iniz arkasında nasıl davrandıklarını kontrol edin ve Hyvä şablonlarıyla çalıştıklarından emin olun. Eklenti geliştirme ekibimiz bunu sizin için inceleyebilir ya da geliştirebilir.

Tema görselleri ve CDN

Ürün görselleri işin yalnızca bir kısmı. Demo mağazamızda ana sayfa kutuları ve giriş sayfası görselleri gibi tema görselleri de 720 piksel genişliğinde, yaklaşık 72 kalite ayarıyla WebP formatında.

CDN bir sürpriz daha çıkardı. Cloudflare, bazı görsel URL'lerini yeniden boyutlandırma önbelleği oluşmadan önce önbelleğe almıştı ve dosyalar oluşturulduktan sonra da yanlış yanıtı sunmaya devam etti.

Çözüm, toplu yeniden boyutlandırma ya da dönüştürmeden sonra medya alan adı için CDN önbelleğini temizlemektir. Artık bunu her görsel işleminden sonra sabit bir adım olarak yapıyoruz.

Tuzaklar tek listede

• WebP yüklemeleri Magento’nun GD adaptörü tarafından reddedilir; bu yüzden kaynakları JPG olarak tutun.
• Accept başlığıyla içerik eşleştirme CDN önbelleği tarafından yok sayıldı; bu yüzden WebP'ye kendi URL'sini verin.
• Yeniden boyutlandırmadan önce CDN tarafından önbelleğe alınan görseller için önbellek temizliği gerekir.
• Sunucunuz headless tarayıcıları engelliyorsa laboratuvar testleri sahte sonuçlar verebilir. Ayrıntılar: Lighthouse test yazımız.
• Disk kullanımı biraz artar; çünkü her yeniden boyutlandırılmış görselin artık bir WebP ikizi vardır.

SSS

Neden AVIF formatına dönüştürmüyorsunuz?

AVIF daha da küçük olabilir; ancak dönüştürme daha yavaştır ve sunuculardaki araç desteği daha az tutarlıdır. WebP bize basit ve güvenilir bir süreçle büyük kazanç sağladı, bu yüzden oradan başladık.

Bu yöntem Luma mağazalarında da çalışır mı?

Evet. Eklenti temada değil, Magento'nun görsel sınıfında çalışır; bu yüzden hem Luma hem Hyvä mağazaları bundan yararlanır. Hyvä'da sayfadaki diğer yük daha az olduğu için görsel kazancı daha belirgin görünür.

Bir ürün görseli değiştirildiğinde ne olur?

Magento yeni yollarla yeni yeniden boyutlandırılmış dosyalar oluşturur ve cron bunları bir sonraki çalışmasında dönüştürür. O zamana kadar eklenti JPG'yi sunar; böylece müşteriler her zaman doğru görseli görür.

Kataloğunuzu yeniden oluşturmadan daha hafif ürün sayfaları mı istiyorsunuz? Yaklaşımımızı görmek için: Magento 2 hız optimizasyonu, ya da bizimle bir Hyvä projesi başlatın.