Seberapa Lambat Kecepatan Halaman Seluler Merusak Tingkat Konversi Anda

Ada kemungkinan besar desain halaman arahan pasca-klik yang buruk membebani Anda setidaknya setengah dari anggaran PPC Anda, menurut penelitian terbaru dari Google.

Data dari raksasa mesin pencari menunjukkan bahwa lebih dari satu dari dua pengguna internet seluler akan meninggalkan halaman web jika tidak dimuat dalam 3 detik. Dan pada Februari 2017, rata-rata halaman arahan pasca-klik seluler membutuhkan waktu 22 detik yang memalukan untuk dimuat.

Jika Anda berhenti untuk menghitung, Anda mungkin menyadari betapa merugikannya halaman yang memuat lambat bagi keuntungan Anda.

Jika Anda menghasilkan 5.000 pengunjung halaman arahan pasca-klik seluler per bulan dan mengonversi 5% dari mereka, Anda akan kehilangan 1.500 konversi sepanjang tahun. Jika pemuatan memakan waktu lebih dari 3 detik, setengah dari pengunjung Anda — 2.500 per bulan dalam hipotetis ini — bahkan tidak melihat seluruh halaman arahan pasca-klik Anda sebelum mereka terpental. Yang lebih buruk, anggaran PPC Anda terkuras setiap kali mereka melakukannya.

Tapi mungkin halaman Anda tidak dimuat dalam 3 detik. Mungkin memuat dalam 5 detik, atau 6 detik, atau 10 detik. Jika itu masalahnya, data dari Google menunjukkan bahwa Anda kehilangan lebih banyak lagi.

Tolok ukur kecepatan halaman seluler baru

Bagaimana halaman Anda ditumpuk dengan halaman lain di web? Untuk menetapkan beberapa tolok ukur baru untuk kecepatan pemuatan, Google menganalisis 900.000 halaman arahan pasca-klik seluler iklan di 126 negara pada awal 2017.

Apa yang mereka temukan adalah konfirmasi dari hipotesis mereka: Halaman seluler "membengkak" dengan terlalu banyak elemen.

Di antaranya, halaman dari sektor otomotif, ritel, dan teknologi rata-rata paling lama dimuat. Terlepas dari industrinya, beberapa data mengejutkan menunjukkan halaman arahan pasca-klik seluler secara keseluruhan meninggalkan banyak hal yang diinginkan.

Misalnya, 70% halaman yang dianalisis membutuhkan waktu 7 detik untuk memuat konten tepat di paro atas. Pada halaman yang sama, butuh lebih dari 10 detik untuk memuat konten visual di paro atas dan bawah.

Dengan bantuan beberapa algoritme lanjutan dari SOASTA, penelitian Google lainnya mengaitkan kecepatan pemuatan halaman dengan indikator kinerja utama yang lebih bermakna, seperti konversi dan rasio pentalan. Dalam sebuah posting blog, para peneliti menguraikan:

Kami membuat dua model pembelajaran mesin: satu untuk memprediksi konversi dan satu lagi untuk memprediksi rasio pentalan. Setiap model menggunakan data dunia nyata dari sampel besar situs e-niaga seluler, yang menghubungkan dampak dari 93 metrik halaman berbeda dari format gambar hingga sejumlah skrip. Sederhananya, kedua model mencari faktor situs seluler mana yang akan mengarahkan pembeli untuk membeli atau terpental. Model konversi memiliki akurasi prediksi 93%, dan model pantulan bahkan lebih akurat, pada 96%.

Dengan akurasi yang hampir tepat, model pembelajaran mesin menemukan bahwa saat waktu buka halaman meningkat dari satu menjadi tiga detik, kemungkinan pengunjung seluler terpental melonjak sebesar 32%. Dari sana, sebuah grafik menunjukkan, segalanya menjadi lebih buruk:

Seiring dengan rasio pentalan, penelitian menunjukkan, waktu buka halaman yang lambat juga dapat menurunkan konversi. Jadi apa pelakunya?

Para peneliti mengidentifikasi beberapa kelemahan desain ponsel utama.

Pembunuh kecepatan halaman arahan pasca-klik seluler terbesar

Kecepatan bukan hanya pencela konversi dan anggaran iklan berbayar; itu juga salah satu faktor peringkat mesin pencari Google. Jika halaman Anda tidak dimuat lebih cepat dari 3 detik yang disarankan, Anda membuang-buang uang dan tidak ditemukan. Salah satu masalah berikut bisa menjadi alasannya.

1. Terlalu banyak elemen halaman

Saat ini rata-rata halaman web memiliki ukuran yang sama, dalam data, seperti video game klasik “Doom:”

Pada 2.3MB, itu tumbuh menjadi tumpukan elemen yang tidak perlu. Dan perancangnya memiliki BSO — “sindrom objek mengkilap terang” — saran insinyur perangkat lunak, Ronan Cremin:

