Cara Mengoptimalkan Tata Letak WordPress Anda untuk Lalu Lintas Seluler

Jumlah perangkat seluler dan orang yang menggunakannya terus meningkat. Tidaklah mengherankan bahwa lebih dari separuh lalu lintas Internet adalah seluler, dan sebagian besar kueri mesin telusur ada di perangkat seluler. Selain itu, Google menghukum situs web yang tidak dioptimalkan untuk perangkat seluler.

Untuk mengoptimalkan tata letak WordPress Anda untuk lalu lintas seluler, Anda harus melakukan lebih dari sekadar memasang tema. Anda harus berinvestasi dalam versi seluler situs web Anda, tidak hanya dari sudut pandang UX, tetapi juga dari sudut pandang SEO, CRO, Periklanan, dan kinerja.

Oleh karena itu, dalam artikel ini, kami akan menjelaskan apa yang perlu Anda atasi di situs WordPress Anda agar berfungsi untuk lalu lintas seluler dan untuk memastikan bahwa pengguna akan mendapatkan pengalaman terbaik saat mengunjungi situs web di perangkat seluler.

Mengapa Lalu Lintas Seluler Penting

Pada tahun 2016, untuk pertama kalinya, lalu lintas Internet seluler melampaui desktop. Untuk mengikuti ini, Anda harus mempersiapkan situs WordPress Anda untuk lalu lintas yang masuk dari semua jenis perangkat.

Pengoptimalan tidak hanya berarti terlihat hebat di ponsel cerdas, tetapi juga berarti memiliki situs web yang berfungsi. Memiliki situs web yang siap untuk seluler akan meningkatkan UX dan meningkatkan rasio konversi Anda, dan ini penting untuk situs web yang mendasarkan pendapatan mereka pada iklan.

Selain UX yang disempurnakan, tata letak yang sesuai untuk seluler juga memengaruhi SEO Anda secara positif. Dari pembaruan Google pada tahun 2015 dan seterusnya, ada revisi yang signifikan dalam algoritma mesin pencari. Sekarang, keramahan seluler adalah salah satu faktor penting untuk peringkat penelusuran yang lebih baik dan peningkatan lalu lintas web.

Lalu lintas web seluler terus meningkat, seperti yang ditunjukkan oleh grafik dari Statista ini.

Oleh karena itu, jika situs web Anda tampil sangat baik pada perangkat seluler, peringkatnya akan lebih baik di SERP, dan itu akan menghasilkan lebih banyak penjualan melalui seluler. Bahkan pengecer besar seperti Walmart Kanada mendapat manfaat lebih jauh dari pengoptimalan tata letak web seluler, dengan peningkatan 98% dalam penjualan seluler!

Ketika perusahaan mengetahui bahwa hampir 50% dari target pelanggan mereka adalah para ibu yang menggunakan tablet, mereka menyadari bahwa mereka harus melakukan sesuatu tentang pengalaman seluler mereka. Agar berhasil mengatasi masalah dengan tata letak seluler mereka, mereka telah menerapkan solusi berikut:

• Menyusun Paket yang Memprioritaskan Seluler: Tim mengambil keputusan bahwa mereka perlu mengadopsi pendekatan yang berfokus pada sentuhan pada desain, dan membuatnya terlihat sangat bagus di tablet dan ponsel cerdas.
• Menerapkan Pengoptimalan Desain Seluler: Pendekatan desain responsif membuat situs mereka tampil sempurna di setiap ukuran layar. Selain itu, mereka juga telah mengoptimalkan halaman produk untuk lalu lintas web seluler.

Hasilnya: 20% peningkatan rasio konversi keseluruhan, dan 98% peningkatan penjualan seluler, seperti yang disebutkan di atas.

Bagaimana Google Mengevaluasi Tata Letak Situs Web Seluler?

Saat mengevaluasi kemampuan situs untuk menerima lalu lintas dari penelusuran seluler, Google mempertimbangkan faktor-faktor berikut:

• Tata Letak Halaman: Google memeriksa apakah halaman Anda ditampilkan dengan benar di layar seluler.
• Aksesibilitas: Memeriksa apakah tombol, media, dan teks cukup besar untuk dapat diakses dengan mudah tanpa membuat pengguna memperbesar.
• Kinerja: Kecepatan halaman sangat penting untuk pengalaman web desktop dan seluler, dan Google memprioritaskan kinerja halaman seluler daripada desktop dalam SERP.
• Penempatan Iklan: Halaman yang dipenuhi iklan mengganggu banyak orang, dan juga menjadi masalah bagi Google. Itu sebabnya, saat menggunakan iklan, Anda perlu memastikan bahwa Anda tidak melanggar pedoman penempatan iklan.

