Mobil e-ticareti geliştirin: Web sitenizi daha hızlı hale getirin

Çeşitli istatistikler, yükleme süresinin her saniyesinin bir e-ticaret mağazasının dönüşüm oranında yarattığı farkı not eder. Bir mağazanın dönüşüm oranını etkileyebilecek birçok başka faktör olduğundan, bu istatistiklerin birçoğu hakkında kişisel olarak biraz şüpheliyim. Bununla birlikte, mobil e-ticaretin hakimiyeti ve neredeyse tüm perakende web sitelerinde masaüstü tarama üzerinden gezinme ile birlikte, hız bir kullanıcının deneyimini doğrudan etkileyeceğinden, bir e-ticaret mağazasının pratik olarak olabildiğince hızlı olması önemlidir.

Web sitenizin ön ucunu optimize etmenin sayısız yolu vardır; bazıları karmaşık ve pahalı, bazıları oldukça basit. Genellikle erken dönemde hızlı ve kolay büyük kazançlar elde edebileceğinizi göreceksiniz, ancak sonunda azalan getiriler ve daha küçük kademeli iyileştirmeler elde etmeye başlayacaksınız.

Ne kadar ileri gittiğiniz, çevrimiçi gelirinizin boyutuna ve mobil e-ticaretten elde edeceğiniz daha küçük iyileştirmelerden ne kadar ek gelir elde edebileceğinize bağlıdır.

Dönüşüm oranını %0,1 artırmak, büyük bir perakendeci için daha küçük bir perakendeciye göre çok daha büyük bir yatırım getirisi sağlayacaktır.

Birinci sınıf bir mobil e-ticaret deneyimi için görüntüleri optimize edin

Görüntü optimizasyonu, sayfa yükleme süresinde büyük bir azalmanın hızlı ve kolay bir şekilde sağlanabileceği bir alandır. Görüntü kalitesi ve boyutu söz konusu olduğunda genellikle grafik tasarımcılar, satıcılar ve e-ticaret yöneticileri arasında bir çatışma görüyorum. Bir grafik tasarımcı mümkün olan en büyük ve en yüksek çözünürlüklü görüntüyü ister ve yarattıkları görüntünün hız etkilerini her zaman dikkate almaz. Bir satıcı muhtemelen en büyük ve en yüksek çözünürlüklü ürün resimlerini isterken, e-ticaret yöneticisi genel sayfa hızının görünürlüğüne ve takdirine sahip tek kişi olabilir.

Görüntü optimizasyonu her zaman kalite ve dosya boyutu arasında bir dengedir. Görüntünün kalitesi ne kadar yüksek olursa, dosya boyutu da o kadar yüksek olur. Resmin yerel boyutu ve karmaşıklığı da dosya boyutunu etkiler. Ayrıntılı ve karmaşık bir arka plana sahip bir görüntünün, düz bir arka plana sahip olandan çok daha büyük bir dosya boyutuna sahip olması muhtemeldir.

Tasarımcılar genellikle bir web sitesi için çok sayıda renk ve yalnızca düz bir renk olmayan bir arka plan kullanarak yüksek etkili afişler oluşturmayı severler. Bunun yüksek bir görsel etkisi olabilir, ancak bunun sonucu, düz bir arka plana sahip benzer bir banner'dan çok daha yüksek bir dosya boyutu olacaktır. Apple'ın Retina Ekranı gibi yüksek çözünürlüklü ekranların piyasaya sürülmesi, ekranlar düşük kaliteli görüntülerdeki kusurları vurgularken dengeyi korumayı daha da zorlaştırıyor.

Tüm ekip üyelerinin ön uç optimizasyonunu ve herhangi bir grafik kararın görüntülerin boyutu ve dolayısıyla sayfa hızı üzerindeki etkisini takdir etmesi önemlidir.

Photoshop gibi standart tasarım araçları, tasarımcıların görüntüleri optimize etmesine olanak tanırken, web sitenizdeki görüntüleri otomatik olarak optimize edebilen bir dizi 3. taraf hizmeti mevcuttur. Hem Akamai hem de Ampliance, bir dizi yapılandırılmış kurala göre görüntülerinizi optimize eden görüntü yönetimi hizmetleri sunar. Dosya boyutlarının mümkün olduğunca küçük olmasını sağlamak için tarayıcıları desteklemek için jpeg dosyalarını WebP görüntülerine bile dönüştürebilirler.

Envoy'da, yakın zamanda bir müşterinin web sitesinde Akamai görüntü yöneticisini denedik ve görsel kalitede gözle görülür bir düşüş olmadan PLP görüntülerinin dosya boyutunda ortalama %80'lik bir azalma gördük. Bu, PLP (ürün listeleme sayfası) sayfalarının toplam ağırlığında büyük bir düşüşe ve Google Pagespeed puanlarında hemen büyük bir sıçramaya neden oldu. Bunun için 3. parti bir hizmet kullanmak istemiyorsanız, web sunucularınıza yerel olarak yüklediğiniz bir hizmet olan Thumbor gibi açık kaynaklı bir araç uygulayabilirsiniz. Bunun gibi araçlar, görüntülerinizi anında otomatik olarak optimize eder ve ardından bunları bir havuzda önbelleğe alır.