Saat web melewati masa remajanya yang canggung, kami membiarkan fitur merayap memegang dan akhirnya kekacauan menguasai kami. Modul galeri JavaScript baru? Tentu saja mengapa tidak? Oooh font web baru itu akan terlihat bagus di sini, tetapi mengapa tidak menambahkan alat analitik lain saat kita berada di sana? Haruskah saya repot-repot mengubah ukuran gambar 6.000 piksel ini? Nah, biarkan browser melakukannya, bekerja untuk saya.

Google telah menemukan bahwa "featuritus", sebagaimana Cremin menyebutnya, dapat memiliki dampak negatif yang drastis pada kecepatan pemuatan. Rata-rata halaman sekarang menampilkan ratusan hingga ribuan elemen — judul, gambar, tombol — disimpan di lusinan server. Ketika elemen-elemen tersebut tidak dioptimalkan, hasilnya bisa menjadi pengalaman pemuatan yang "tidak dapat diprediksi" dan "tidak stabil".

Para peneliti bahkan melangkah lebih jauh dengan mengidentifikasi jumlah elemen pada halaman sebagai prediktor konversi yang paling akurat. Kurang, mereka mengklaim, lebih. Ketika elemen halaman meningkat dari 400 menjadi 6.000, kemungkinan konversi pengunjung turun 95%.

Perancang papan atas internet, menurut data, telah mengetahui hal itu sejak 2014. Sementara ukuran halaman rata-rata telah tumbuh dengan mantap untuk sebagian besar situs web, 10 teratas telah berubah:

Bagi mereka, “berat” halaman (ukuran data) telah menurun selama beberapa tahun terakhir. Semua yang lain, tampaknya, adalah korban featuritus.

Menurut Google, 70% dari halaman yang mereka uji lebih dari 1MB, 36% adalah 2MB, dan 12% lebih dari 4MB. Akibatnya, kecil kemungkinan pengunjung bertahan lama. Melalui koneksi 3G yang cepat (kecepatan sebagian besar koneksi seluler di seluruh dunia), 1.49MB membutuhkan waktu sekitar 7 detik untuk dimuat.

Memecahkan masalah

Dalam kasus halaman yang sangat berbobot, solusi terbaik adalah pencegahan. Untungnya, pencegahan semudah mengatur apa yang disebut Google sebagai "anggaran kinerja". Sebelum Anda mulai membangun halaman Anda, tentukan seberapa cepat Anda ingin memuatnya (“anggaran”). Kemudian, rancang halaman Anda sesuai dengan anggaran Anda.

“Jauh lebih efisien untuk menyampaikan sesuatu dengan cepat jika itu merupakan bagian dari kriteria desain,” kata Hakan Nizam dari L'Oreal. “Ini akan membebaskan bandwidth pengembang. Ini akan memungkinkan pengembang untuk fokus pada faktor lain yang memengaruhi tingkat konversi. Percakapan cepat harus diselesaikan untuk beralih ke pembeda lainnya. ”

Dalam posting blog untuk Google, Jason Cohen menyamakan anggaran dengan batasan kreatif lainnya:

Memasukkan kecepatan sebagai bagian dari proses desain tidak berbeda dengan memperhitungkan keterbatasan media kreatif lainnya. Desainer tidak akan membuat iklan empat warna untuk publikasi cetak hitam-putih atau membuat video 30 detik untuk slot 15 detik. Jika kita tidak mendesain dalam batasan medium, hasilnya adalah pengalaman yang buruk.

Meskipun seluler menyalip lalu lintas internet desktop, saluran tersebut masih tertinggal dari desktop di sebagian besar metrik pengalaman pengguna. Desainer harus berhenti memperlakukan ponsel sebagai renungan. Ini adalah medianya sendiri, dan pengalaman pengguna harus mencerminkan hal itu.

Tentu saja, teknik "penganggaran" mengasumsikan Anda memulai dari awal. Jika Anda mencoba untuk mengoptimalkan halaman arahan pasca-klik yang sudah lamban, peneliti menyarankan untuk melakukan audit elemen Anda dan memantau skrip pihak ketiga Anda untuk menemukan mana yang paling berkontribusi terhadap bobotnya. Kemudian, turunkan skala untuk mengoptimalkannya.

2. Terlalu banyak gambar

Dalam penelitian mereka, satu gambar tertentu menarik perhatian penguji Google. Beratnya mencapai 16MB. Berulang kali, mereka terus menemukan gambar yang membuat halaman macet.

"Elemen grafis seperti favicon, logo, dan gambar produk dapat dengan mudah terdiri dari hingga dua pertiga (dengan kata lain, ratusan kilobyte) dari total berat halaman," para peneliti memperingatkan.

Dengan bantuan modul pembelajaran mesin mereka, mereka menemukan bahwa prediktor konversi paling akurat kedua adalah jumlah gambar pada halaman. Dibandingkan dengan halaman yang tidak berhasil mengonversi pengunjung, halaman yang dapat menampilkan gambar 38% lebih sedikit.

