E-commerce: Persepsi kecepatan situs web membuat semua perbedaan

Kita semua tahu bahwa kecepatan situs web dapat membuat perbedaan besar pada tingkat konversi dan kekakuan situs web e-niaga.

Satu studi kasus oleh SOASTA mengklaim bahwa meningkatkan kecepatan pemuatan halaman seluler meningkatkan tingkat konversi lebih dari 25%. Dalam upayanya yang terus-menerus untuk mengutamakan pengguna, Jeff Bezos, pendiri dan CEO Amazon, terkenal terobsesi dengan kecepatan pemuatan halaman dan terus-menerus mendorong karyawannya untuk mengurangi kecepatan halaman situs web Amazon.

Munculnya dominasi seluler telah memperkuat kebutuhan akan kecepatan pemuatan halaman yang lebih cepat karena pengguna akan sering menjelajahi situs web dengan koneksi yang lebih lambat.

Ada banyak alat di luar sana untuk membantu Anda meningkatkan kecepatan halaman web seperti Yslow atau Google Pagespeed Insights, dan ada berbagai praktik terbaik seperti minifikasi dan penggabungan css dan js, penggunaan sprite css, dan meminimalkan permintaan jaringan yang pengembang front-end harus mengikuti untuk memastikan bahwa kecepatan halaman dimaksimalkan.

Masalah yang kami miliki adalah bahwa setelah Anda mengikuti praktik terbaik standar dan menyadari kemenangan besar, Anda akan segera mulai melihat hasil yang semakin berkurang pada upaya untuk meningkatkan kecepatan halaman secara keseluruhan.

Anda dapat menghabiskan banyak waktu untuk membuat peningkatan bertahap yang semakin kecil dan ini akan menjadi proses yang mahal dan memakan waktu. Pengembang front-end dengan keterampilan dan pengalaman yang diperlukan untuk bekerja di level ini ternyata sangat langka dan mahal.

Ada beberapa hal yang tidak dapat Anda kendalikan seperti latensi jaringan atau kecepatan koneksi seluler, sehingga ada batasan untuk apa yang dapat dicapai dengan kecepatan halaman mentah. Pada koneksi 3G di mana saja antara 600ms dan 1s dikonsumsi oleh overhead jaringan wajib, yang tidak dapat Anda lakukan apa-apa. Berdasarkan waktu buka halaman yang diinginkan selama 2 detik, ini memberi kita hanya 1 detik untuk dimainkan. Itu tidak terlalu banyak.

Tidak dapat disangkal bahwa kecepatan halaman mentah sangat penting dan semua pengembang harus mengikuti praktik terbaik standar seminimal mungkin.

Namun, artikel ini tidak akan membahas cara membuat halaman Anda dimuat lebih cepat. Ada banyak artikel di luar sana tentang itu dan semuanya sedikit teknis.

Artikel ini akan fokus pada persepsi kecepatan halaman.
Mana yang lebih penting: Seberapa cepat halaman dimuat atau seberapa cepat menurut pengguna untuk memuat?

Tentunya persepsi adalah yang paling penting bagi pengguna.

Kecepatan situs web: Kesan pertama

Mari fokus pada halaman beranda situs web Anda. Ini mungkin berisi navigasi teratas, bilah pencarian, spanduk pahlawan, mungkin tautan ke kategori utama, korsel, dan beberapa konten. Halaman beranda cenderung berisi konten yang cukup berat dan memuat semua konten ini dengan cepat pada koneksi seluler akan menjadi tantangan besar.

Kuncinya di sini adalah memprioritaskan pemuatan konten penting terlebih dahulu, di depan konten lain – berikan pengguna sesuatu yang penting untuk dilihat secepat mungkin.

Saat mereka memproses informasi penting ini, Anda kemudian dapat mulai memuat tingkat konten berikutnya.

