Tingkatkan e-commerce seluler: Jadikan situs web Anda lebih cepat

Berbagai statistik mencatat perbedaan setiap detik waktu buka terhadap tingkat konversi toko e-niaga. Saya pribadi agak meragukan banyak dari statistik ini, karena ada banyak faktor lain yang dapat mempengaruhi tingkat konversi toko. Namun, dengan dominasi e-niaga seluler dan penelusuran melalui penelusuran desktop untuk hampir semua situs web ritel, jelas penting bahwa toko e-niaga secepat mungkin, karena kecepatan akan secara langsung memengaruhi pengalaman pengguna.

Ada banyak cara untuk mengoptimalkan ujung depan situs web Anda; beberapa kompleks dan mahal, beberapa cukup sederhana. Anda akan sering menemukan bahwa Anda bisa mendapatkan beberapa kemenangan besar yang cepat dan mudah sejak awal, tetapi pada akhirnya akan mulai mendapatkan hasil yang semakin berkurang dan peningkatan bertahap yang lebih kecil.

Seberapa jauh Anda melangkah sangat bergantung pada ukuran pendapatan online Anda dan seberapa banyak pendapatan tambahan dari e-niaga seluler yang kemungkinan besar akan Anda peroleh dari peningkatan bertahap yang lebih kecil.

Meningkatkan tingkat konversi sebesar 0,1% akan menghasilkan laba atas investasi yang jauh lebih besar untuk pengecer besar daripada pengecer yang lebih kecil.

Optimalkan gambar untuk pengalaman e-commerce seluler utama

Optimalisasi gambar adalah area di mana pengurangan besar dalam waktu buka halaman dapat dicapai dengan cepat dan mudah. Saya sering melihat konflik antara desainer grafis, merchandiser, dan manajer e-commerce dalam hal kualitas dan ukuran gambar. Seorang desainer grafis menginginkan gambar dengan resolusi terbesar dan setinggi mungkin, dan tidak akan selalu mempertimbangkan implikasi kecepatan dari gambar yang mereka buat. Pedagang cenderung menginginkan gambar produk dengan resolusi terbesar dan tertinggi, sedangkan manajer e-niaga mungkin satu-satunya yang memiliki visibilitas dan apresiasi terhadap kecepatan halaman secara keseluruhan.

Optimalisasi gambar selalu seimbang antara kualitas dan ukuran file. Semakin tinggi kualitas gambar, semakin tinggi ukuran file. Ukuran asli dan kerumitan gambar juga memengaruhi ukuran file. Gambar dengan latar belakang yang detail dan kompleks cenderung memiliki ukuran file yang jauh lebih besar daripada gambar dengan latar belakang biasa.

Desainer sering kali suka membuat spanduk berdampak tinggi untuk situs web menggunakan banyak warna dan latar belakang yang bukan hanya warna polos. Ini dapat memiliki dampak visual yang tinggi, tetapi konsekuensinya adalah ukuran file yang jauh lebih tinggi daripada spanduk serupa dengan latar belakang polos. Pengenalan layar resolusi tinggi seperti Apple Retina Display membuat keseimbangan lebih sulit dipertahankan karena layar menyoroti ketidaksempurnaan pada gambar berkualitas rendah.

Penting bagi semua anggota tim untuk memahami pengoptimalan ujung depan dan dampak keputusan grafis apa pun terhadap ukuran gambar dan kecepatan halaman.

Sementara alat desain standar seperti Photoshop memungkinkan desainer untuk mengoptimalkan gambar, ada sejumlah layanan pihak ketiga yang tersedia yang dapat secara otomatis mengoptimalkan gambar di situs web Anda. Baik Akamai dan Ampliance menawarkan layanan manajemen gambar yang mengoptimalkan gambar Anda berdasarkan seperangkat aturan yang dikonfigurasi. Mereka bahkan dapat mengubah file jpeg menjadi gambar WebP untuk mendukung browser guna memastikan bahwa ukuran file sekecil mungkin.

Di Envoy, kami baru-baru ini menguji coba pengelola gambar Akamai di situs web klien dan melihat pengurangan rata-rata 80% dalam ukuran file gambar PLP, tanpa penurunan kualitas visual yang nyata. Hal ini mengakibatkan penurunan besar dalam berat keseluruhan halaman PLP (halaman daftar produk) dan lompatan besar langsung dalam skor Google Pagespeed mereka. Jika Anda tidak ingin menggunakan layanan pihak ke-3 untuk ini, Anda dapat menerapkan alat sumber terbuka seperti Thumbor, yang merupakan layanan yang Anda instal secara lokal di server web Anda. Alat seperti ini secara otomatis mengoptimalkan gambar Anda dengan cepat dan kemudian menyimpannya di dalam repositori.

