Hyvä mağazaları için ürün görseli stratejisi

Hyvä, Luma'nın taşıdığı JavaScript ve CSS yükünün büyük kısmını kaldırır. Bu yük ortadan kalktığında geriye görseller kalır.

Çoğu ürün ve kategori sayfasında ekrandaki en büyük öğe bir ürün fotoğrafıdır. Bu da görsel stratejinizi, Largest Contentful Paint (LCP) için hala kontrolünüzde olan en büyük kaldıraç haline getirir.

Bu yazıda Hyvä mağazalarında kullandığımız yaklaşımı anlatıyoruz: görselleri nasıl hazırladığımızı, nasıl sunduğumuzu ve hangi hataların bize zaman kaybettirdiğini.

Hyvä'ya geçişten sonra görseller neden daha önemli?

Sunucunuzdaki Hyvä ve Luma karşılaştırmamızda, temiz bir Hyvä sayfası yaklaşık 200 KB ağırlığındaydı ve yaklaşık 26 KB JavaScript yükledi.

Optimize edilmemiş tek bir ürün fotoğrafı, o sayfanın tamamından daha ağır olabilir.

Dolayısıyla Hyvä'da tek bir aşırı büyük hero görseli ya da tüm fotoğrafları aynı anda yükleyen bir galeri, temanın size kazandırdıklarının büyük kısmını geri alabilir.

İyi haber şu: Süreç doğru kurulduğunda görselleri ölçmek de düzeltmek de kolaydır.

Tutarlı kaynak görsellerle başlayın

Performans, yüklemeden önce başlar. Tutarlı kaynak görseller sonraki her adımı kolaylaştırır.

• Her görsel türü için tek bir en-boy oranı. Tüm ürün fotoğrafları aynı en-boy oranına sahipse ızgara hiç kaymaz ve Magento’nun yeniden boyutlandırdığı kopyaların hepsi tutarlı görünür.
• Nötr ve tutarlı bir arka plan. Bu, kategori sayfalarını sakin gösterir ve dosyaların daha iyi sıkıştırılmasını sağlar.
• Ürün başına sabit sayıda görsel. Hyvä demo mağazamızda ürün başına iki tutarlı stüdyo tarzı görsel kullanıyoruz; böylece her ürün kartı ve galeri aynı şekilde davranıyor.
• Makul bir kaynak boyutu. Yakınlaştırma için yeterince büyük yükleyin, ama birkaç megabaytlık kamera orijinallerini değil.

Tutarlılık aynı zamanda bir dönüşüm konusudur. Fotoğraflar aynı kurallara uyduğunda müşteriler ürünleri daha hızlı karşılaştırır.

JPG kaynakları koruyun, yeniden boyutlandırmayı Magento'ya bırakın

WebP dosyalarını doğrudan yüklemek cazip gelebilir. Biz denedik; standart bir kurulumda iyi çalışmıyor.

Magento’nun varsayılan GD görsel adaptörü, WebP kaynak dosyalarını “Unsupported image format” hatasıyla reddeder.

Bu yüzden medya galerisinde JPG kaynakları tutuyoruz. Magento da her görsel rolü için gereken yeniden boyutlandırılmış kopyaları oluşturuyor; örneğin liste küçük resmi ve ürün sayfası görseli.

Bir içe aktarma ya da tema değişikliğinden sonra, ziyaretçilerin tetiklemesini beklemek yerine yeniden boyutlandırma önbelleğini önceden oluşturuyoruz:

bin/magento catalog:images:resize

Bu komut büyük bir katalogda biraz zaman alabilir. Yoğun saatlerin dışında ve CDN önbelleğinizi temizlemeden önce çalıştırın.

Cron göreviyle WebP kopyaları ekleyin

Yeniden boyutlandırılmış JPG dosyaları oluştuktan sonra her birinin yanına bir WebP kopyası ekliyoruz.

Bir cron görevi cwebp -q 80 komutunu çalıştırır ve file.jpg.webp henüz WebP kopyası olmayan her yeniden boyutlandırılmış görselin yanında çalışır.

find pub/media/catalog/product/cache -name '*.jpg' \
  ! -exec test -e '{}.webp' \; \
  -exec cwebp -quiet -q 80 '{}' -o '{}.webp' \;

JPG dosyası diskte kalır; bir WebP kopyası eksik olsa bile hiçbir şey bozulmaz. Tüm modern tarayıcılar WebP'yi desteklediği için pratikte ziyaretçilerin neredeyse tamamı daha küçük dosyayı alır.

Ana sayfa kutucukları ve giriş sayfası gibi tema görsellerini doğrudan WebP olarak, 720 px genişlikte ve yaklaşık 72 kaliteyle dışa aktarıyoruz. Bunlar katalog görseli değil tasarım öğesi olduğu için Magento’nun yeniden boyutlandırma adımına ihtiyaç duymaz.

WebP adresini küçük bir eklentiyle sunun

WebP sunmanın klasik yolu, nginx’te Accept başlığına göre içerik eşleştirmedir. Cloudflare’in giriş seviyesi planının arkasında bu yöntem bizde çalışmadı, çünkü Cloudflare görsel önbelleğini Accept başlığına göre ayırmaz.

