Berbagi teknologi

Panduan Memulai Kinerja Web-1.2 Menganalisis Kinerja Web Ritel Online dan Arah Optimasi

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Membuat pelanggan senang adalah rahasia sukses di bidang ritel. Memberikan pengalaman online yang cepat dan konsisten telah terbukti meningkatkan secara signifikan setiap metrik yang penting bagi pengecer—mulai dari tingkat konversi dan pendapatan hingga retensi dan pengenalan merek.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Garis besar artikel ini:

  • Kecepatan halaman mempengaruhi data bisnis retail online

  • Bagaimana membandingkan kecepatan situs web Anda dengan pesaing Anda

  • Memulai Pengoptimalan Kinerja: Analisis apa yang memperlambat halaman Anda, mulai dari gambar dan pihak ketiga hingga stylesheet dan font khusus, dan apa yang dapat Anda lakukan untuk mengatasinya

Kecepatan halaman mempengaruhi data bisnis retail online

Bagi sebagian besar pengecer online, kecepatan halaman memiliki dampak terukur terhadap keuntungan. Bahkan perbaikan kecil pun dapat meningkatkan metrik seperti tingkat konversi secara signifikan.Misalnya

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Bagaimana menganalisis hubungan antara kinerja situs web dan data konversi bisnis

Tapi bagaimana dengan situs web Anda? Untuk memahami dampak peningkatan kecepatan halaman di situs Anda, Anda perlu melihat data Real User Monitoring (RUM) Anda.Diagram asosiasi adalah cara terbaik untuk mengomunikasikan kinerja kepada semua orang di bisnis Anda. Anda dapat menggunakan RUM untuk membuat visualisasi ini yang memungkinkan pemangku kepentingan paling non-teknis sekalipun dapat dengan mudah melihat bagaimana kinerja berkorelasi dengan keterlibatan pengguna dan metrik bisnis seperti rasio pentalan dan rasio konversi.

Bagan korelasi memberi Anda tampilan histogram dari semua lalu lintas pengguna, yang dibagi menjadi beberapa grup berdasarkan metrik kinerja seperti perenderan awal, pengambilan konten maksimum, dan jumlah interaksi hingga pengundian berikutnya. Diagram mencakup hamparan yang menunjukkan metrik keterlibatan pengguna atau metrik bisnis (seperti rasio pentalan atau rasio konversi) yang terkait dengan setiap grup. Dengan cara ini Anda dapat melihat hubungan antara kinerja, keterlibatan pengguna, dan bisnis Anda secara sekilas.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Seperti yang Anda lihat dalam grafik korelasi ini, pada waktu penarikan konten maksimum (LCP) 1,1 detik, tingkat konversi mencapai puncaknya di atas 6%. Saat LCP melambat, tingkat konversi turun dengan cepat dan turun di bawah 3% dalam 2 detik. Seperti yang dapat dilihat di atas, mengoptimalkan kinerja situs web untuk mengurangi waktu LCP dapat menghasilkan konversi yang lebih tinggi secara keseluruhan dan pendapatan yang lebih banyak.

Bagaimana situs web Anda dibandingkan dengan pesaing Anda?

Dengan SpeedCurve Sintetis Seperti Pemantauan Kinerja Komprehensif, Anda dapat menjalankan tes kecepatan halaman di situs web lain seperti yang Anda lakukan di situs web Anda sendiri. Ini berarti Anda mendapatkan semua data, tangkapan layar, dan slide yang sama, kaya, dan bagus untuk perbandingan.

MilikmuTolok Ukur Kompetitif Dasbor juga memungkinkan Anda menelusuri dan fokus pada hal-hal seperti pembuatan halaman. Halaman itu ditampilkan dua kali lebih cepat dari halaman Anda...apa perbedaannya? Apakah mereka memiliki lebih banyak JavaScript? lebih sedikit? Apakah Anda membuat 400 permintaan dan mereka hanya membuat 80? Inilah tempat untuk mencari tahu.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Tolok Ukur Kecepatan Halaman adalah dasbor yang dapat dilihat oleh publik yang menampilkan cuplikan kinerja terkini dari retailer terkemuka di AS, UE, Inggris, dan Jepang.

Memulai Pengoptimalan Kinerja

Untuk memberikan pengalaman online yang luar biasa dan cepat, mulailah dengan menanyakan dua pertanyaan pada diri Anda sendiri:

  • Apa yang menyebabkan laman saya tampak lambat bagi pengguna?

  • Apa yang bisa saya lakukan?

Kabar baiknya adalah sebagian besar masalah yang memperlambat halaman pembelanja terjadi di halaman Anda, yang berarti Anda dapat mengontrolnya. Berikut ikhtisar masalah kinerja paling umum di situs ritel, serta cara melacak dan memperbaikinya.

Apa yang menyebabkan halaman web Anda melambat? Sebagian besar masalah kinerja disebabkan oleh empat alasan:

  • Pihak ketiga seperti pelacak dan penganalisis

  • lembar gaya

  • Font khusus

  • Ukuran halaman, terutama ukuran gambar

skrip pihak ketiga

Saat ini, halaman web ritel pada umumnya dapat berisi hingga 75 skrip pihak ketiga, seperti pelacak dan suar analitik.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Pihak ketiga menambah banyak nilai dengan meningkatkan konversi (melalui suar lokasi) dan membantu Anda memahami pengguna dengan cara yang belum pernah ada sebelumnya (melalui tag analitik), sehingga mereka tidak akan hilang dalam waktu dekat. Namun hal ini dapat secara signifikan memengaruhi cara halaman Anda dirender (atau bahkan apakah halaman dirender sama sekali!).

