GoWith: alışveriş deneyimini ve çok kanallı operasyonu iyileştirirken storefront performansını düzeltmek

Talep

GoWith, çok çeşitli tarz ve zevke hitap eden çoraplar tasarlayıp üreten bir ABD markası. Mağaza ekibi ulaştığında ilk dertleri performanstı: storefront’un Core Web Vitals değerleri birkaç açıdan zayıftı ve sayfalar, özellikle ilk ziyarette, fark edilir biçimde geç yükleniyordu. Bunun ötesinde bir alışveriş deneyimi iyileştirme listeleri vardı ve aynı envanteri Amazon ile Etsy’de de sattıkları için operasyonel iş yükü oluşuyordu.

Rolüm

Mevcut mağazada, markanın SEO uzmanı ve mağaza yöneticisiyle birlikte Shopify geliştiricisi ve danışmanı olarak çalıştım. Projede tasarımcı yoktu; ekip ihtiyacını anlattı, kısa döngülerle gerçek sayfalar üzerinde ilerledik.

Performans çalışması

Performans sorunlarının nedenleri alışıldık olanlardı: yanlış sırada yüklenen varlıklar, görünür olsun olmasın hemen yüklenen görseller, gereğinden büyük Liquid ve JavaScript dosyaları ve sağladıkları işlevden daha fazla yük getiren uygulamalar. Yaptıklarım:

• Görsel yükleme. Ekranın altında kalan banner ve ürün görsellerinde lazy loading; ana içerik görselinin ikincil varlıklar yüzünden gecikmemesi için yükleme sırasının düzenlenmesi.
• JavaScript sıralaması. Render’ın yalnızca etkileşimden sonra önem kazanan kodla engellenmemesi için betiklerin yeniden sıralanması ve ertelenmesi.
• Liquid temizliği. Gecikmeye yol açan Liquid kodu, Shopify’ın belgelenmiş iyi uygulamalarına göre yeniden yazıldı; gereksiz döngüler ve aramalar kaldırıldı.
• Bölme ve küçültme. İyi uygulamalara uymayan Liquid ve JavaScript dosyaları daha küçük parçalara bölündü ve minify edildi.
• Uygulama yükü. Yotpo entegrasyonu güncel sürümüne taşındı; böylece yükleme süresine getirdiği ek yük azaldı.

Değişiklikler SEO uzmanının bulgularına göre yapıldı ve canlı mağazada doğrulandı. Yükleme süreleri hem ilk hem tekrar ziyaretlerde belirgin biçimde iyileşti.

Alışveriş deneyimi

• Filtreye duyarlı varyant görselleri. Koleksiyon sayfalarında renge göre filtrelendiğinde her ürün kartı varsayılan görsel yerine eşleşen renk varyantıyla gösteriliyor.
• Ürün özellik ikonları. Ürün sayfasında, ekibin ürün özelliklerini editörden yönetilen ikonlar olarak gösterebildiği bir yapı.
• Ana sayfa. Mağaza yöneticisinin isteklerine göre editör ayarlı section’lar ve mobil için yeniden ele alınan ana sayfa.
• Bundle ve upsell. Kendi sayfalarıyla entegre edilen bir bundle uygulaması; ürün sayfası, sepet, checkout ve teşekkür sayfasında upsell/cross-sell alanları.
• Yorumlar. Amazon ve Etsy’deki müşteri yorumlarının çekilip ana sayfada ve ürün sayfalarında gösterilmesi.
• Rakip incelemesi. Benzer mağazaların analizi, ekiple tartışılması ve işe yarar kalıpların uyarlanması.

Operasyon ve ölçümleme

• Çok kanallı envanter. Shopify, Amazon ve Etsy’de stoku ortak yöneten araçların entegrasyonu; üç kanal tutarlı miktarlarla çalışıyor.
• Özel olaylar. Google Analytics özel olayları için temada özel tetikleyiciler ve ekibin kullandığı diğer takip araçları için özel pikseller.
• Site içi SEO değişiklikleri, SEO uzmanının istekleri doğrultusunda.

Ekip için ne değişti

Daha hızlı bir storefront; müşteriye filtrelediği varyantı gösteren bir koleksiyon deneyimi; yerinde bundle ve upsell’ler; SEO ekibinin güvenebileceği ölçümleme; pazaryerleri ile mağaza arasında artık elle eşitlenmesi gerekmeyen bir envanter.