Memecahkan masalah

Salah satu cara termudah untuk meningkatkan kecepatan halaman Anda adalah dengan pengoptimalan gambar cepat. Lakukan yang terbaik untuk…

• Kurangi gambar yang tidak perlu

Apakah Anda benar-benar perlu menampilkan enam sudut berbeda dari produk Anda? Apakah foto stok itu benar-benar menambah nilai pada halaman arahan pasca-klik Anda? Apakah Anda perlu menyandikan teks dalam gambar, atau dapatkah Anda mengintegrasikan font pilihan Anda dengan Google Fonts atau Adobe Typekit? Jika jawabannya "tidak", pertimbangkan untuk memotong beberapa gambar dari desain Anda.

• Kurangi ukuran gambar yang diperlukan

Jika Anda memang membutuhkan semua gambar itu, beberapa alat dan strategi berbeda dapat membantu Anda menghemat bandwidth. Pertama, ketahui format file gambar Anda. Mengganti PNG dengan JPEG dapat menghemat banyak ukuran, dan pada gilirannya, kecepatan. Di sisi lain, itu juga akan mengurangi kualitas gambar Anda. Untuk lebih lanjut tentang cara memutuskan format mana yang akan digunakan, lihat posting ini.

Kedua, pikirkan tentang menggunakan alat. Para peneliti mengklaim bahwa 30% halaman dapat menghemat 250KB data dengan bantuan kompresor gambar. Guetzli dan Zopfli dari Google adalah dua yang patut dicoba.

3. Penggunaan JavaScript, waktu buka halaman penuh

Sebelum elemen seperti gambar dan tombol dapat ditampilkan kepada pengguna, kode HTML yang digunakan untuk membuat halaman harus diterima dan diinterpretasikan oleh browser. Waktu yang diperlukan dikenal sebagai "waktu siap DOM" — prediktor paling akurat dari page bouncing, para peneliti menemukan.

Data Google menunjukkan bahwa sesi pengguna yang terpental memiliki waktu siap DOM yang 55% lebih lambat daripada sesi yang tidak terpental. Perlambatan signifikansi itu sering disebabkan oleh JavaScript — sejenis kode yang menghentikan penguraian kode HTML — yang digunakan di banyak alat analitik pihak ketiga, iklan, dan widget sosial.

Daniel An dan Pat Meenan membandingkan perlambatan dengan restoran yang tidak terorganisir:

Bayangkan Anda berada di restoran dan pelayan Anda siap untuk membawakan makanan Anda, tetapi pertama-tama harus menunggu garam dan merica dikirim dari restoran lain.

Tetapi JavaScript bukan satu-satunya jenis kode yang memperlambat halaman seluler. CSS, HTML, dan permintaan tak terhitung yang diperlukan untuk memproses elemen seperti gambar dan font membuat jeda dalam waktu muat halaman penuh — prediktor rasio pentalan paling akurat kedua. Rata-rata pengguna halaman web yang terpental adalah 2,5 detik lebih lambat dari halaman rata-rata yang tidak mereka pantulkan.

Memecahkan masalah

Dalam upaya meningkatkan pengalaman penelusuran seluler, Google mengembangkan program AMP dan AMP untuk iklan. Kedua kerangka kerja memberi pengembang alat yang mereka butuhkan untuk memberikan pengalaman seluler dengan kecepatan kilat. Mereka termasuk:

• AMP HTML: Ini adalah versi dasar yang kami kenal sebagai bahasa markup hypertext — sistem tag, angka, dan huruf yang digunakan untuk membangun fondasi sebagian besar halaman web.

• AMP JavaScript: Versi AMP Google dari kode populer membatasi penggunaan JavaScript pihak ketiga dan yang ditulis oleh penulis.

• AMP CDN: Ini memungkinkan pengembang untuk menyimpan versi cache dari halaman web mereka di server Google. Versi cache itu adalah snapshot digital dari halaman yang berisi semua datanya di satu tempat. Hasilnya, dapat disajikan kepada pengguna lebih cepat.

Bersama-sama, elemen kerangka kerja membentuk fondasi halaman yang menggunakan data 10 kali lebih sedikit daripada rata-rata, dan iklan yang dimuat 6 kali lebih cepat.

Buka di sini untuk mempelajari lebih lanjut tentang memulai AMP.

Berapa kecepatan halaman seluler Anda?

Apakah halaman arahan pasca-klik Anda dioptimalkan untuk seluler? Apakah mereka bebas dari gambar yang tidak berguna, elemen kikuk, dan JavaScript yang berat?

Cari tahu dengan pengujian ramah seluler dari Google, lalu lihat panduan kami untuk mengoptimalkan pengalaman halaman arahan pasca-klik sebelum membuat halaman berikutnya: