Speed atau kecepatan selalu menjadi faktor penting untuk dipertimbangkan saat mengoptimalkan kinerja websiste Anda. Tetapi dengan kemajuan eCommerce, tingkat pengalaman di tempat yang diharapkan oleh pelanggan saat ini telah meningkat, memberikan banyak tekanan pada merek untuk menemukan keseimbangan yang tepat antara kinerja, fungsionalitas, dan desain.

Shopify beberap waktu lalu ini meluncurkan Page Speed Score mereka, yang didasarkan pada metrik kinerja Google Lighthouse, untuk memberi skor kecepatan dari 0 - 100. Anda seharusnya tidak mengharapkan skor sempurna, tetapi Anda dapat mengharapkan angka ini berfluktuasi berdasarkan tema , jenis fitur, dan aplikasi yang Anda gunakan.

Untuk benar-benar memahami apa arti kinerja bagi bisnis Anda, kecepatan bukan hanya faktor lain yang harus Anda perhatikan. Sebaliknya, laporan kecepatan online Shopify adalah sekedar insight untuk meningkatkan kinerja situs Anda.

Mengapa kecepatan penting?

Tidak peduli seberapa luar biasa produk Anda, halaman web yang lambat tidak hanya bikin gemas pelanggan, tetapi juga dapat merugikan Anda.

Reaksi berantai dari situs yang memuat lambat

Kebanyakan orang akan setuju bahwa situs yang memuat lambat bukanlah pengalaman pelanggan yang ideal, tetapi sejauh mana itu penting?

Sementara kinerja situs selalu menjadi faktor dalam peringkat Pencarian, metrik Web Vitals adalah pertama kalinya Google benar-benar menentukan apa yang mereka anggap paling penting dalam kaitannya dengan kecepatan dan kinerja situs. Saat Anda fokus pada peningkatan metrik Web Vitals ini, Anda memberi Google alasan lain untuk memberi peringkat halaman Anda di atas pesaing.

Detik bisa terasa seperti berjam-jam bagi pelanggan Anda, dan berarti ribuan pendapatan yang hilang untuk Anda. Beberapa detik tambahan dapat memengaruhi kemampuan Anda untuk melibatkan pengunjung yang berarti rasio pentalan situs Anda semakin buruk setiap detik yang diperlukan untuk memuat halaman. Dan, penundaan satu detik dalam waktu buka halaman dapat mengakibatkan hilangnya 7% dalam konversi.

Temuan utama dari studi Deloitte Milidetik membuat Jutaan menemukan bahwa peningkatan kecepatan situs 0,1 detik menghasilkan peningkatan konversi sebesar 8,4% dengan pelanggan ritel dan peningkatan nilai pesanan rata-rata sebesar 9,2%.

Tapi sementara ada banyak keuntungan dengan kecepatan, di sinilah tindakan penyeimbangan benar-benar dimulai. Semakin banyak fitur dan solusi pihak ketiga yang Anda masukkan ke dalam situs untuk meningkatkan pengalaman pelanggan atau untuk menambahkan fungsionalitas pemasaran, semakin besar potensi dampak negatif terhadap kinerja situs Anda.

Apa penyebab utama situs lambat?

Berikut adalah beberapa yang paling umum kita lihat dalam urutan prevalensi, dan apa yang biasanya kita perhatikan terlebih dahulu.

Apps

Meskipun aplikasi adalah cara yang bagus untuk menambahkan fungsionalitas ke toko Anda, penting untuk dipahami bahwa mereka memiliki kemampuan untuk menjadi masalah bagi kinerja situs Anda. Masing-masing aplikasi memuat kumpulan gaya dan skripnya sendiri yang bersaing dengan elemen lain dari situs Anda untuk perangkat dan sumber daya jaringan, yang pada akhirnya membuat laman yang memuat lebih lambat.

Meskipun kami tidak di sini untuk mencegah penggunaan aplikasi, kami mendorong untuk melakukan tinjauan kritis apakah itu diperlukan. Audit aplikasi adalah sesuatu yang kami lakukan sebagai bagian dari semua audit kecepatan kami di The Working Party. Terutama pada level Shopify Plus dengan banyak aplikasi terpasang — kami melihat kasus fungsi ganda dan mencari cara untuk membangun fungsionalitas yang sama dari aplikasi tertentu ke dalam tema khusus.

JavaScript dan CSS yang memblokir perenderan

HTML adalah format berbasis teks yang kami kirim ke browser, untuk memberi tahu elemen mana yang ingin kami buat untuk halaman tertentu. Ini termasuk sumber daya eksternal seperti gambar, gaya, dan skrip yang kita perlukan untuk membuat situs web interaktif yang indah.

Dalam istilah sederhana, sama seperti Anda membaca paragraf ini, browser membaca HTML dari atas ke bawah saat tiba melalui jaringan. Saat melakukannya, ia akan menemukan gaya dan skrip yang kami sebutkan sebelumnya. Ketika menemukan ini, browser akan berhenti sejenak untuk mengunduh dan kemudian menerapkan atau menjalankan sumber daya sebelum melanjutkan dengan sisa HTML di bawah ini.

Perilaku ini dikenal sebagai 'pemblokiran render' dan merupakan salah satu penyebab utama situs yang memuat lambat. Dengan menggunakan praktik terbaik modern, seperti menunda atau memuat sumber daya ini secara asinkron, kami dapat secara signifikan mengurangi dampak sumber daya ini terhadap pemuatan elemen halaman lainnya.

Mengingat dampak pada performa halaman dari aset eksternal mana pun, jika memungkinkan, kami juga akan secara selektif memuat aset ini hanya pada halaman yang memerlukannya. Ini memastikan kami tidak memengaruhi kinerja situs tanpa manfaat fungsional.