Gunakan CDN

Jaringan pengiriman konten (CDN) adalah layanan yang menyimpan konten Anda di cache pada jaringan server yang biasa dikenal sebagai edge. Server ini biasanya dihosting secara global di banyak lokasi untuk memastikan bahwa konten Anda di-cache di lokasi yang secara fisik lebih dekat dengan pengguna daripada server asal Anda. Meskipun CDN sering digunakan hanya untuk menyimpan gambar, css, JavaScript, dan video, Anda juga dapat menggunakannya untuk menyimpan halaman HTML penuh dalam cache.

Dengan meng-cache halaman HTML penuh, Anda dapat secara signifikan mempercepat pengiriman halaman ke pengguna Anda. Karena HTML di-cache, aplikasi web Asal Anda tidak harus membuat halaman dan mengembalikannya ke pengguna setiap kali diminta dan server cache CDN (titik keberadaan) cenderung secara fisik lebih dekat dengan pengguna daripada asal Anda server. CDN juga memiliki teknologi untuk memampatkan dan mempercepat pengiriman konten ke pengguna, semuanya menghasilkan pengalaman yang jauh lebih cepat.

CDN juga dapat secara signifikan mengurangi beban pada server asal Anda. Halaman PLP sering kali merupakan halaman yang membutuhkan prosesor untuk dihasilkan oleh aplikasi web Anda dengan cepat. Ini mungkin berisi sejumlah besar produk dan faset, semuanya menambahkan hingga banyak pemrosesan. Dalam kebanyakan kasus, halaman PLP tidak akan berubah dari satu jam ke jam berikutnya, jadi caching halaman itu selama satu jam sangat mungkin dilakukan. Daripada berpotensi membuat halaman itu ribuan kali dalam satu jam, server asal Anda harus melakukannya sekali. Pada kenyataannya, ini tidak berfungsi seperti itu karena banyak CDN akan memiliki beberapa cache independen, tetapi Anda masih dapat mengharapkan offload sekitar 60%. Ini berarti bahwa server dan aplikasi asal Anda akan mendapatkan permintaan 60% lebih sedikit daripada tanpa CDN.

Gunakan alat analisis kecepatan untuk mengoptimalkan pengalaman e-niaga seluler

Ada sejumlah alat online gratis dan berbayar yang dapat menganalisis halaman web dan memberikan rekomendasi tentang cara membuat situs web Anda berjalan lebih cepat. Mungkin tiga alat gratis yang paling banyak digunakan adalah Google PageSpeed ​​Insights, Yslow, dan Webpagetest. Masing-masing alat ini sedikit berbeda, tetapi semuanya menganalisis URL Anda dan mengirim laporan yang berisi rekomendasi, bersama dengan skor.

Alat-alat ini bisa sangat berharga dalam menunjukkan kepada Anda elemen halaman web mana yang memperlambatnya, dan beberapa alat bahkan memberi Anda solusi untuk mengatasi masalah ini. Meskipun tidak komprehensif, ini adalah cara cepat dan mudah untuk menemukan perubahan yang dapat memberikan dampak besar.

Minimalkan penggunaan skrip pihak ketiga

Sebagian besar situs web e-niaga B2C berisi sejumlah sumber daya pihak ketiga, mulai dari skrip pelacakan jaringan afiliasi hingga tes MVT. Mereka mungkin berisi umpan Twitter, pelacakan Facebook, atau bahkan font eksternal. Sumber daya eksternal ini dapat memperlambat situs web secara signifikan jika tidak dikelola dengan sangat hati-hati.

Saat menggunakan penganalisis kecepatan halaman web, Anda akan sering menemukan bahwa sumber daya ini terus-menerus muncul dalam daftar elemen yang berkontribusi pada kecepatan halaman. Salah satu tantangan terbesar adalah Anda tidak memiliki kendali atas ukuran dan pengoptimalan sumber daya ini, karena sumber daya tersebut dikembangkan dan dihosting oleh pihak ketiga.