Pada perangkat seluler, sebagian besar konten akan dimulai di paro bawah dan oleh karena itu harus dimuat setelah konten di paro atas. Ini adalah praktik umum untuk menggabungkan dan mengecilkan JavaScript. Ini biasanya dipandang sebagai praktik terbaik tetapi dapat mencegah Anda memprioritaskan pemuatan JavaScript penting daripada kode yang kurang penting. Sebagai gantinya, Anda dapat mempertimbangkan untuk memisahkan JavaScript yang diperkecil dan digabungkan dan memuatnya secara bertahap sesuai kebutuhan. Tidak perlu memuat JavaScript yang diperlukan untuk melakukan pencarian bahkan sebelum Anda memuat kotak pencarian. Pengguna tidak akan mengetik karakter ke dalam kolom pencarian setidaknya selama beberapa detik saat memuat halaman.

Mari kita lihat situs yang melakukan ini dengan sangat baik. Amazon telah membagi pengiriman aset dan konten untuk memastikan bahwa pengguna diberikan konten penting sesegera mungkin dan mereka kemudian secara bertahap memuat aset dalam urutan prioritas.

Tes ini dijalankan pada simulator iPhone 6 pada koneksi 3G yang baik dan caching dinonaktifkan. Setelah halaman pertama kali dimuat, saya memulai penyegaran keras.

Hanya dalam waktu lebih dari 600 md, saya memiliki sesuatu yang mulai dimuat dengan nama saya di header. Anda juga akan melihat bahwa hanya 6 panggilan jaringan yang dilakukan dan 5 aset dimuat (3 file css dan 2 gambar).

Hanya 50 ms kemudian saya sekarang melihat komponen utama dari header serta spanduk pahlawan utama. Saya sudah memiliki persepsi tentang kecepatan karena konten utama dikirimkan kepada saya dengan sangat cepat dan ada sesuatu yang harus diproses oleh mata dan otak saya saat konten tambahan sedang dimuat.

Setelah hanya 1 detik navigasi utama dimuat. Anda akan melihat bahwa tidak ada bilah gulir yang terlihat pada tahap ini. Artinya, saat ini tidak ada konten di paro bawah. Waktu yang berharga tidak terbuang percuma untuk memuat konten yang tidak dapat dilihat pengguna ini. Anda juga akan melihat bahwa hanya 13 permintaan yang telah dibuat sejauh ini.

Hanya dalam waktu kurang dari 2 detik, saya sekarang memiliki bagian baru dari konten penting.

Dalam waktu kurang dari 3 detik, saya sekarang melihat halaman telah dimuat seluruhnya sedangkan halaman sebenarnya hanya membutuhkan waktu kurang dari 5 detik untuk memuat secara keseluruhan. Ini menunjukkan bahwa saya menganggap situs tersebut dimuat sepenuhnya padahal sebenarnya hanya 60% dimuat.

Waktu pengiriman konten yang sebenarnya akan bervariasi dari orang ke orang, tetapi ini menggambarkan dengan sangat jelas bagaimana Amazon memprioritaskan pemuatan konten seluler untuk memastikan bahwa konten penting dimuat secepat mungkin dan bahwa pengguna menganggap situs mulai dimuat dengan sangat cepat.

Sekarang mari kita lihat situs web yang tidak melakukannya dengan baik. Pengujian ini dijalankan menggunakan alat dan kecepatan jaringan yang sama persis dengan pengujian Amazon sebelumnya. Sementara situs Charles Tyrwhitt memang memprioritaskan beberapa konten, ada banyak lagi yang bisa dilakukan untuk mendekati pengoptimalan Amazon.

Saya tidak melihat konten apa pun selama hampir 7,5 detik. Segera saya memiliki persepsi bahwa situs ini lambat di perangkat seluler saya. Meskipun situs memprioritaskan konten header serta spanduk pahlawan, Anda dapat melihat bahwa lebih dari 90 permintaan telah dibuat pada saat ini dan, seperti yang saya lihat pada bilah gulir, jelas bahwa konten harus dimuat di paro bawah.

Setelah 8,5 detik saya dapat melihat bahwa korsel mulai dimuat. Jumlah permintaan tidak berubah yang menunjukkan bahwa sebagian besar permintaan terkait konten dibuat tepat di awal pemuatan halaman.