Bu yüzden kararı Magento'nun içine taşıdık. Şu sınıfa eklenen küçük bir eklenti Magento\Catalog\Model\View\Asset\Image diskte bir WebP kopyası varsa adresi değiştirir.

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

HTML artık doğrudan WebP dosyasını gösteriyor. CDN onu sıradan bir statik dosya gibi önbelleğe alıyor ve yanlış yapılandırılabilecek bir başlık (header) mantığı kalmıyor.

CDN ayrıntıları dahil tüm kurulumu şu yazıda anlatıyoruz: Cloudflare arkasındaki Magento 2 mağazasında ürün görsellerini WebP olarak sunmak.

Yükleme sırası: önce LCP görseli

Hafif bir dosya da tarayıcı onu geç isterse yavaş yüklenir. Yükleme sırası, dosya boyutu kadar önemlidir.

• Ana ürün görselini asla tembel yüklemeyin (lazy-load). Ürün sayfasında LCP öğesi genellikle galerinin ilk görselidir; bu yüzden hemen (eager) yüklenmelidir.
• İlk görsele fetchpriority="high" eklemeyi düşünün; böylece tarayıcı onu erkenden ister.
• Ekranın altında kalan her şeyi tembel yükleyin. Diğer galeri görselleri, benzer ürünler ve alt bilgi bannerları bekleyebilir.
• Kategori sayfasının ilk satırına farklı davranın. İlk birkaç ürün kartı hemen görünür; bu yüzden tembel yüklemeyi beklememelidir.
• Genişlik ve yüksekliği her zaman belirtin. Açık boyutlar, görseller yüklenirken sayfa düzeninin kaymasını önler.

Hyvä şablonları Alpine.js ile yazılmış sade PHTML dosyalarıdır; bu nedenle bu değişiklikler bir alt temada (child theme) küçük ve okunaklı kalır. Bu tür değişikliklerin nereye ait olduğunu görmek için doğru Hyvä alt teması oluşturma rehberimize göz atın.

Karşılaştığımız tuzaklar

Gördüğümüz görsel sorunlarının çoğu formatla ilgili değildi. Asıl mesele zamanlama ve önbellekti.

• Yeniden boyutlandırma önbelleği oluşmadan CDN'e alınan görseller. CDN eski yanıtı sunmaya devam etti. Tam bir yeniden boyutlandırmadan sonra CDN önbelleğini alan adı bazında temizliyoruz.
• CDN'in Accept başlığına dayalı WebP'yi yok sayması. WebP'yi bu yüzden adres üzerinden sunuyoruz.
• Fotoğraf makinesinden çıktığı boyutta yüklenen ana sayfa bannerları. Tek bir CMS bannerı sayfanın geri kalanından daha ağır olabilir; bu yüzden içerik ekibi için net dışa aktarma kuralları belirliyoruz.
• İlk ekranda çok fazla görsel. Birkaç büyük slayttan oluşan slider'lar, ziyaretçinin gördüğünden fazlasını yükler.

Pratik kontrol listesi

1. Ürün fotoğrafları için tek bir en-boy oranı ve arka plan stili belirleyin.
2. JPG kaynak dosyalarını makul bir boyutta yükleyin.
3. Şu komutları çalıştırın: catalog:images:resize komutunu içe aktarmalardan ve tema değişikliklerinden sonra çalıştırın.
4. WebP kopyalarını bir cron göreviyle oluşturun ve görsel adresi üzerinden sunun.
5. LCP görselini hemen yükleyin, gerisini tembel yükleyin.
6. Tam bir yeniden boyutlandırmadan sonra CDN önbelleğini temizleyin, ardından yeniden test edin.

Hyvä demo mağazamızda bu yaklaşım, mobil Lighthouse'ta ana sayfada 96, kategoride 90 ve üründe 92 puana (medyan ölçümler) ulaşmamızın bir parçası.

Görseller, ana sayfa, kategori ve ürün sayfalarında mobil Lighthouse Performance için en az 89 puanlık yayına alma hedefimizin de bir parçasıdır. Bu hedef, Hyvä için optimize edilmiş bir sunucu ile önceden kararlaştırılan görseller ve kodlar için geçerlidir.

SSS

WebP görselleri doğrudan Magento 2'ye yükleyebilir miyim?

Varsayılan GD adaptörüyle güvenilir şekilde mümkün değil; bu adaptör WebP kaynaklarını “Unsupported image format” hatasıyla reddeder. Biz kaynakları JPG olarak tutuyor, Magento yeniden boyutlandırdıktan sonra WebP kopyalarını oluşturuyoruz.

Tüm tarayıcılar WebP'yi destekliyorsa JPG dosyalarına hala ihtiyacım var mı?

Onları saklıyoruz, çünkü Magento görselleri JPG'den yeniden boyutlandırır ve JPG güvenli bir yedektir. Bir WebP kopyası eksikse JPG adresi otomatik olarak kullanılır.

Her ürün görseli tembel yüklenmeli mi?

Hayır. Ana ürün görseli ve kategori sayfasında ilk görünen kartlar hemen yüklenmelidir. Tembel yükleme, ekranın altında kalan görseller içindir.

Görsellerin baştan planlandığı bir Hyvä mağazası mı istiyorsunuz? Şuna göz atın: Hyvä tema geliştirme hizmetimiz, ya da mevcut mağazanız için bir analiz isteyin.