Anda harus secara berkala mengaudit sumber daya pihak ke-3 yang dipanggil oleh situs web Anda dan memastikan semuanya diaktifkan di tempat yang benar dan dengan cara yang benar, dan bahwa Anda benar-benar menggunakannya. Saya telah melihat banyak contoh di mana skrip pelacakan untuk layanan yang tidak digunakan lagi masih diaktifkan karena ditambahkan menggunakan GTM dan seseorang lupa menghapusnya saat layanan berhenti digunakan.

Google AMP

Proyek Google Accelerated Mobile Pages adalah teknologi penerbitan web sumber terbuka yang bertujuan untuk meningkatkan kecepatan dan kinerja konten, yang secara khusus dikirimkan ke perangkat seluler. Dipimpin oleh Google dan dimulai pada tahun 2015, teknologi AMP pada awalnya dirancang untuk pengiriman konten berita. Halaman AMP sangat ringan dan cenderung menggunakan data sekitar 10 kali lebih sedikit daripada halaman non-AMP yang setara, dan sering dimuat dalam waktu kurang dari 1 detik. Ada tangkapan besar sekalipun. Halaman AMP mendukung serangkaian fungsi yang sangat terbatas, dan oleh karena itu tidak sesuai untuk banyak aplikasi, terutama situs web e-niaga yang kaya dan fungsional.

Beberapa pengecer telah mencoba AMP untuk e-niaga dengan keberhasilan yang beragam. Meskipun mereka memiliki halaman yang jauh lebih cepat, mereka harus mendesain ulang sepenuhnya fungsionalitas dan pengalaman pengguna di sekitar keterbatasan AMP. Area kompleks situs web, seperti pembayaran, tidak dapat dibuat di AMP, sehingga pengguna diarahkan ke HTML standar atau checkout aplikasi web progresif (PWA).

Meskipun AMP adalah proyek yang sangat menarik dan telah diadopsi dengan baik di industri berita, AMP belum menunjukkan daya tarik nyata dengan e-commerce. Jika Google terus memperluas fungsionalitas yang tersedia, saya dapat melihat ini menjadi alat yang layak untuk e-niaga.

Menjadi adaptif

Sebagian besar situs web e-niaga sekarang dibuat secara responsif di mana tata letaknya akan beradaptasi secara dinamis agar sesuai dengan layar yang sedang dilihat. Ini tentu lebih baik daripada memiliki versi seluler dan desktop yang terpisah dari situs web Anda, dan umumnya berarti situs Anda akan bekerja dengan baik di berbagai ukuran layar yang tersedia.

Namun, dengan desain yang responsif, aset yang sama cenderung digunakan, apa pun perangkat yang digunakan untuk melihat situs web. Spanduk dan gambar produk seringkali hanya ditampilkan dalam ukuran yang lebih kecil, atau bahkan disembunyikan di tampilan seluler, tetapi file besar tetap diunduh.

Di sinilah elemen desain adaptif dapat digunakan. Alih-alih membuat desain lancar yang berubah secara dinamis ke ukuran layar, situs web adaptif memiliki beberapa tata letak tetap yang dirancang untuk ukuran layar tertentu. Hal ini memungkinkan desainer untuk mengontrol dan mengoptimalkan pengalaman pengguna dengan ketat untuk setiap ukuran layar tertentu.

Meskipun ini lebih kompleks dan memakan waktu untuk diterapkan, salah satu manfaat kecepatan utama adalah bahwa alih-alih hanya menampilkan gambar yang lebih besar dalam ukuran yang lebih kecil di perangkat seluler, Anda akan memuat gambar tertentu yang dioptimalkan untuk seluler di perangkat itu, sehingga mengurangi waktu muat. Dalam desain responsif, Anda dapat menyembunyikan elemen desktop tertentu saat situs dilihat di seluler. Dalam desain adaptif, Anda bahkan tidak memuatnya sama sekali.

Salah satu alternatif pragmatis untuk sepenuhnya adaptif adalah dengan menggunakan JavaScript dalam desain responsif Anda untuk mendeteksi ukuran layar yang digunakan dan memastikan bahwa gambar yang dioptimalkan untuk seluler diminta dan ditampilkan, bukan sekadar menampilkan gambar yang lebih besar dengan ukuran yang lebih kecil. Ini memastikan bahwa hanya gambar dan konten yang ditampilkan yang diminta dan karenanya diunduh sambil tetap memberikan manfaat dari desain responsif.

Ada banyak cara berbeda untuk mempercepat halaman situs e-niaga seluler Anda. Beberapa melibatkan pengembangan, beberapa melibatkan penggunaan layanan pihak ketiga, dan beberapa melibatkan keseimbangan antara desain dan fungsi.