Mulailah Dengan Beberapa Pengujian

Hal pertama yang perlu Anda lakukan adalah memeriksa apakah situs Anda saat ini cukup responsif terhadap lalu lintas web seluler atau tidak. Untuk tujuan ini, Anda dapat menggunakan alat Pengujian Ramah Seluler Google.

Uji Ramah Seluler Google sebagai salah satu alat terbaik untuk memeriksa tata letak responsif seluler situs Anda.

Cukup masukkan URL situs dan pilih Uji URL . Analisis tidak akan memakan waktu lebih dari beberapa detik. Jika situs web Anda berfungsi di perangkat seluler, alat tersebut akan memberi tahu Anda, dengan tangkapan layar tentang tampilan situs tersebut di ponsel cerdas. Atau, jika situs Anda tidak ramah seluler, alat tersebut akan menunjukkan apa yang perlu Anda sesuaikan.

Ada beberapa alat berguna lainnya yang dapat Anda gunakan untuk menguji kesesuaian untuk seluler, seperti:

• Varvy Mobile SEO
• Validator Seluler W3C
• Pemeriksa Desain Responsif

Alat memang hebat, tapi tidak ada yang benar-benar mengalahkan pengalaman pertama. Kami selalu menyarankan untuk mengunjungi seluruh situs Anda, melakukan tindakan yang Anda anggap sebagai prioritas bagi pengguna Anda (seperti menambahkan produk ke keranjang, mengirimkan formulir, menavigasi ke halaman, berbagi posting). Waspadai potensi masalah selama proses berlangsung. Ini adalah bentuk pengujian UX yang paling sederhana.

Uji Performanya

Kecepatan menjadi lebih relevan dari sebelumnya. Google menganggap kecepatan sebagai salah satu faktor peringkat paling signifikan, dan hingga 85% pengguna berharap situs seluler memuat jauh lebih cepat daripada versi desktop.

Berikut beberapa alat yang dapat Anda gunakan untuk menguji kecepatan situs web Anda:

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

Jika Anda ingin mempercepat konten di seluler, CDN dapat membantu Anda menyajikan konten lebih cepat melalui caching dan distribusi dari berbagai lokasi.

Misalnya, server hosting Anda berada di San Francisco, CA, dan pengunjung web seluler Anda dari Paris. Ini adalah jarak yang dapat memperlambat transversal konten. CDN dapat menyimpan versi situs Anda di server Prancis dekat Paris, dan sebagai hasilnya, menyajikan konten Anda jauh lebih cepat.

Selain itu, Anda perlu memilih penyedia hosting Terkelola yang kuat untuk situs WordPress Anda. Host bersama menjalankan ratusan situs web sekaligus, dan jika salah satu situs mengalami lonjakan lalu lintas yang lebih tinggi dari biasanya, kecepatan situs lain akan berkurang.

Peningkatan ke hosting WordPress seperti Pagely dapat membuat peningkatan kinerja yang signifikan. Pagely menggunakan infrastruktur server yang akan segera mempercepat situs web Anda. Mereka juga menggunakan versi PHP 7 terbaru dan menyertakan CDN yang dapat meroketkan aset situs Anda.

Pertahankan Kesederhanaan

Karena ponsel cerdas memiliki layar yang jauh lebih kecil daripada tata letak desktop, jumlah elemen yang dapat Anda tampilkan kepada pengguna lebih rendah. Oleh karena itu, jika Anda ingin menampilkan banyak konten, Anda hanya akan mengganggu pengalaman pengguna.

Sebagai contoh, mari kita lihat situs web Toyota di cabang Brasil. Ini terlihat sangat kokoh di laptop.

Situs web desktop yang terlihat bagus tidak berarti bahwa tata letak seluler akan mengikutinya. Sumber gambar: Toyota Brazil

Tapi, bagaimana jika Anda ingin menelusuri kendaraannya di smartphone Anda.

Tata letak web seluler yang berantakan menyebabkan lebih sedikit lalu lintas dan tingkat konversi yang berkurang. Sumber gambar: Toyota Brazil

Tidak seburuk itu, tapi sekali lagi, bar atas dan menu utama itu agak terlalu berlebihan, membuat seluruh pengalaman ketinggalan zaman dan berantakan.

Menjaga hal-hal sederhana dengan desain Anda meningkatkan UI seluler, dan pengguna dapat menavigasi halaman Anda dengan lebih efisien. Selain itu, tata letak sederhana meningkatkan skor kecepatan halaman seluler Anda karena semakin sedikit elemen yang harus dimuat browser, semakin cepat halaman tersebut.