Image yang tidak dioptimalkan dengan baik dan tidak lazy-load

Sama halnya dengan pemuatan sumber daya asinkron atau ditangguhkan yang dijelaskan di atas, gambar yang kurang penting dapat ditangguhkan hingga setelah halaman awal Anda dimuat — itulah yang kami sebut sebagai pemuatan lambat.

Ini memungkinkan konten di bagian atas halaman Anda dimuat dengan cepat tanpa harus mengumpulkan semua file dan sumber daya yang belum terlihat, seperti memuat gambar produk dalam pop-up "tampilan cepat" hanya setelah pelanggan memintanya, atau malas memuat gambar di penggeser yang tidak ada di slide pertama.

Gambar sering kali merupakan aset terbesar di halaman Anda, jadi gambar merupakan target yang jelas untuk pengoptimalan guna mengurangi ukuran halaman. Shopify akan secara otomatis menerapkan beberapa pengoptimalan ke gambar JPG dan PNG yang diunggah di Admin Shopify, namun, alat seperti squoosh.app dan image-optim juga tersedia untuk mengurangi ukuran file sebelum mengunggah ke Shopify.

Dalam tema itu sendiri, pengembang harus memastikan ukuran gambar yang diminta untuk elemen tertentu (seperti gambar mini produk pada halaman koleksi) sesuai dengan ukuran tampilan. Tema yang tidak dioptimalkan akan sering meminta gambar berukuran besar yang kemudian ditampilkan dalam ukuran yang jauh lebih kecil kepada pengguna — secara efektif membuang-buang resolusi dan memperlambat pemuatan halaman.

Carousel dan animasi yang diterapkan dengan tidak benar

Carousel memungkinkan beberapa penawaran, produk, dan pesan untuk disampaikan dalam satu ruang di situs web Anda. Studi benchmark UX terbaru Baymard mengungkapkan hanya 28% dari situs desktop eCommerce AS dan Eropa teratas yang memiliki carousel. Namun, angka ini turun dari 32% pada tahun 2016 dan 52% pada tahun 2013.

Sementara penggunaan carousel tampaknya menurun, masih banyak situs eCommerce yang menggunakan carousel — terutama di beranda mereka. Tetapi carousel beranda dapat menyebabkan lebih banyak kerugian daripada kebaikan jika tidak diterapkan dengan benar.

Seperti yang telah kita bahas di bagian di atas, banyak carousel dibuat menggunakan library pihak ketiga dengan skrip yang harus dimuat agar carousel berfungsi dengan benar, dan sering kali menampilkan sejumlah slide berbasis gambar. Jika tidak diterapkan dengan benar dengan skrip yang ditangguhkan dan gambar yang dimuat lambat, carousel ini dapat memiliki dampak negatif yang sangat besar pada kinerja halaman.

Kode tema yang tidak dioptimalkan

Tema Shopify dibuat menggunakan bahasa templating yang dikenal sebagai Liquid, serta HTML, CSS, dan JavaScript standar yang ditemukan di semua situs. Penggunaan Liquid membantu memperkuat penyesuaian tema drag-and-drop yang tersedia di Theme Customizer — keuntungan inti dari Shopify versus platform lama — serta menyediakan data yang digunakan untuk mengisi halaman. Namun, seperti semua bahasa pemrograman, Liquid dapat diimplementasikan dengan buruk.

Sebagai bagian dari pekerjaan kecepatan situs kami di The Working Party, kami melihat secara kritis kode Liquid ini untuk menemukan dan memperbaiki kemacetan kinerja apa pun seperti loop logika yang tidak efisien atau penggunaan praktik usang yang menghambat pemuatan halaman awal.

Pemuatan font yang tidak tepat

Sama halnya dengan sumber daya eksternal lainnya yang telah kita bahas, font adalah sumber daya lain yang dapat memblokir render jika tidak diterapkan dengan benar. Jika Anda menggunakan font kustom, Anda dapat menggunakan pola kode modern untuk memuat font sebelum diminta, dan menginstruksikan browser untuk menggunakan font placeholder saat font kustom dimuat. Penggunaan font pengganti atau pengganti membantu mencegah lompatan tata letak pada halaman, dan berarti pengguna dengan koneksi yang sangat lambat masih dapat langsung membaca konten Anda.

Dengan pramuat, pengguna rata-rata atau koneksi cepat bahkan tidak akan melihat pertukaran terjadi, tetapi mendapatkan semua peningkatan kinerja — win-win!

Alat Tes kecepatan

Ada banyak alat gratis yang tersedia online untuk memeriksa kecepatan situs Anda — Google PageSpeed ​​Insights umumnya merupakan awal yang baik. Dan sekarang, pedagang Shopify dapat dengan mudah memeriksa kecepatan toko mereka di dasbor Shopify mereka menggunakan laporan kecepatan toko online Shopify. Penting untuk diingat bahwa skor ini berasal dari negara lain seperti Australia / Amerka, tidak mungkin sama dengan pengalaman pengunjung situs sebenarnya.

Mencapai keseimbangan antara kinerja dan fungsionalitas

Dengan meningkatkan pengalaman pengguna melalui etalase yang lebih berperforma, Anda menghilangkan frustrasi dan gesekan yang mungkin menghalangi pengguna untuk melakukan pembelian, dan oleh karena itu meningkatkan tingkat konversi.

Sebuah situs web tetap dapat memiliki kinerja yang baik dan menjadi merek dengan gambar besar yang bagus. Demikian pula, fitur seperti permintaan buletin, produk yang direkomendasikan, dan obrolan langsung semuanya masih memungkinkan dan disarankan.

Coba Shopify Gratis 

mau coba Shopify gratis? klik link disini.