E-ticaret: Web sitesi hızı algısı tüm farkı yaratır

Web sitesi hızlarının bir e-ticaret web sitesinin dönüşüm oranı ve yapışkanlığı üzerinde büyük bir fark yaratabileceğini hepimiz biliyoruz.

SOASTA tarafından yapılan bir vaka çalışması, mobil sayfa yükleme hızının iyileştirilmesinin dönüşüm oranını %25'in üzerinde artırdığını iddia etti. Amazon'un kurucusu ve CEO'su Jeff Bezos, sürekli olarak kullanıcıyı ilk sıraya koyma çabasında, sayfa yükleme hızına kafayı takmış durumda ve çalışanlarını sürekli olarak Amazon web sitesinin sayfa hızını düşürmeye yönlendiriyor.

Kullanıcılar genellikle daha yavaş bağlantılarda web sitelerine göz atacağından, mobil hakimiyetin yükselişi, daha hızlı sayfa yükleme hızına olan ihtiyacı artırdı.

Yslow veya Google Pagespeed Insights gibi web sayfalarının hızını artırmanıza yardımcı olacak birçok araç vardır ve css ve js küçültme ve birleştirme, css sprite kullanımı ve ağ isteklerini en aza indirme gibi çeşitli en iyi uygulamalar vardır. bir ön uç geliştirici, sayfa hızının en üst düzeye çıkarılmasını sağlamak için takip etmelidir.

Sahip olduğumuz sorun şu ki, standart en iyi uygulamaları izleyip büyük kazançları fark ettiğinizde, genel sayfa hızını iyileştirme çabalarından kısa süre sonra azalan getiriler görmeye başlayacaksınız.

Daha küçük ve daha küçük artımlı iyileştirmeler yapmak için çok zaman harcayabilirsiniz ve bu maliyetli ve zaman alıcı bir süreç olacaktır. Bu düzeyde çalışmak için gerekli beceri ve deneyime sahip ön uç geliştiriciler şaşırtıcı derecede az ve pahalıdır.

Ağ gecikmesi veya mobil bağlantı hızları gibi kontrol edemediğiniz bazı şeyler vardır ve bu nedenle ham sayfa hızı ile elde edilebileceklerin bir sınırı vardır. 3G bağlantısında 600ms ile 1s arasındaki herhangi bir yer, hakkında hiçbir şey yapamayacağınız zorunlu ağ ek yükleri tarafından tüketilir. İstenen 2 saniyelik sayfa yükleme süresine bağlı olarak, bu bize oynamamız için sadece 1 saniye verir. Bu çok fazla değil.

Ham sayfa hızının çok önemli olduğu inkar edilemez ve tüm geliştiriciler en azından standart en iyi uygulamaları takip etmelidir.

Ancak bu makale, sayfanızın daha hızlı yüklenmesini nasıl sağlayacağınızı tartışmayacaktır. Bununla ilgili birçok makale var ve hepsi biraz teknik.

Bu makale sayfa hızı algısına odaklanacak.
Hangisi daha önemli: Sayfa ne kadar hızlı yükleniyor veya kullanıcı ne kadar hızlı yüklendiğini düşünüyor?

Elbette algı, kullanıcı için en önemli şeydir.

Web sitesi hızı: İlk izlenimler

Web sitenizin ana sayfasına odaklanalım. Bir üst gezinme, arama çubuğu, kahraman afişi, belki de bir atlıkarınca ve bazı içerikler için önemli kategorilere bağlantılar içermesi muhtemeldir. Ana sayfalar oldukça içerikli olma eğilimindedir ve tüm bu içeriğin bir mobil bağlantıya hızlı bir şekilde yüklenmesi büyük bir zorluk olacaktır.

Buradaki anahtar, kritik içeriğin yüklenmesine diğer içeriğin önünde öncelik vermektir - kullanıcıya olabildiğince çabuk görmesi için önemli bir şey verin.

Bu kritik bilgileri işlerken, sonraki içerik katmanını yüklemeye başlayabilirsiniz.