CDN kullanın

İçerik dağıtım ağları (CDN'ler), içeriğinizi genellikle uç olarak bilinen bir sunucu ağında önbelleğe alan hizmetlerdir. Bu sunucular, içeriğinizin, kaynak sunucularınızdan fiziksel olarak kullanıcılara daha yakın bir konumda önbelleğe alınmasını sağlamak için, normalde küresel olarak birçok konumda barındırılır. CDN'ler genellikle görüntüleri, css, JavaScript ve videoları önbelleğe almak için kullanılsa da, bunları tam HTML sayfalarını önbelleğe almak için de kullanabilirsiniz.

Tam HTML sayfalarını önbelleğe alarak, sayfaların kullanıcılarınıza teslimini önemli ölçüde hızlandırabilirsiniz. HTML önbelleğe alındığından, kaynak web uygulamanızın sayfayı oluşturması ve her istendiğinde kullanıcıya geri göndermesi gerekmez ve CDN'lerin önbellek sunucusu (varlık noktası) kullanıcıya fiziksel olarak kaynağınızdan daha yakın olacaktır. sunucular. CDN'ler ayrıca içeriğin kullanıcılara dağıtımını hızlandıran ve sıkıştıran teknolojiye sahiptir ve bunların tümü çok daha hızlı bir deneyim sağlar.

CDN'ler ayrıca kaynak sunucularınızdaki yükü önemli ölçüde azaltabilir. Bir PLP sayfası, web uygulamanızın anında oluşturması için genellikle işlemciye aç bir sayfadır. Hepsi çok fazla işleme ekleyen çok sayıda ürün ve yön içerebilir. Çoğu durumda, bir PLP sayfası bir saatten diğerine değişmeyecektir, bu nedenle o sayfayı bir saatliğine önbelleğe almak tamamen uygundur. Potansiyel olarak o sayfayı bir saat içinde binlerce kez oluşturmak zorunda kalmak yerine, kaynak sunucunuz bunu bir kez yapmak zorunda kalacaktır. Gerçekte, pek çok CDN'nin birden fazla bağımsız önbelleğe sahip olacağı gibi pek çalışmaz, ancak yine de yaklaşık %60'lık bir boşaltma bekleyebilirsiniz. Bu, kaynak sunucularınızın ve uygulamanızın CDN'nin yerinde olmadığı duruma göre %60 daha az istek alacağı anlamına gelir.

Mobil e-ticaret deneyimini optimize etmek için hız analiz araçlarını kullanın

Bir web sayfasını analiz edebilen ve web sitenizi nasıl daha hızlı hale getirebileceğiniz konusunda önerilerde bulunabilen bir dizi ücretsiz ve ücretli çevrimiçi araç vardır. Muhtemelen en çok kullanılan üç ücretsiz araç Google PageSpeed ​​Insights, Yslow ve Webpagetest'tir. Bu araçların her biri biraz farklıdır, ancak tümü URL'nizi analiz eder ve bir puanla birlikte önerileri içeren bir rapor gönderir.

Bu araçlar, bir web sayfasının hangi öğelerinin onu yavaşlattığını hızlı bir şekilde göstermede çok değerli olabilir ve hatta bazı araçlar size bu sorunları çözmeniz için çözümler sunar. Kapsamlı olmasalar da, büyük bir etki yaratabilecek değişiklikleri bulmanın hızlı ve kolay bir yoludur.

3. taraf komut dosyalarının kullanımını en aza indirin

Çoğu B2C e-ticaret web sitesi, bağlı kuruluş ağı izleme komut dosyalarından MVT testlerine kadar bir dizi 3. taraf kaynağı içerir. Bir Twitter beslemesi, Facebook takibi ve hatta harici yazı tipleri içerebilirler. Bu dış kaynaklar, çok dikkatli yönetilmezse bir web sitesini önemli ölçüde yavaşlatabilir.

Bir web sayfası hızı analizörü kullanırken, bu kaynakların sürekli olarak sayfa hızına katkıda bulunan öğeler listesinde göründüğünü göreceksiniz. En büyük zorluklardan biri, üçüncü taraflarca geliştirilip barındırıldıkları için bu kaynakların boyutu ve optimizasyonu üzerinde hiçbir kontrolünüz olmamasıdır.

Web siteniz tarafından aranmakta olan 3. parti kaynakları periyodik olarak denetlemeli ve hepsinin doğru yerde ve doğru şekilde ateşlendiğinden ve bunları gerçekten kullandığınızdan emin olmalısınız. Artık kullanılmayan bir hizmet için bir izleme komut dosyasının, GTM kullanılarak eklendiğinden ve hizmet kullanımı durduğunda birisinin onu kaldırmayı unuttuğu için hala tetiklendiği birçok örnek gördüm.

Google AMP

Google Accelerated Mobile Pages projesi, özellikle mobil cihazlara sunulan içeriğin hızını ve performansını iyileştirmeyi amaçlayan açık kaynaklı bir web yayıncılık teknolojisidir. Google tarafından yönetilen ve 2015 yılında başlatılan AMP teknolojisi, orijinal olarak haber içeriğinin teslimi için tasarlandı. AMP sayfaları çok hafiftir ve AMP olmayan eşdeğerlerine göre yaklaşık 10 kat daha az veri kullanma eğilimindedir ve genellikle 1 saniyeden daha kısa sürede yüklenir. Yine de büyük bir yakalama var. AMP sayfaları çok sınırlı bir işlevsellik grubunu destekler ve bu nedenle birçok uygulama, özellikle zengin ve işlevsel e-ticaret web siteleri için uygun değildir.

Bir avuç perakendeci, e-ticaret için AMP'yi karışık bir başarı ile denedi. Çok daha hızlı sayfalara sahip olmalarına rağmen, AMP'nin sınırlamaları etrafında işlevselliği ve kullanıcı deneyimini tamamen yeniden tasarlamak zorunda kaldılar. Web sitesinin ödeme gibi karmaşık alanları AMP'de oluşturulamaz, bu nedenle kullanıcı standart HTML'ye veya aşamalı web uygulaması (PWA) ödemesine yönlendirilir.

AMP çok ilginç bir proje olmasına ve haber endüstrisinde iyi bir şekilde benimsenmesine rağmen, e-ticaret ile henüz gerçek bir çekiş göstermedi. Google mevcut işlevselliği genişletmeye devam ederse, bunun e-ticaret için uygun bir araç haline geldiğini görebiliyorum.

Uyarlanabilir ol

Çoğu e-ticaret web sitesi artık, düzenin görüntülendiği ekrana uyacak şekilde dinamik olarak uyarlanacağı duyarlı bir şekilde oluşturulmuştur. Bu, web sitenizin ayrı mobil ve masaüstü sürümlerine sahip olmaktan kesinlikle tercih edilir ve genellikle sitenizin mevcut çok sayıda ekran boyutunda iyi çalışacağı anlamına gelir.

Bununla birlikte, duyarlı bir tasarımla, web sitesi hangi cihazda görüntüleniyor olursa olsun aynı varlıklar kullanılma eğilimindedir. Afişler ve ürün resimleri genellikle daha küçük boyutta görüntülenir veya mobil görünümde bile gizlenir, ancak büyük dosya yine de indirilir.

Adaptif tasarım öğelerinin kullanılabileceği yer burasıdır. Uyarlanabilir bir web sitesi, ekran boyutuna göre dinamik olarak değişen akıcı bir tasarım oluşturmak yerine, belirli ekran boyutları için tasarlanmış birden çok sabit düzene sahiptir. Bu, tasarımcıların her belirli ekran boyutu için kullanıcı deneyimini sıkı bir şekilde kontrol etmesine ve optimize etmesine olanak tanır.

Bu, uygulanması daha karmaşık ve zaman alıcı olsa da, hız açısından en önemli avantajlardan biri, bir mobil cihazda yalnızca daha büyük bir görüntüyü daha küçük boyutta görüntülemek yerine, o cihaza mobil olarak optimize edilmiş belirli bir görüntüyü yüklemenizdir. yükleme süresini azaltmak. Duyarlı bir tasarımda, site mobilde görüntülendiğinde belirli masaüstü öğelerini gizleyebilirsiniz. Uyarlanabilir bir tasarımda, onları hiç yüklemezsiniz bile.

Tamamen uyarlanabilir hale gelmenin pragmatik bir alternatifi, kullanılan ekran boyutunu algılamak için duyarlı tasarımınızda JavaScript kullanmak ve daha büyük resimleri daha küçük bir boyutta görüntülemek yerine mobil cihazlar için optimize edilmiş resimlerin istenmesini ve görüntülenmesini sağlamaktır. Bu, yalnızca görüntülenen resimlerin ve içeriğin istenmesini ve dolayısıyla indirilmesini sağlarken yine de duyarlı bir tasarımın faydalarını sağlar.

Mobil e-ticaret sitesi sayfalarınızı hızlandırmanın çok sayıda farklı yolu vardır. Bazıları geliştirmeyi içerir, bazıları 3. taraf hizmetlerin kullanımını içerir ve bazıları tasarım ve işlev arasında bir denge içerir.