Tata Letak WordPress Sederhana untuk seluler dari Swell

Saat Anda mendesain tata letak seluler, yang terbaik adalah fokus pada tata letak halaman satu kolom, untuk mendorong lebih banyak pengguliran pada halaman. Pikirkan - mengapa Facebook dan Instagram begitu sukses sebagai platform seluler?

Pengguna secara alami menggeser secara vertikal. Sumber gambar: Giphy

Selain itu, Anda perlu mempertimbangkan fitur lain yang dapat diterima untuk desain web seluler sederhana, seperti "menu hamburger".

Tombol Menu Hamburger di kiri atas. Sumber gambar: AMC

Sekarang menjadi komponen standar dalam desain web seluler, dan ketika pengguna ingin menjelajahi halaman lain, mereka mencari bagian atas tata letak halaman. Jangan gunakan menu drop-down yang ekstensif. Mereka menantang untuk dinavigasi di ponsel cerdas, dan terkadang, bahkan menghalangi kegunaan situs web desktop.

Kecualikan Konten yang Tidak Perlu

Selain menyederhanakan transisi halaman ke perangkat seluler dengan menghapus elemen yang tidak perlu, Anda juga dapat menghapus konten tambahan. Tentu saja, Anda tidak boleh menghapus konten yang meningkatkan tingkat konversi Anda. Namun, ada beberapa konten yang tidak diperlukan untuk versi seluler situs Anda.

Saat meninjau konten apa yang seharusnya muncul di halaman, tanyakan pada diri Anda hal berikut:

• Seberapa relevan konten ini dengan halaman?
• Apakah konten penting untuk perjalanan pengguna?
• Jika kita perlu memasukkan konten ini, bagaimana kita bisa menyederhanakannya untuk seluler?
• Jika kami dapat menghapusnya di seluler, apakah masih diperlukan di desktop?

Menghilangkan konten yang tidak perlu akan meningkatkan pengalaman pengguna dan tingkat konversi. Simpan hanya konten terpenting untuk pengunjung web seluler Anda. Sederhanakan konten Anda di mana Anda bisa, tetapi jangan menghilangkan konten utama yang dapat meyakinkan pengguna untuk memilih produk Anda.

Antarmuka pengguna yang sederhana dari situs web seluler BuildFire.

Batasi Area yang Dapat Diklik

Saat orang mengunjungi situs web di perangkat seluler, mereka tidak ingin terlalu banyak opsi untuk diklik. Itu bisa sangat membebani, dan Anda akan gagal memberikan UX seluler yang dapat dioperasikan. Alih-alih, Anda perlu menyorot ajakan bertindak yang paling penting dan area yang dapat diklik di laman Anda.

Todoist hanya memiliki ajakan bertindak dan beberapa grafik yang indah.

Ingatlah bahwa menjelajahi situs web pada ponsel cerdas terdiri dari melihat dan mengeklik layar sentuh dengan jari, bukan menunjuk dengan panah. Oleh karena itu, memasukkan sejumlah link dan memberi jarak dengan benar akan memastikan bahwa Anda memiliki halaman yang dapat diakses yang dapat dinavigasi oleh pengguna perangkat seluler.

Situs web seluler Quicksprout memiliki area besar yang dapat diklik.

Ini penting karena jika area yang dapat diklik ditutup pada layar seluler, orang dapat mengklik tautan yang salah. Selain itu, Google dapat menandai situs Anda sebagai tidak ramah bagi pengguna seluler, dan Anda akan kehilangan banyak lalu lintas pencarian organik yang potensial.

Memanfaatkan Desain Responsif

Jika Anda ingin menampilkan situs web Anda dengan benar di desktop dan seluler, Anda harus membuatnya responsif. Situs web responsif menggunakan elemen halaman yang sama untuk versi desktop dan seluler. Menurut perangkatnya, desainnya akan dibentuk ulang agar pas di layar.

Selain UX yang ditingkatkan untuk pengunjung web Anda di perangkat seluler, desain responsif juga memberikan manfaat berikut bagi situs Anda:

• Fleksibilitas: Dengan desain responsif, Anda tidak perlu berpikir untuk mengubah desain di dua situs web. Anda hanya perlu memperbaiki atau menambahkan elemen satu kali, dan Anda melakukannya untuk versi seluler dan desktop.
• Efektivitas Biaya: Menjalankan situs desktop dan seluler bisa jadi mahal. Dengan memanfaatkan desain responsif, Anda menghilangkan biaya yang tidak perlu tersebut.
• Manfaat SEO: Desain responsif bermanfaat untuk peringkat pencarian Anda karena Google, seperti yang dibahas di awal artikel, memprioritaskan situs ramah seluler di SERPs.