Yang dapat Anda lakukan: Pantau kinerja pihak ketiga

Mulailah dengan mengambil pendekatan proaktif untuk memahami potensi kerugian kinerja yang mungkin ditimbulkan oleh pihak ketiga.

Anda tidak dapat memperbaiki apa yang tidak diukur.Inilah yang kami buat di SpeedCurveDasbor pihak ketiga khususalasan sehingga Anda dapat melihat sekilas bagaimana kinerja pihak ketiga, melacak masing-masing skrip, danTetapkan anggaran kinerja.

Setelah Anda memahami kinerja skrip pihak ketiga, Anda dapat menggunakan data historis untuk mengembangkan SLA dengan vendor.

studi kasus: M&S merevolusi kinerja dengan berfokus pada konten pihak ketiga

Ukuran gambar dan halaman

Meskipun ukuran halaman tidak selalu berkorelasi dengan pengalaman pengguna yang lebih lambat, hal ini sering kali berkorelasi. Gambar berukuran besar yang tidak dioptimalkan seringkali menjadi penyebabnya.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Selain mengoptimalkan gambar Anda (untuk memastikan Anda tidak memberikan 1MB sumber daya kepada pengguna Anda!), Anda juga harus memastikan bahwa gambar terpenting Anda (seperti gambar produk utama Anda) dirender sedini mungkin.

Yang dapat Anda lakukan: Buat anggaran kinerja untuk metrik terkait gambar

Anggaran dan peringatan kinerja adalah cara terbaik untuk mengatasi penurunan kinerja . Penganggaran kinerja dimulai dengan tim Anda (semua orang: pemasar, desainer, dan pengembang) menyetujui prinsip-prinsip pengalaman pengguna dan kecepatan situs. Pertama, Anda perlu memutuskan metrik mana yang ingin Anda lacak, lalu menetapkan ambang batas berdasarkan kinerja sebelumnya.

Untuk gambar, berikut beberapa metrik yang perlu dipertimbangkan:

  • Penarikan Konten Maksimum – Ini adalah ukuran elemen visual terbesar (gambar atau video) di area pandang. LCP berasal dari GoogleMetrik Jaringan IntiPertama, ini adalah sekumpulan metrik untuk algoritma peringkat pencarian Google, jadi ada baiknya untuk melacaknya.

  • Ukuran gambar – Ukuran total semua gambar di halaman. Ini adalah cara yang bagus untuk melihat sekilas apakah gambar berukuran besar dan tidak dioptimalkan telah ditambahkan ke halaman Anda.

  • Permintaan Gambar – Jumlah total gambar pada halaman.

studi kasus: Bagaimana Zillow menjadi lebih besar, lebih cepat, dan lebih menarik dengan anggaran terbatas

lembar gaya

Style sheet adalah keuntungan bagi web modern. Mereka memecahkan berbagai masalah desain mulai dari kompatibilitas browser hingga pemeliharaan dan pembaruan desain. Tanpa stylesheet, kita tidak akan mendapatkan hal-hal hebat seperti desain responsif.

https://blog-img.speedcurve.com/img/488/f8cb762-blocking-resources.png?auto=format,compress&fit=max&w=2000

Namun, style sheet yang dijalankan dengan buruk dapat menyebabkan sejumlah masalah kinerja. Masalah ini mencakup CSS yang memerlukan waktu terlalu lama untuk diunduh dan diurai, serta penempatan stylesheet yang tidak tepat sehingga membuat halaman lainnya tidak dapat dirender.

Apa yang dapat Anda lakukan: Pelajari style sheet mana yang mungkin mencegah halaman Anda dirender

Sekali lagi, Anda tidak dapat memperbaiki apa yang tidak Anda ukur. Alat pemantauan komprehensif Anda dapat memberi tahu Anda:

  • Berapa banyak stylesheet yang ada di halaman saya, dan berapa banyak yang mencegah halaman dirender?

  • Apakah angka ini naik atau turun?

  • Seberapa besar permintaan CSS?

  • Bagaimana perilaku stylesheet untuk masing-masing pihak ketiga saya?

Font khusus

Font khusus memberi desainer kendali yang belum pernah terjadi sebelumnya atas font yang digunakan dalam desain mereka. Keinginan untuk mengontrol inilah yang menjadi alasan mengapa font khusus melonjak popularitasnya. Namun di balik popularitas ini terdapat harga kinerja.

Transfer gambar tautan eksternal gagal. Situs sumber mungkin memiliki mekanisme anti-lintah. Disarankan untuk menyimpan gambar dan mengunggahnya secara langsung.

Beberapa font memerlukan banyak kode CSS, sementara font lainnya memerlukan banyak JavaScript atau hosting eksternal - semuanya dapat memperlambat rendering halaman secara signifikan.

Yang dapat Anda lakukan: Melacak ukuran font dan kecepatan rendering

Selain melacak ukuran font dan jumlah permintaan, Anda juga dapat menggunakan SpeedCurve untuk mengukur kapan elemen H1 pertama selesai dirender. (Di SpeedCurve, kami menyebut indikator ini Pahlawan H1. Ini adalah ketiganyaWaktu rendering pahlawan satu. ) Jika situs web Anda menggunakan font khusus, font tersebut kemungkinan besar akan diterapkan ke salinan H1, menjadikan metrik ini cara yang efektif untuk mengukur seberapa cepat font khusus dirender.

Seperti semua metrik lain yang kami lacak untuk Anda, Anda bisaBuat anggaran kinerja dan terima pemberitahuan bila melebihi ambang batas.

studi kasus: NerdWallet menggunakan metrik H1 Render untuk membantu meningkatkan kecepatan pemuatan font sebesar 30%