Tidak sampai hampir 22 detik saya melihat bahwa situs tersebut sekarang telah terisi penuh. Halaman tersebut sebenarnya membutuhkan total 28,4 detik untuk dimuat sepenuhnya. Ini menunjukkan bahwa saya melihat bahwa halaman itu dimuat sepenuhnya padahal sebenarnya 77% dimuat.

Sangat mudah untuk melihat perbedaan yang jelas antara 2 pengalaman. Sementara halaman beranda seluler Amazon dimuat secara signifikan lebih cepat daripada halaman beranda Charles Tyrwhitt, upaya telah dilakukan untuk memastikan bahwa pengguna menganggapnya lebih cepat. Pengguna mulai melihat sesuatu yang dimuat dalam 12,5% dari total waktu buka halaman sedangkan pengguna situs web Charles Tyrwhitt hanya melihat sesuatu terjadi dalam 26% dari total waktu buka halaman. Halaman beranda Amazon telah membuat 6 permintaan jaringan sebelum pengguna melihat kemajuan sedangkan halaman beranda Charles Tyrwhitt telah membuat 90 permintaan.

Ini tidak dimaksudkan untuk terlalu kritis terhadap Charles Tyrwhitt karena mereka, sama sekali tidak, unik dalam cara mereka membangun situs web mereka. Praktik terbaik yang diterima telah diikuti di sejumlah bidang tetapi tampaknya lebih banyak yang dapat dilakukan untuk meningkatkan persepsi kecepatan serta kecepatan sebenarnya.

Tingkatkan kecepatan situs web dengan memprioritaskan CSS

Cukup umum bagi pengembang front-end untuk menempatkan sebagian besar css situs web dalam beberapa file dan selalu menggunakan css eksternal, bukan inline. Masalah yang ditimbulkannya adalah file css besar perlu dimuat sebelum konten apa pun dapat ditampilkan kepada pengguna.

Solusi untuk ini adalah dengan membagi file css Anda dan memuatnya secara berurutan dengan konten penting. Jika kita melihat contoh Amazon, mereka memuat file css yang hanya berukuran 6,5k sebagai salah satu dari 6 permintaan awal mereka. File ini berisi css yang diperlukan untuk menata konten penting di halaman beranda mereka. Faktanya, ukuran total semua file css yang diminta sebelum pengguna melihat konten di halaman beranda seluler Amazon adalah di bawah 40k sedangkan di halaman utama Charles Tyrwhitt lebih dari 500k.

Praktik ini memungkinkan Anda mengirimkan konten penting kepada pengguna dengan sangat cepat dan membantu menegakkan persepsi kecepatan.

Lakukan hal yang sama dengan JavaScript

Selain memprioritaskan css, Anda harus mempertimbangkan bagaimana Anda juga melakukannya dengan JavaScript. Hampir semua situs web e-niaga akan sangat bergantung pada JavaScript untuk berfungsi. Ini boleh saja selama JavaScript tidak memblokir pemuatan konten penting. Jika saya mengambil contoh situs web Charles Tyrwhitt lagi dan menonaktifkan JavaScript di browser saya, sekarang saya melihat pemuatan konten dalam 4,5 detik. Ini adalah perubahan besar dalam persepsi saya tentang kecepatan situs web itu dan JavaScript yang dimuat sebelum konten penting tidak berdampak pada konten itu dan oleh karena itu tidak ada alasan mengapa JavaScript tidak dapat dimuat setelah konten itu.

Ada banyak hal yang dapat dipelajari oleh pengembang web dari cara situs web seperti Amazon berfokus pada persepsi kecepatan situs web mereka serta kecepatan sebenarnya. Meskipun situs web mereka jelas sangat cepat, pengguna menganggapnya lebih cepat karena cara mereka memprioritaskan menampilkan konten penting kepada pengguna sebelum hal lain.

Banyak yang telah dibuat dari dampak kecepatan pada tingkat konversi Anda, dan pengecer harus mempertimbangkan untuk berinvestasi dalam mengoptimalkan kinerja situs web yang mereka rasakan bersama dengan kecepatan situs web yang sebenarnya.