Punya laman mobile friendly itu urgen. Wajib, malahan. Jadi kalau Sahabat belum sempat optimasi laman ke mobile friendly, bersiaplah bagi melakukannya kini pun.
Ada tiga alasan kenapa laman mesti mobile friendly. Kira-kira begini penjelasan singkatnya:
- Jumlah traffic dari ponsel semakin meroket ━ Lebih dari separuh orang di dunia mengakses internet lewat smartphone. Diprediksi Statista, jumlahnya tiap tahun akan terus bertambah. Ini karena jumlah pengguna smartphone pun ikut bertambah seiring waktu.
- Mobile-first index ━ Google memprioritaskan indexing laman di versi mobile. Dari hasil indeks ini pulalah, Google menentukan ranking pencarian sebuah laman.
- Mobile Search Engine Optimization (SEO) ━ Logika mobile SEO sedikit berbeda dengan versi desktop. Lewat SEO versi mobile, Sahabat dapat menangkap peluang traffic dengan lebih bagus lagi.
Semisal Sahabat tak punya laman versi mobile friendly, ya habislah telah. Sahabat dapat kehilangan pengunjung, ranking di mesin pencari, leads, dan cuan dari pembeli.
Jadi sebelum terlanjur, baiknya Sahabat gerak cepat bagi menghindarinya. Lantas, bagaimana caranya merancang laman mobile friendly? Berikut yaitu jawabannya:
- Install tema yang responsif;
- Bikin fitur yang simpel;
- Sertakan kolom pencarian;
- Pilih jenis font yang tepat;
- Pastikan ada whitespace lumayan;
- Bikin form yang singkat;
- Lakukan optimasi gambar;
- Kurangi pop-up;
- Gunakan AMP;
- Tinggalkan Flash
- Jadikan kecepatan selaku prioritas;
Tak perlu khawatir dengan banyaknya cara di atas. Kami akan temani Sahabat mengerjakan semuanya langkah per langkah.
Apa Laman Sahabat Telah Mobile Friendly?
Sebelum buru-buru mengerjakan optimasi, baiknya Sahabat jawab dulu pertanyaan di atas.
Dari situ, Sahabat dapat tahu berapa banyak yang perlu dilakukan. Karenanya, Sahabat terhindar mengerjakan segalanya dari nol. Kemudian, Sahabat dapat fokus ke hal-hal yang memang perlu diperbaiki.
Bagi menjawab pertanyaan di atas, Sahabat dapat gunakan Mobile-Friendly Test dari Google.Tinggal masukkan URL laman dan tunggu beberapa dikala.
Platform ini bekerja menggunakan Googlebot. Googlebot akan mengakses JavaScript, CSS, dan dokumen gambar di web.
Dari sanalah, dapat dipastikan apakah web Sahabat telah mobile friendly atau belum. Lewat tool ini pun, Sahabat dapat tahu masalah spesifik yang merancang laman tak mobile friendly.
Setelah menunggu beberapa dikala, Sahabat akan mendapati halaman seperti di atas. Di halaman tersebut Sahabat dapat memperoleh informasi berupa:
- Keterangan waktu tes dan hasilnya;
- Screenshot halaman yang tampak dari ponsel;
- HTML yang tampak oleh Googlebot;
- Isu-isu yang ditemui ketika loading halaman;
- Artikel-artikel urgen lainnya.
Pastikan Sahabat mengklik bagian Page loading issues di bagian bawah tulisan Test results. Di sana, terdapat daftar komplit isu yang ditemui oleh Googlebot.
Dari sana lah, Sahabat dapat mulai mengubah laman jadi mobile-friendly. Pastikan, Sahabat mengerjakan rekomendasi optimasi sesuai yang Goole resepkan di laman.
Cara Membangun Laman Mobile Friendly
Setelah tahu isu-isu spesifik yang perlu ditangani, gilirannya mengerjakan optimasi secara menyeluruh. Di sini, kami akan tunjukkan 11 cara yang dapat dilakukan bagi merancang laman mobile-friendly.
1. Install tema yang responsif
Tema punya pengaruh besar di laman. Bagus dari sisi performa laman, maupun pengalaman berkunjung.
Secara teknis, tema responsif menolong memotong waktu loading. Karena, Google tak perlu mengerjakan redirect ke versi laman yang teroptimasi.
Kriteria tema yang sama pun menolong Googlebot mengindeks halaman laman. Karenanya, ini berpengaruh seketika ke ranking laman di hasil pencarian.
Dari sisi user experience, instalasi tema responsif mempermudah user membagikan konten. Pemilik laman hanya punya satu jenis URL yang berlaku konsisten. Kalau user membagikan URL dari versi mobile, URL yang sama dapat dibuka lewat desktop dengan tampilan yang pas.
Jadi, jelas telah alasan kenapa tema responsif wajib diinstall di laman.
Namun nyatanya, tak seluruh tema itu responsif. Beberapa tema (sayangnya) berfungsi sekadar selaku riasan. Mereka hanya fokus bagi mempercantik tampilan laman.
Lalu, bagaimana format tema yang responsif itu? Berikut tiga kriteria utama yang perlu diingat:
- Dapat menyesuaikan tampilan web secara otomatis;
- Punya desain dan tampilan simpel;
- Punya user interface yang intuitif (button, slider, dan form).
Bagi lebih mudahnya, Sahabat dapat dapatkan tema responsif di WordPress Directory. Sahabat tinggal ketikkan URL: https://wordpress.org/. Kemudian klik opsi Themes dan masukkan kata kunci “Memiliki tampilan yang dinamis” di kolom pencarian.
Seketika, Sahabat dapatkan ribuan alternatif tema responsif yang dapat diaplikasikan secara tidak dipungut bayaran.
2. Bikin fitur yang simpel
Ukuran layar desktop jelas berbeda dengan ponsel. Ketika desktop punya resolusi minimal 1080p, resolusi layar ponsel hanyalah 720p. Karena begitulah, fitur laman perlu didesain berbeda dari yang di desktop.
Kalau mau menyederhanakan tampilan fitur, ada beberapa prinsip yang perlu Sahabat ikuti:
- Tampilkan menu-menu yang urgen saja. Terlalu banyak fitur merancang pengunjung kebingungan pada menjelajah laman (decision paralysis);
- Taruh menu-menu lainnya ke pada collapsible navigation sidebar atau fitur navigasi yang dapat disembunyikan;
- Tulis call-to-action (CTA) dengan singkat dan jelas;
- Bikin tombol pada ukuran yang besar;
- Hindari pemakaian sidebar bagi konten. Konten yang terletak di sidebar biasanya akan ditampilkan di bagian sangat bawah halaman versi mobile.
Sedangkan bagi best practice-nya, Sahabat dapat contoh web milik Pizza Hut Delivery. Di bawah ini, Sahabat dapat bandingkan websitenya pada versi mobile dan desktop.
Di versi mobile, fitur Order Now dan Status Pesanan ditampilkan sangat atas. Karena harapannya, user siap mengerjakan order lewat ponsel.
Baru kemudian, fitur makanan dan minuman diletakkan di bagian bawah. Tepatnya, setelah slider berisi image promosi. Deretan fitur produk masih gampang diakses meski diletakkan di bagian bawah.
Tak lupa, ada fitur navigasi tersembunyi di bagian pojok kiri atas. Fitur navigasi berisi fitur yang sama persis di halaman depan laman. Namun, navigasi bukan berarti pemborosan tempat. Malahan, navigasi ini bekerja mirip dengan breadcrumbs yang mempermudah user bagi bolak-bali dari satu halaman ke halaman lainnya.
Di versi desktop, tampilan laman nampak lebih detail. Fitur Order Now sama-sama diletakkan di bagian atas. Hanya saja posisinya ada di bagian kanan halaman.
Posisi ini merancang menu-menu produk dan slider promosi jauh lebih mencolok. Dengan tampilan macam ini, user lebih terpancing bagi mencari tahu produk apa saja yang disajikan oleh Pizza Hut Delivery.
Niagahoster pun memberikan contoh tampilan laman yang menarik di halaman promo domain dan hosting.
3. Sertakan kolom pencarian
Tak seluruh hal dapat dikerjakan simpel. Termasuk di dalamnya fitur dan konten laman. Apalagi kalau laman yang dimaksud adalah marketplace atau toko online. Mau tak mau, ada demikian itu banyak fitur dan halaman berisi produk yang dijual.
Kalau Sahabat punya laman macam itu, ada baiknya bagi tambahkan kolom pencarian. Kolom pencarian dapat mempermudah customer mencari produk yang benar-benar dibutuhkan. Toh, tak mungkin pun Sahabat menyuruh pengunjung mencari konten atau produk secara manual kan?
4. Pilih jenis font yang tepat
Sama halnya dengan tema, font pun punya pengaruh ke tingkat mobile friendly sebuah laman.Karena ruang yang terbatas di ponsel, alternatif font berpengaruh ke tampilan keseluruhan laman.
Dengan font yang tepat, konten laman dapat dengan gampang dibaca. Selain itu, font pun dapat mempengaruhi kesan, mood, dan branding laman itu sendiri.
Font yang sifatnya dekoratif biasanya tak masuk pada kategori mobile friendly. Memang, tampilan font klasik macam ini biasanya amat menarik perhatian. Hanya saja, jikalau dilihat dari ponsel tampilannya akan jadi amat besar dan kurang elok.
Bagi tahu font apa yang bagus digunakan, coba baca artikel Kombinasi Font Sempurna untuk Website Anda.
5. Pastikan ada whitespace yang lumayan
Hal satu ini mungkin tak ada hubungannya dengan persoalan teknis. Akan tetapi, baiknya Sahabat terus mengingat dan mempraktikkan ini.
Tampilan putih polos memberi kesan bersih dan elegan di laman. Apalagi kalau laman dilihat lewat ponsel.
Di dikala bersamaan, latar putih pun merancang pengunjung fokus ke objek utama di halaman laman. Kalau Sahabat punya toko online, latar putih menolong produk Sahabat tampak lebih mencolok.
Kalau konten yang dimaksud berupa paragraf, karenanya paragraf tersebut akan lebih gampang dibaca. Asalkan, Sahabat menulis pada potongan paragraf yang pendek-pendek.
6. Bikin form yang singkat
Form di laman di prinsipnya mesti singkat. Tetapi kalau bicara soal mobile friendly, Sahabat perlu mengerjakan langkah ekstra.
Pangkas seluruh form isian yang kurang urgen bagi user. Ketika Sahabat menanyakan informasi bagi leads dan kontak, sertakan dua macam form saja: nama dan domisili email.
Baca pun: Membuat Formulir Kontak WordPress dengan Contact Form 7
Kalau konteksnya bagi pengiriman barang, buatlah form yang apa perlunya saja. Fokus ke informasi urgen yang dibutuhkan. Sahabat tak perlu tahu warna kesukaan atau darimana pembeli mendapat informasi mengenai bisnis Sahabat.
7. Lakukan optimasi gambar
Pada merancang laman mobile friendly, gambar biasanya jadi momok. Karena, masih banyak orang yang asal mencantumkan gambar ke laman. Tanpa peduli format gambar atau ukurannya.
Akibatnya, laman jadi lambat. Belum lagi memori disk server jadi boros. Karenanya dari itu, optimasi gambar jadi hal urgen bagi dilakukan.
Ada beberapa hal yang perlu dilakukan pada mengoptimasi gambar, yaitu:
- Pilih format gambar yang tepat. Bagi menghemat disk space, baiknya Sahabat gunakan gambar berformat JPG atau JPEG. Kalau Sahabat perlu gambar detail seperti screenshot, barulah gunakan gambar berekstensi PNG;
- Lakukan kompresi gambar. Unggah gambar ke TinyPNG atau TinyJPG Keduanya akan mengerjakan kompresi ukuran file dengan mengurangi kompleksitas warna dan informasi kurang relevan soal gambar;
- Perkecil dimensi gambar. Bagi langkah ekstra, Sahabat dapat pun perkecil dimensi gambar sebelum mengunggahnya ke web. Gunakan aplikasi macam Paint atau Picasa bagi mempermudah Sahabat;
- Install plugin image optimizer seperti WP Smush. Langkah ini dapat dilakukan semisal Sahabat butuh bantuan mengerjakan optimasi gambar. Plugin ini pun dapat diaplikasikan bagi mengecek resolusi gambar yang belum optimal;
- Tambahkan title text dan alt text demi SEO. Bot tak dapat melihat gambar. Sahabat dapat membantunya dengan menambahkan title text dan alt text yang sesuai. Sertakan kata kunci bagi title text, lalu deskripsikan tampilan gambar bagi alt text.
8. Hindari pop-up
Pop-up itu makan tempat. Bayangkan saja layar ponsel sekecil itu penuh dijejali pop-up. Menyebalkan, bukan?
Lebih buruk lagi, pop-up sulit sekali ditutup. Tombol close (X) biasanya terlalu kecil atau sulit ditemukan. Double menyebalkan jadinya.
Tak perlu alasan lain lagi. Sebisa mungkin, hindarilah pop-up di laman versi mobile.
9. Gunakan AMP
Accelerated Mobile Pages (AMP) adalah proyek yang digawangi oleh Google. AMP diklaim dapat merancang waktu loading laman jadi super cepat.
Ini karena AMP bekerja menggunakan cache. Cache diaplikasikan bagi menyimpan data laman di gadget. Selain itu, AMP Cache pun mampu mengoptimalkan kerja server dengan cara:
- Membatasi dimensi atau resolusi gambar;
- Mengubah format gambar ke ukuran yang sesuai bagi tampilan ponsel;
- Menurunkan kualitas gambar bagi mempercepat loading;
- Mengamankan laman lewat protokol HTTPS.
Lewat cara-cara di atas, tak heran kalau AMP mampu memangkas data laman hingga delapan kali lebih kecil.
Selaku proyek Google, AMP pastinya punya keunggulan di mesin pencarian Google. Laman dengan AMP punya prioritas bagi tampil di urutan teratas halaman pencarian. Seperti yang dapat dilihat di gambar di atas.
Bagi tahu lebih lanjut soal optimasi lewat AMP, silakan baca Cara Meningkatkan Pengunjung Blog dengan Google AMP.
10. Tinggalkan Flash
Flash telah usang dan ketinggalan jaman. Segala orang tak suka padanya.
Pun di desktop pun, pengalaman menjelajah laman dengan Flash amat menyebalkan. Laman jadi tak responsif dan waktu loading-nya pun lama. Saking menyebalkannya, bagus iOS dan Android pun telah tak mendukung Flash.
Karenanya dari itu, jangan pernah gunakan Flash. Selaku gantinya, gunakan teknologi terbaru yang lebih kompatibel. HTML, misalnya.
11. Jadikan kecepatan selaku prioritas
Inti dari mobile friendly yaitu soal kecepatan. Karenanya, kecepatan laman mesti jadi prioritas.
Kalau laman Sahabat tak lekas muncul pada waktu tiga detik, kemungkinan pengunjung tak jadi mengakses meningkat hingga 32 persen. Semakin lama waktu load yang dibutuhkan, semakin tinggi pula kemungkinan bounce rate-nya. Seperti yang nampak di infografis di bawah.
Untungnya, itu seluruh tak jadi masalah. Terutama kalau Sahabat berhasil memakai 10 cara merancang laman mobile friendly di atas. Syukur-syukur Sahabat pun mengerjakan langkah tambahan seperti:
- Mengurangi jumlah post yang tampil di halaman depan;
- Menghilangkan widget yang tak perlu;
- Menjalankan uninstall plugin yang jarang diaplikasikan.
Namun, ada kalanya kesemua langkah itu kurang manjur. Kalau telah demikian itu, artinya ada yang salah dengan performa server yang Sahabat gunakan.
Lalu bagaimana solusinya?
Sahabat dapat mengupgrade paket hosting ke layanan unlimited web hosting sesuai keperluan. Kalau boleh memberi saran, kami rekomendasikan paket hosting Personal bagi layanan shared hosting.
Paket ini telah melingkupi fitur unlimited disk space, unlimited laman, dan unlimited akun email. Harganya pun lebih miring dibanding dua paket lainnya.
Kalau Sahabat butuh yang lebih, Sahabat dapat pilih layanan cloud hosting. Layanan ini menjanjikan performa server jempolan. Cocok bagi laman toko online hingga marketplace.
Siap Bikin Laman Mobile Friendly?
Oh, tentu saja! Kami harap, 11 cara merancang laman mobile friendly di atas benar-benar bermanfaat bikin Sahabat.
Eiits, tak cuma hingga di situ. Kami pun menyediakan ebook tidak dipungut bayaran bagi didownload. Sahabat tinggal masukkan nama dan domisili email ke halaman 20+ Tips Membuat WordPress Super Cepat. Tak butuh waktu lama bagi ebook itu hingga ke kotak masuk email Sahabat.
Ahir kata, selamat mengoptimasi laman!
Sumber https://niagahoster.co.id/