Shopify vitrinini platformla kavga etmeden hızlandırmak

Vowly Store ve Paperly dâhil birkaç ticaret vitrinini Shopify üzerinde işletiyoruz. Platform, insanların sandığı darboğaz değil. Bakmamız istenen neredeyse her yavaş vitrini yavaşlatan şey temel değil, sonradan eklenenlerdi.

Her şeyden önce üçüncü tarafları sayın

Bir şablona dokunmadan önce ağ panelini açın ve bir ürün sayfasının kaç farklı sunucuya bağlandığını sayın. İki yıldır çalışan tipik bir mağaza bir düzine tanesiyle konuşuyor olacaktır: analitik, yorum bileşeni, sohbet balonu, para birimi çevirici, ek satış uygulaması ve ilkini kimse kaldırmadığı için iki etiket yöneticisi.

Bunların her biri bir sebeple eklendi ve sebeplerin çoğu makuldü. Ama kimse toplam maliyeti ölçmedi; çünkü her ekleme yapıldığı gün küçük görünüyordu. Bu denetim teknik değil ticari bir egzersizdir. Her betik için ne kazandırdığını ve ana iş parçacığında ne kadar süreye mal olduğunu sorun. Birkaçı bu testten açıkça kalacaktır.

En büyük kazanç hâlâ görsellerde

Poster ve kırtasiye satan bir mağazada görseller ürünün kendisidir ve sayfa ağırlığına hükmederler. Çözümler iyi bilinir ve hâlâ rutin olarak atlanır:

• Modern formatlar sunun — CDN istendiğinde bunu yapar ve aynı görsel kalitede JPEG'e göre tasarruf ciddidir.
• Kaynağı render edilen kutuya göre boyutlandırın, düzgün bir srcset ile. 400px'lik yuvaya 2000px görsel göndermek ürün ızgarasındaki en yaygın tek israftır.
• Her görsele açık boyut verin ki yüklenirken mizanpaj kaymasın. Mizanpaj kayması hem bir sıralama sinyali hem de gerçek bir rahatsızlıktır.
• Yalnızca katlanma çizgisinin üstündekini öncelikli yükleyin, gerisini tembel yükleyin — ama hangisinin hangisi olduğuna bilinçli karar verin, hero görselini kazara tembel yüklemeyin.

Fontlar hak ettiklerinden az şüpheyle karşılanıyor

İki aileden üç ağırlık, üçüncü taraf bir sunucudan yüklendiğinde çoğu kişinin beklediğinden pahalıya mal olur: fazladan bir bağlantı, bir render gecikmesi ve takas gerçekleştiğinde görünür bir yeniden akış.

Dosyaları kendiniz barındırın, yalnızca kullanılan karakterlere alt kümeleyin, katlanma çizgisinin üstünde görünen tek ağırlığı önceden yükleyin ve font yüklenirken metnin okunabilir kalması için makul bir görüntüleme stratejisi kurun. Birkaç Avrupa pazarına satan bir mağazada alt kümelemenin o pazarların ihtiyaç duyduğu aksanlı karakterleri içermesi gerektiğini unutmayın — umlautları düşüren bir alt küme testte iyi görünür, Almanya'da bozuk.

Vitrini ödeme akışıyla karıştırmayın

Shopify mağazası olan herkese verilecek işe yarar bir sınır: vitrin sizin optimize edeceğiniz yer, ödeme akışı değil ve bu sorun değil. Ödeme, dolandırıcılık kontrolü ve vergi hesabı tam olarak küçük bir ekibin yeniden yazmaması gereken şeylerdir.

Ticari olarak önemli olan performans işi ödeme akışından önce olur — koleksiyon sayfasında, ürün sayfasında ve sepette; yani ziyaretçinin devam edip etmeyeceğine karar verdiği yerlerde. Siparişe özel üretim yapan bir mağaza burada ekstra yük taşır, çünkü kişiselleştirme arayüzleri kendi betiklerini ve önizlemelerini getirir.

Müşterinin yaşadığını ölçün

Laboratuvar skorları regresyon bulmak için yararlı, hedef olarak yanıltıcıdır. Laboratuvar koşusunda müşterinin eski telefonu, şebekesi ya da ikinci ziyarette çıkan çerez bandı yoktur. Gerçek oturumlardan gelen saha verisi — cihaz sınıfına ve pazara göre bölünmüş — sorunun gerçekte nerede olduğunu söyler ve sorun sıklıkla her yerde değil tek bir ülkedeki mobil kullanıcılardadır.