Namun, Anda harus berhati-hati. Sebagian besar situs web responsif hanya mengubah tiga kolom konten desktop menjadi satu kolom.

Situs responsif adalah situs yang cocok untuk setiap layar. Ini memuat data yang sama dari desktop ke versi seluler. Misalnya, jika Anda ingin menampilkan foto desktop berukuran 1.200 piksel pada layar seluler 300 piksel, seluruh 1.200 piksel akan dimuat, hanya dirender lebih kecil.

Sumber Gambar: Giphy

Mengenai gambar, WordPress telah membuat kemajuan signifikan menuju pengalaman yang lebih baik. Sejak versi 4.4, CMS secara otomatis menskalakan bahkan gambar terbesar melalui atribut HTML srcset .

PNG dan JPEG adalah format file gambar yang paling umum. Namun, dengan perkembangan teknologi dan gambar digital terkini, format WebP dan SVG menjadi semakin hadir.

SVG adalah gambar vektor dan dapat diskalakan agar sesuai dengan ukuran layar apa pun. Biasanya SVG jauh lebih kecil dari PNG, sehingga menghemat waktu yang berharga saat memuat.

Namun, Anda tetap harus berhati-hati. Elemen visual seperti video, foto, dan grafik dapat menjadi salah satu pemakan kinerja yang signifikan untuk situs web. Meskipun tidak ada aturan yang ditentukan secara ketat untuk ukuran file media, file yang lebih kecil menghasilkan waktu pemuatan yang lebih baik.

Perlu diingat bahwa elemen visual yang sama dari versi desktop situs WordPress Anda mungkin tidak selalu berfungsi pada desain seluler. Itulah mengapa menghilangkan citra latar belakang yang besar dan menukarnya dengan gambar yang tidak menghalangi UX di perangkat seluler adalah opsi yang jauh lebih baik.

Mari kita ambil beranda HubSpot sebagai contoh. Grafik di bagian pahlawan secara sempurna menggambarkan bagaimana CRM membuat segalanya bergerak. Bayangkan gambar realistik sebuah gedung perkantoran dengan banyak orang di setiap jendelanya. Ini tidak akan bekerja sebaik ini.

Sumber: HubSpot

Optimalkan Formulir

Mengisi formulir di smartphone bisa menjadi tantangan, terutama jika pengguna harus mengirimkan terlalu banyak data dan menavigasi terlalu banyak bidang. Itulah mengapa Anda perlu memastikan bahwa Anda menyederhanakan formulir seluler Anda dan hanya mengumpulkan informasi yang paling penting.

Buat formulir untuk halaman seluler Anda sesederhana mungkin. Sumber: Copyblogger

Di WordPress, Anda dapat menginstal plugin seperti WPForms dan membuat formulir responsif dengan cepat dan mudah yang dapat membantu Anda mengonversi pengunjung web seluler.

Dari perspektif pengembang, kami menggunakan Formulir Kontak 7 karena memberikan fleksibilitas paling tinggi. Meskipun perlu dicatat bahwa UI-nya tidak ramah pengguna untuk pengguna non-teknis yang menginginkan desain khusus untuk formulir mereka.

Formulir Kontak 7 adalah alat pengoptimalan formulir yang lebih baik dari sudut pandang pengembang.

Membungkus

Memiliki tata letak WordPress yang ramah seluler sangat penting saat ini. Ini adalah persyaratan yang diperlukan bagi pengguna target dan mesin telusur untuk menerima situs Anda.

Situs web WordPress yang ramah seluler memiliki kekuatan untuk mendatangkan lebih banyak lalu lintas organik, melibatkan prospek baru, dan pelanggan.

Sekarang Anda memiliki pemahaman yang lebih baik tentang apa yang harus diuji, cara mencari masalah UI seluler, dan mengidentifikasi masalah tambahan. Anda dapat mengikuti saran yang diuraikan di atas untuk memastikan bahwa UX seluler situs WordPress Anda selalu tepat.

Orang-orang di belakang CMS terbaik juga membuat kemajuan besar menuju UX seluler asli yang disempurnakan. Dari penskalaan gambar di browser seluler hingga backend yang ditingkatkan, Anda dapat yakin bahwa Anda berada di depan pemilik situs web yang menggunakan CMS lain.

Jika Anda memiliki pertanyaan lain, atau Anda memerlukan bantuan terkait masalah UX seluler dan menciptakan pengalaman web modern di perangkat, jangan ragu untuk menghubungi kami.