Bir mobil cihazda, içeriğin çoğu ekranın alt kısmından başlayacak ve bu nedenle ekranın üst kısmındaki içerikten sonra yüklenmelidir. JavaScript'i birleştirmek ve küçültmek yaygın bir uygulamadır. Bu normalde en iyi uygulama olarak görülür, ancak daha az kritik kod yerine kritik JavaScript'in yüklenmesine öncelik vermenizi engelleyebilir. Bunun yerine, küçültülmüş ve birleştirilmiş JavaScript'inizi bölmeyi ve gerektiğinde aşamalı olarak yüklemeyi düşünebilirsiniz. Arama kutusunu bile yüklemeden önce bir arama yapmak için gereken JavaScript'i yüklemenize gerek yoktur. Kullanıcılar, sayfa yüklemesine en az birkaç saniye boyunca arama alanına karakter yazmayacaklar.

Bunu çok iyi yapan bir siteye bakalım. Amazon, kullanıcıya mümkün olan en kısa sürede kritik içerik sağlanmasını sağlamak için varlıkların ve içeriğin teslimini böldü ve ardından varlıkları öncelik sırasına göre aşamalı olarak yükler.

Bu test, iyi bir 3G bağlantısında ve önbelleğe alma devre dışı bırakılmış bir iPhone 6 simülatöründe çalıştırıldı. Sayfa ilk yüklendikten sonra, sert bir yenileme başlattım.

600ms'nin biraz üzerinde bir sürede, başlıkta adımla birlikte yüklenmeye başlayan bir şey var. Ayrıca, yalnızca 6 ağ aramasının yapıldığını ve 5 varlığın yüklendiğini (3 css dosyası ve 2 görüntü) fark edeceksiniz.

Sadece 50ms sonra artık başlığın ana bileşenlerinin yanı sıra baş kahraman bayrağını da görüyorum. Anahtar içerik bana çok hızlı bir şekilde iletildiğinden ve ek içerik yüklenirken gözlerimin ve beynimin işlemesi gereken bir şey olduğu için zaten hız algısına sahibim.

Sadece 1 saniye sonra ana navigasyon yüklenir. Bu aşamada görünür bir kaydırma çubuğu olmadığını fark edeceksiniz. Bu, ekranın altında şu anda içerik olmadığı anlamına gelir. Kullanıcının göremediği bu içeriği yüklemek için değerli zaman kaybı olmamıştır. Ayrıca şimdiye kadar sadece 13 talepte bulunulduğunu da fark edeceksiniz.

2 saniyeden kısa bir süre içinde, artık önemli içeriğin yeni bir bölümüne sahibim.

3 saniyeden daha kısa bir sürede, sayfanın tamamen yüklendiğini algılıyorum, oysa sayfanın tamamının yüklenmesi 5 saniyeden biraz daha kısa sürdü. Bu, sitenin aslında sadece %60'ı yüklüyken, siteyi tamamen yüklenmiş olarak algıladığımı gösteriyor.

İçerik tesliminin gerçek zamanlaması kişiden kişiye değişecektir ancak bu, kritik içeriğin mümkün olduğunca çabuk yüklenmesini ve kullanıcıların sitenin çok hızlı yüklenmeye başladığını algılamasını sağlamak için Amazon'un mobil içeriğin yüklenmesine nasıl öncelik verdiğini çok açık bir şekilde göstermektedir.

Şimdi bunu pek iyi yapmayan bir web sitesine bakalım. Bu test, önceki Amazon testiyle tamamen aynı araçlar ve ağ hızı kullanılarak gerçekleştirildi. Charles Tyrwhitt sitesi bazı içeriğe öncelik verirken, Amazon'un optimizasyonuna yaklaşmak için yapılabilecek çok daha fazlası var.

Neredeyse 7.5 saniye boyunca herhangi bir içerik göremiyorum. Hemen bu sitenin mobil cihazımda yavaş olduğuna dair bir algı var. Site, bir kahraman banner'ının yanı sıra başlık içeriğine de öncelik veriyor olsa da, bu noktaya kadar 90'dan fazla istekte bulunulduğunu görebilirsiniz ve kaydırma çubuğunu görebildiğim gibi, içeriğin ekranın alt kısmına yüklenmiş olması gerektiği açık.

8.5 saniye sonra bir atlıkarıncanın yüklenmeye başladığını görebiliyorum. İstek sayısı değişmedi, bu da içerikle ilgili isteklerin büyük kısmının sayfa yüklemesinin hemen başında yapıldığını gösteriyor.

