Aşağıdaki makale size yardımcı olacaktır:E-ticaret Arayüzünün Geleceği ve Gelirinizi Nasıl Etkiler?
Akıllı telefonların ve LTE’nin yükselişiyle birlikte mobil cihazlardan alışveriş artık e-ticaret satışlarının %49’undan fazlası. Geçen yılın milyarlarca dolarlık Kara Cuma/Siber Pazartesi hafta sonunda bu sayı daha da yükseldi.Satışların %69’u telefon veya tabletlerden gerçekleşti.
Mobil e-ticaret ayarlandı önümüzdeki yıllarda daha da büyümek.
Şirketlerin mobil alışveriş deneyimlerini optimize etmek ve eski teknolojileri mobil cihazlara uyarlanmış teknolojilerle değiştirmek için rekabet etmeleri şaşırtıcı değil.
Bu yazıda teknoloji şirketlerinin şu amaçlarla kullandıklarına odaklanacağız: başlangıç aşaması çevrimiçi mağazalarının (ön uç, alışveriş yapanların görebileceği ve etkileşimde bulunabileceği web sitesinin bir parçası) ve başarılı e-ticaret şirketlerinin mobil cihazlara uyum sağlamak için hangi yeni teknolojileri benimsediği.
Ön Ucu Neden Önemsemelisiniz?
Üç nedenden dolayı:
- Ön uç teknolojisi seçiminiz mobil sayfa hızınızı etkiler;
- Mobil sayfa hızı dönüşüm oranınızı etkiler; Ve
- Dönüşüm oranınız sonuçta gelirinizi etkiler.
Neil Patel’den bir örnek alarak bu senaryoya bazı gerçek dünya rakamlarını ekleyelim: Diyelim ki günde altı rakamlı satış yapan bir çevrimiçi mağaza işletiyorsunuz. Sayfa yanıtındaki bir saniyelik gecikmenin, Dönüşümlerde %7 azalma.
Bu yüzden, Patel’e göre“Eğer bir e-ticaret sitesi günde 100.000$ kazanıyorsa, bir saniyelik sayfa gecikmesi size her yıl 2,5 milyon dolarlık satış kaybına neden olabilir.”
Tekrar ediyorum: MİLYONLARCA dolar kayıp satışlarda her yıl.
Ön uç teknolojiniz olan tepeden başlar. Trafiğiniz oldukça mobilse ve geliri önemsiyorsanız okumaya devam edin.
#cta-visual-fe#
Hız Mobil Performansı Nasıl Etkiler?
Tamam, mobil optimizasyonun önemi e-ticarette çalışan hemen hemen herkes tarafından iyi bilinmektedir.
Peki bunun arkasındaki gerçek rakamlar neler? Mobil performansta hız ne kadar büyük bir faktördür ve bir saniyenin gerçekten ne kadar önemi vardır?
İşte bazı önemli istatistikler:
Her şey hemen çıkma oranıyla, yani bir web sitesine girdikten sonra siteyi terk eden ziyaretçilerin yüzdesiyle ilgilidir.
Mağazanız için düşük bir hemen çıkma oranı istiyorsunuz. Sonuçta, bu ziyaretçileri sitenize çekmek ve onları orada daha uzun süre tutmak muhtemelen çok fazla reklam parası gerektirdi. daha yüksek bir dönüşüm oranıyla ilişkili.
Hemen çıkma oranı ve yükleme süresi verilerine bir bakış:
Mobil performansınızın zayıf olduğundan endişeleniyorsanız endişelenmeniz için nedeniniz var.
“Verilerimiz, genel web trafiğinin yarısından fazlasının mobilden gelmesine rağmen mobil dönüşüm oranlarının masaüstünden daha düşük olduğunu gösteriyor.” Daniel An’ı yazdı, Google’da Mobil Web eski Küresel Ürün Lideri. “Kısacası hız eşittir gelir.”
Hız eşittir gelir —tşapka geliyor Google.
Artık hemen çıkma oranının hıza bağlı olduğunu ve hemen çıkma oranının gelirle ilgili dönüşümlerle doğrudan ilişkili olduğunu gösteren sağlam verilere sahip olduğumuza göre, mobil site hızını artıran teknolojileri keşfedebiliriz.
Ancak e-ticaret ön uç teknolojisinin geleceğine geçmeden önce geçmişini ve bugününü düşünelim.
E-Ticaret Ön Uçları Geleneksel Olarak Nasıl Oluşturuldu?
Bugün sahip olduğunuz DTC e-ticaret deneyimlerinin çoğunda, geleneksel web siteleri olan ön uçlar bulunur. Web siteleri öncelikle en temel iki kodlama dili olan HTML ve CSS’den yapılır ve bu araçlarla veya şu formatlarda oluşturulabilir:
- Özel kod
- Temalar
- Sayfa Oluşturucular
- Deneyim Yöneticileri
Her birini parçalayalım.
1. Özel Kod
HTML, CSS, belki biraz JavaScript… bunlar tamamen özel bir web sitesinin unsurlarıdır.
Sıfırdan kodlama sıkıcı olduğundan ve hem yapım hem de bakım açısından yüksek geliştirme maliyetlerine yol açan sorunlu noktalara sahip olduğundan, bu yaklaşım biraz dinozorun yolundan gitti.
Üstelik HTML, site hızını düşürebilecek “şişirilmiş” kod haline gelmeye karşı hassastır.
Pek çok e-ticaret mağazasının tamamen özel kodlanmış web siteleri vardır.
Ancak, eskiden bu seçeneği tercih eden birçok şirket artık temaları (eğer daha küçükse) veya deneyim yöneticilerini (eğer daha büyükse) tercih ediyor.
Web siteleri, sayfa tıklamaları arasında tam sayfanın yenilenmesini gerektirir; bağlantı sınırlı olduğunda veya sayfada çok fazla içerik varsa veya çok sayıda API çağrısı yapıyorsanız (bir web sitesinin üçüncü bir taraftan veri alması gerektiğinde, inceleme widget’ı gibi), sayfa hızı olumsuz etkilenir.
2. Temalar
Temalar, bir geliştirici veya geliştirme ajansı tarafından oluşturulan bir web sitesinin ön ucu için önceden hazırlanmış bir kod şablonudur.
Bu bir tür boyama kitabı/sayılara göre boyama durumuna benzer: Web sitesinin ana hatlarını ve sağlam bir temeli elde edersiniz, ancak görünümü özelleştirmek için bir geliştiriciye veya iyi HTML/CSS bilgisine sahip birine ihtiyacınız olacaktır.
Temalar Shopify, WordPress ve BigCommerce gibi e-ticaret platformları tarafından popüler hale getirildi.
Sayfa hızı ve mobil performans söz konusu olduğunda temalar, özel kodlu web siteleriyle aynı sorunlara sahiptir.
Bazıları performans iyileştirmeleriyle birlikte gelir ve akıllı ajanslar bir temayı temel unsurlara indirgeyebilir (örneğin, üçüncü taraf uygulamaların kullanımını en aza indirebilir ve oldukça iyi mobil performansa sahip bir site elde edebilir).
Ancak tam sayfa yükleme yenilemesi, en iyi web sitelerini bile yeni ön uç teknolojilerinin bir nesil gerisinde bırakıyor.
3. Sayfa Oluşturucular
Yasal Uyarı: Şirketim Shogun’un çok başarılı bir sayfa oluşturucu ürünü olması nedeniyle burada bir miktar önyargı var.
Sayfa oluşturucular, teknik bilgisi olmayan kişilerin bir web sitesi tasarlamasına ve dağıtmasına olanak tanır. Kullanıcılar, genellikle bir öğe kitaplığı (kaydırıcı, resim, Instagram akışı vb.) içeren görsel bir “oluşturucu” kullanarak, bir sayfaya sürükleyip bırakabilir ve ardından kodsuz kontrolleri (renk seçici, yazı tipi boyutu, kenar boşlukları) kullanarak sayfaya stil verebilir. , dolgu vb.).
Düzgün bir şekilde tasarlandığında sayfa oluşturucular temiz, arama motoru tarafından okunabilir, ham HTML kodu üretir. Kötü sayfa oluşturucular, hızı ve SEO’yu olumsuz yönde etkileyebilecek dağınık, şişirilmiş HTML oluşturabilir.
Sayfa oluşturucular bir web sitesi oluşturmayı kolaylaştırır. Ancak, özel kod ve temaları rahatsız eden sayfa yükleme süreleriyle ilgili hala aynı sorunları yaşıyorlar.
4. Deneyim Yöneticileri
Deneyim yönetimi yazılımı, hem içerik yönetimi işlevine hem de dijital deneyim işlevine hizmet eden, ön uç odaklı bir yazılım türüdür.
Dijital deneyim yönetimi genellikle kişiselleştirme ve çok değişkenli testlerle (A/B testi) ilgili araçlar anlamına gelir. Tanıyabileceğiniz isimler: Sitecore, Acquia ve Episerver bunlardan birkaçıdır.
Bu yazılımlar son derece sağlam olsa da aşağıdakiler de dahil olmak üzere pek çok sorun vardır:
- Uygulama süresi, maliyeti ve fizibilite
- Kesinlikle çok büyük olabilecek devam eden SaaS maliyetleri
- Sitenin hız performansını artırmak için hala hiçbir şey yapmıyorlar ve bazen yükleme süresini olumsuz yönde etkileyebiliyorlar.
- Kullanıcı arayüzleri, modern SaaS ile karşılaştırıldığında genellikle eski ve sezgisel değildir
Bu yazılımın karmaşıklığı abartılamaz.
Büyük bir sağlayıcının kapattığı müşterilerin yalnızca %50’sini kabul edebildiğini duydum.
#cta-visual-fe#
Mobil Alışverişe Odaklanan Yeni Nesil Teknolojiler
İşte üç önemli tanesi:
- Yerli Mobil Uygulamalar
- Hızlandırılmış Mobil Sayfalar
- Progresif Web Uygulamaları
Her birine ayrı ayrı bakalım.
1. Yerli Mobil Uygulamalar
Hepimiz yerel mobil uygulamalara aşinayız. Birçoğumuzun şu anda telefonlarımızda Facebook uygulaması, Spotify uygulaması ve öhöm Amazon uygulaması yüklü.
Mobil uygulamalar, App Store veya Google Play gibi bir pazar yeri aracılığıyla yüklenen, cihaza özel mobil uygulamalardır.
Yerel uygulamalar, GPS, anında bildirimler ve mimik daha kolay ulaşılabilir durumdadır. Bu uygulamalar PWA’lara göre daha eksiksiz önbellekleme sunar, dolayısıyla düşük veya sıfır bağlantı için daha iyidirler.
Ayrıca navigasyon açısından en yüksek hızları sunarlar.
Öte yandan, uygulama mağazası kurulumu benimsemenin önünde büyük bir engeldir: Kim tüm favori DTC’leri için 25 mobil uygulamayı indirecek?
Mobil uygulamalar, Adidas gibi son derece sadık ve geri dönen müşterileri olan büyük markalar için gayet iyi. Ancak gelişmekte olan bir markaysanız, hedef kitlenizin uygulamanızı arama ve indirme sürtünmesine dayanması pek olası değildir.
Ayrıca App Store’un içerik kısıtlamaları ve ücretleri vardır.
Kurulumdan sonra bile yerel mobil uygulamalar için savaş bitmedi. Örneğin, Flipkart’ın PWA’sına gelen ziyaretçilerin yaklaşık %60’ı daha önce öncelikle yerden tasarruf etmek için yerel uygulamayı kaldırmıştı.
2. Hızlandırılmış Mobil Sayfalar (AMP)
AMP, Google tarafından geliştirilen açık kaynaklı bir çerçevedir ve 2016 başından beri.
Bu web sayfaları benzersiz bir kodlama diliyle neredeyse anında yüklenir ve sayfanın önbelleğe alınmış bir sürümünü sunan bir CDN’de barındırılır.
Keşfedilebilirlik, AMP’nin önemli bir avantajıdır: Google arama sonuçlarındaki atlıkarıncada görünür. “AMP yalnızca hafif içeriği destekleyebilir” olsa da bu aynı zamanda daha hızlı yükleme süreleri anlamına da gelir. Instapage’e göre.
Bununla birlikte, JavaScript gerektiren etkileşimli herhangi bir şey AMP çerçevesi kullanılarak oluşturulamaz.
AMP için dinamik içerik söz konusu değil.
AMP, işlevi çok sınırlı olan bir açılış sayfası için uygundur ancak çok daha fazla dinamik etkileşime sahip gerçek bir e-ticaret deneyimi için uygun değildir.
3. Aşamalı Web Uygulamaları (PWA)
PWA’lar, yerel mobil uygulamaların yaptığı gibi görünmek, hissetmek ve çalışmak üzere tasarlanmış, ancak doğrudan tarayıcıda tasarlanmış mobil çevrimiçi mağaza deneyimleridir; App Store’dan indirmeye gerek yoktur.
Google, Progresif Web Uygulamasını şu üç temel ilkeye sahip olarak tanımlar: BluEnt tarafından organize edildiği gibi:
- Güvenilir: Mükemmel olmayan ağ koşullarında bile anında yüklenir.
- Hızlı: Sorunsuz işlevsellik ile kullanıcı etkileşimlerine hızlı yanıt verme.
- İlgi çekici: Cihazda yerel bir uygulama hissi verir. AMP’den farklı olarak JavaScript çok hoş karşılanır.
PWA bir Google girişimidir. Tam tanım bir özelliklerin çok uzun bir kontrol listesi Bir web sitesi yapısı PWA’nın gereksinimlerini karşılayacak şekilde olmalıdır.
PWA’lar geleneksel web sitelerinden çok daha hızlıdır ancak yerel mobil uygulamalar veya AMP kadar hızlı değildir… ancak aradaki farkı kapatmaktadırlar. Ayrıca, belirsiz ağ koşulları iyidir ancak yerel uygulamalar sıfır bağlantı için hala daha iyidir.
AMP’den farklı olarak PWA’lar, tam bir e-ticaret sitesi oluşturmaya yetecek kadar sağlamdır ve yerel mobil uygulamaları zorlayan App Store sıkıntılarının hiçbirine sahip değildir.
Giderek daha fazla ileriyi düşünen e-ticaret şirketi, çevrimiçi mağazalarında PWA yaklaşımını benimsiyor ve bu, kafasız e-ticaret yapıları için tercih edilen teknoloji gibi görünüyor.
Yan not: “Başsız” karmaşık bir kavram gibi görünse de, temel olarak bir çevrimiçi mağazanın ön yüzü için (alışveriş yapanların görebileceği kısım), genellikle bir e-ticaret platformu üzerine inşa edilen arka uçtan farklı bir teknolojinin kullanıldığı anlamına gelir. Shopify, BigCommerce, Salesforce veya Magento gibi.
Progresif Web Uygulamaları Nasıl Oluşturulur?
Aşamalı Web Uygulaması yapıları şu birincil bileşenleri içerir:
- React veya Vue gibi bir JavaScript çerçevesi bilen geliştiriciler
- Gatsby veya Nuxt gibi bir SSR çerçevesi
- Netlify gibi PWA’lar oluşturma yeteneğine sahip bir CDN
- Prismic veya Contentful gibi başsız bir CMS
- Shopify verilerinizi bağlamak için Nacelle gibi bir ara yazılım
- Yotpo veya Klaviyo gibi tüm üçüncü taraf entegrasyonlarınızı manuel olarak eklemenin bir yolu
İçin teknik okuyucular—haydi bu teknoloji yığınının amacına biraz daha derine inelim:
GitHub süreci şu şekilde açıklıyor:
“JavaScript ile yazılmış bir hizmet çalışanı, istemci tarafı bir proxy gibidir ve önbelleğin ve kaynak isteklerine nasıl yanıt verileceğinin kontrolünü size verir. Önemli kaynakları önceden önbelleğe alarak ağ bağımlılığını ortadan kaldırabilir, kullanıcılarınız için anında ve güvenilir bir deneyim sağlayabilirsiniz.”
İçin teknik olmayan okuyucular— muhtemelen bu teknik girişimin olasılığı karşısında kendinizi biraz bunalmış hissediyorsunuz.
Yalnız değilsin! Birçok profesyonel web geliştiricisi ve ajansı da aynı şeyi düşünüyor.
Bu da beni Shogun’un en yeni ürünü olan Shogun Frontend’e, güçlü bir deneyim yöneticisine ve mağazanızın ön yüzünü bir saniyeden kısa sürede Progresif Web Uygulaması olarak işleyen CMS’ye yönlendiriyor.
Bahsi geçen karmaşık teknik mimariyi alıp SaaS (hizmet olarak yazılım) olarak ürünleştirdik. Birazdan bununla ilgili daha fazla bilgi vereceğiz.
Aşamalı Web Uygulamaları: Sonuçlar
PWA’ları uygulayan şirketler bu süreçte etkileyici sonuçlar elde etti.
İşte sektörlere ilişkin bazı bulgular (H/T Cloud Four ve PWA İstatistikleri bu verileri düzenlemek için):
Bu, e-ticaret şirketlerinin çevrimiçi mağaza ön yüzlerini ilerici bir web uygulaması olarak yeniden oluşturduktan sonra gördükleri sonuçların yalnızca bir kısmıdır.
Cloud Four ve PWA İstatistikleri ile ilgili bazı mini vaka çalışmalarını takip etmeyi seviyorum. Google Geliştiricileri Blogu.
Mobil Performansınızı Artıracak Öneriler
Yeni başlayan bir mağazaysanız, yeni nesil teknolojiye yatırım yapmadan önce site performansı için düşük maliyetli meyvelerin peşinden gitmenizi öneririm. İşte bazı ipuçları:
- Kullanmak Google Sayfa Hızı Analizleri Sorunlarınızı teşhis etmek için. Sayfa hızınızı kontrol etmek ve muhtemelen daha yavaş yükleme sürelerine neden olan sorunları incelemek için Google tarafından sağlanan ücretsiz bir araçtır.
- Gereksiz tüm üçüncü taraf uygulamalarını mağazanızdan kaldırın. Bu uygulamalara yapılan API çağrıları büyük bir sürüklenmeye neden olabilir ve genellikle temanıza kod enjekte ederek kod tabanını şişirip sitenizi yavaşlatabilirler.
- Resimlerinizi sunma şeklinizi değiştirin. “Görüntü formatları gibi JPEG 2000, JPEG XR ve WebP genellikle PNG veya JPEG’den daha iyi sıkıştırma sağlarbu da daha hızlı indirme ve daha az veri tüketimi anlamına gelir” (Google uyarı metni).
- Tembel yüklemeyi uygulayın. “Dikkate almak yavaş yüklenme Etkileşim süresini kısaltmak için tüm kritik kaynakların yüklenmesi tamamlandıktan sonra ekran dışı ve gizli resimler” (Google uyarı metni). Shogun Sayfa Oluşturucu, bazı temalar gibi, kutudan çıkar çıkmaz yavaş yükleme olanağı sunar.
Ancak ciddi gelir elde eden bir e-ticaret şirketiyseniz (yıllık geliri 3 milyon dolardan fazla), ön yüzünüz için yeni nesil teknolojiye yatırım yapmayı düşünün.
Yıllık 5 milyon ABD doları gelir elde ediyorsanız ve sitenizdeki tıklamalar arasındaki yükleme süresini ortadan kaldırarak dönüşüm oranınızı %5 artırabiliyorsanız, yılda fazladan 250 bin ABD doları kazanıyorsunuz demektir.
Yıllık 50 milyon ABD doları gelir elde ediyorsanız ve sitenizdeki tıklamalar arasındaki yükleme süresini ortadan kaldırarak dönüşüm oranınızı %5 artırabiliyorsanız, yılda fazladan 2,5 milyon ABD doları kazanıyorsunuz demektir.
Yatırımın geri dönüşü oldukça açıktır.
Sıfırdan bir PWA oluşturmaya yönelik yaklaşımlar yukarıda belirtilmiştir.
Ancak, PWA oluşturabilecek ve hem karmaşık deneyim yönetimi hem de içerik yönetimi ihtiyaçlarınızı karşılayabilecek bir yazılım kullanmayı tercih ediyorsanız Shogun Frontend bir göz atmaya değer.
Shogun Frontend, özellikle e-ticaret şirketleri için tasarlanmış, inanılmaz derecede güçlü, hepsi bir arada bir ön uç platformudur ve çıktısı, bir saniyenin altında bir React.JS aşamalı web uygulamasıdır.
Shopify, BigCommerce, Salesforce ve Magento gibi platformlarla sorunsuz bir şekilde çalışan, kafasız bir ticaret tarzıdır ve internetteki en hızlı e-ticaret web sitelerini oluşturur.
#cta-visual-fe#