Sitenin artık tamamen yüklendiğini algılamam neredeyse 22 saniyeye kadar değil. Sayfanın tamamen yüklenmesi aslında toplam 28,4 saniye sürdü. Bu, aslında %77 yüklüyken sayfanın tamamen yüklendiğini algıladığımı gösteriyor.

2 deneyim arasındaki açık farkı görmek kolaydır. Amazon mobil ana sayfası Charles Tyrwhitt ana sayfasından önemli ölçüde daha hızlı yüklenirken, kullanıcıların daha da hızlı olduğunu algılamaları için çaba gösterilmiştir. Kullanıcı, toplam sayfa yükleme süresinin %12,5'i içinde yüklenen bir şey görmeye başlarken, Charles Tyrwhitt web sitesinin kullanıcıları, toplam sayfa yükleme süresinin yalnızca %26'sı içinde bir şeyler olduğunu görür. Amazon ana sayfası, kullanıcı ilerleme görmeden önce 6 ağ isteğinde bulunurken, Charles Tyrwhitt ana sayfası 90 istekte bulundu.

Bu, Charles Tyrwhitt'i aşırı derecede eleştirmek anlamına gelmez, çünkü web sitelerini oluşturma biçimleri bakımından hiçbir şekilde benzersiz değildirler. Kabul edilen en iyi uygulama bir dizi alanda izlenmiştir, ancak gerçek hızın yanı sıra hız algısını iyileştirmek için çok daha fazlasının yapılabileceği görülmektedir.

CSS'ye öncelik vererek web sitesi hızını artırın

Ön uç geliştiricilerin bir web sitesinin css'sinin çoğunu bir avuç dosyaya yerleştirmesi ve her zaman satır içi yerine harici css kullanması oldukça yaygındır. Bunun neden olduğu sorun, herhangi bir içeriğin bir kullanıcıya gösterilebilmesi için büyük bir css dosyasının yüklenmesi gerekmesidir.

Bunun bir çözümü, css dosyalarınızı bölmek ve bunları kritik içerikle sırayla yüklemektir. Amazon örneğine bakacak olursak ilk 6 isteklerinden biri olarak sadece 6.5k boyutunda bir css dosyası yüklüyorlar. Bu dosya, ana sayfalarındaki kritik içeriği biçimlendirmek için gerekli olan css'i içerir. Aslında, kullanıcı Amazon mobil ana sayfasında içeriği görmeden önce istenen tüm css dosyalarının toplam boyutu 40k'nin altındayken, Charles Tyrwhitt ana sayfasında 500k'nin üzerindedir.

Bu uygulama, kritik içeriği kullanıcıya çok hızlı bir şekilde ulaştırmanıza olanak tanır ve hız algısını güçlendirmeye yardımcı olur.

JavaScript'te de aynısını yapın

CSS'ye öncelik vermenin yanı sıra, bunu JavaScript ile nasıl yapacağınızı da düşünmelisiniz. Hemen hemen tüm e-ticaret web siteleri, çalışmak için büyük ölçüde JavaScript'e güvenecektir. JavaScript, kritik içeriğin yüklenmesini engellemediği sürece bu sorun değil. Charles Tyrwhitt web sitesi örneğini tekrar alırsam ve tarayıcımda JavaScript'i devre dışı bırakırsam, artık içeriğin 4,5 saniye içinde yüklendiğini görüyorum. Bu, o web sitesinin hızına ilişkin algımda büyük bir değişiklik ve kritik içerikten önce yüklenen JavaScript'in bu içerik üzerinde hiçbir etkisi olmadı ve bu nedenle JavaScript'in bu içerikten sonra yüklenememesi için hiçbir neden yok.

Web geliştiricilerinin, Amazon gibi web sitelerinin gerçek hızın yanı sıra web sitelerinin hızının algılanmasına odaklanma biçiminden öğrenebilecekleri çok şey var. Web siteleri açıkça çok hızlı olmasına rağmen, kullanıcılar kritik içeriği her şeyden önce göstermeye öncelik vermeleri nedeniyle kullanıcılar onu daha da hızlı algılıyorlar.

Hızın dönüşüm oranınız üzerindeki etkisi hakkında çok şey yapıldı ve perakendeciler, gerçek web sitesi hızının yanı sıra algılanan web sitesi performansını optimize etmeye yatırım yapmayı düşünmelidir.