Awas! Count down to Core Web Vitals!
Semakin dekat ke hitungan mundur atau batas penalti Google yang akan merobah cara kita dalam mengelola halaman web kita untuk selamanya. Karena setelah ini hanya halaman mobile yang akan di prioritaskan oleh mesin pencari.
Artinya halaman web desktop telah ditinggalkan.
Rajin rajin mengintip halaman tool webmaster apakah postingan Anda mendapatkan skor mobile atau malah desktop?
Dalam seminggu ini editblogtema hanya mendapatkan skor NOL untuk kedua tipe halaman tersebut. Ini akibat dari elemen elemen konten yang berat dan juga dibebani oleh ukuran gambar yang besar namun dengan kualitas yang buruk juga.
Penyempurnaan
| Jenis | Valid | Kesalahan | Tren | |
|---|---|---|---|---|
Dan itu akan kita hadapi pada bulan Mei 2021 ini.
Lalu apa saja yang harus diperhatikan? Menurut Laman Google sendiri prioritas web core vitals adalah:
- Kecepatan loading halaman (LCP)
- Kecepatan interaksi halaman (FID)
- Tampilan visual yang stabil (CLS)
Ketiga hal di atas akan menjadi signal yang kuat bagi mesin pencari untuk menemukan halaman web atau halaman blog kita.
1. Halaman harus cepat muat (LCP)
Atau Largest Contentful Paint (LCP). Jelas ini adalah prioritas utama. Selain halaman harus mobile halaman juga harus cepat, itu sebabnya mengapa preforma halaman blog ini tampak menurun pada saat kehabisan tenaga menampilkan gambar dan ikon yang melebihi ukuran yang di anjurkan. Mereka menyebutnya dengan LCP (Largest Contentful Paint).
Yang masuk dalam kategori harus cepat muat (atau cepat tampil) itu adalah:
- Menu
- Ikon (termasuk ikon ikon medsos)
- Judul Blog
- Logo
Bayangkan ternyata ini tidak main main, halaman lambat bisa menjadi sangat menderita pada bulan Mei 2021 karena halaman cepat akan menjadi signal utama pada mesin pencari untuk menemukan halaman blog kita. Kita bisa saja dengan apatis mengatakan halaman kompas, detik dan Tribun lambat tapi masih sangat tinggi trafiknya. Astaga...jangan membandingkan halaman raksasa yang tingginya laksana mercusuar yang mudah terlihat.
Maksud saya mesin pencari tidak perlu bersusah payah menemukan sebuah laman raksasa yang memang sangat menonjol, ibarat gedung pencakar langit yang dengan mudah di lihat dari tempat yang sangat jauh. Di tambah lagi brandingnya yang sangat kuat.
Bayangkan kalau saya harus mencari rumah si A diantara 2000 blok kota sementara itu hanyalah perumahan fitur biasa. Mesin pencari butuh waktu sangat lama untuk mencapainya.
Ini jika kita bicara tentang signal penanda, penanda dan penarik perhatian bagi mesin pencari.
Karena segala hal tentang kecepatan loading adalah kecepatan nyata pada halaman blog maka berikut cara mengatasinya:
- Hapus semua skrip pihak ketiga yang tidak perlu
- Tingkatkan host web Anda (jika mengunakan Hosting pilih hosting yang cepat)
- Pasang lazy load
- Hapus elemen elemen halaman yang besar dan berat seperti gambar, script gambar dll.
- Minify atau perkecil ukuran CSS
2. Kecepatan halaman berinteraksi (FID)
Waktu di hitung saat pertama pengunjung mengklik halaman, jika lama jelas buruk alias tidak cepat, alias memaksa pengunjung menunggu loading.
Tapi Google juga mengukurnya melalui data lab.
Maksudnya begini walaupun pengunjung sudah memasuki halaman awal blog kita namun belum mengklik tombol untuk masuk lebih jauh membaca konten, maka Google menganggapnya sebagai waktu loading yang buruk. Data lab tidak akan tahu kalau sebenarnya sang pengunjung belum mengklik karena sedang mengangkat telpon.
Waduh!
Atau di gambarkan sebagai Cumulative Layout Shift atau Pergeseran Tata Letak Kumulatif: Jumlah pergeseran tata letak yang tidak terduga dari konten halaman visual (cumulative layout shift) . Pengukuran ideal kurang dari 0,1.
Halaman yang mobile-friendly adalah halaman dengan Responsive Web Design (RWD).
Akan tetapi setelah di uji real loading interaktif editblogtema jelas lebih berat daripada batas 100 ms itu. Jadi bagi kami ini adalah PR yang harus diperbaiki.
Ternyata menulis atau membuat konten juga membutuhkan strategi, misalnya harus disesuaikan dengan fitur dan postur template yang sedang kita pergunakan.
Cara mengatasinya:
- Minimalkan (atau tunda) JavaScript: Karena hampir tidak mungkin bagi pengguna untuk berinteraksi dengan halaman saat browser memuat JS. Jadi meminimalkan atau menunda JS di halaman Anda adalah kunci untuk FID ini.
- Hapus semua skrip pihak ketiga yang tidak penting: Sama seperti FCP, skrip pihak ketiga (seperti Google Analytics, peta panas, dll.) Dapat berdampak negatif pada FID. Bagus sih bagus, tapi ini zamannya Web Core Vitals bukan zaman dulu lagi.
- Gunakan cache browser: Ini membantu memuat konten di halaman Anda agar menjadi lebih cepat. Yang membantu browser pengguna Anda bekerja lebih cepat melalui tugas pemuatan JS.
3. Tampilan visual yang stabil (CLS)
Misalnya saat pengunjung mengklik menu malah kepencet sesuatu yang mengakibatkan halaman tujuan berpindah ke halaman yang tidak mereka inginkan. Ini disebabkan jarak atau range marjin-nya antara tombol terlalu sempit. Seolah manipulasi. Kalau terus menerus terjadi pengunjung akan berpentalan.
Cara mengatasinya:
- Gunakan dimensi atribut ukuran yang ditetapkan untuk media apa pun (video, gambar, GIF, infografis, dll.) contohnya 'height=24px' width=''24px' Dengan demikian browser pengguna tahu persis berapa banyak ruang yang akan digunakan elemen tersebut di halaman itu tidak lagi harus menghitung hitungnya. Dan tidak akan mengubahnya dengan cepat saat halaman dimuat sepenuhnya.
- Jika menggunakan iklan di halaman blog maka, pastikan elemen iklan memiliki ruang yang telah ditetapkan: Jika tidak, elemen iklan dapat tiba-tiba muncul di halaman, mendorong konten ke bawah, ke atas atau ke samping.
Persoalannya apakah halaman mobile non-AMP termasuk prioritas?
AMP sangat besar dan pastinya memiliki masa depan blogging yang tidak dapat diabaikan oleh pemasar mesin pencarian. Kecepatan dan tampilan konten yang optimal adalah aspek terpenting bagi pengguna mobile seluler.
Tidak terbantahkan lagi bahwa kecepatan halaman mobile pada halaman seluler di segala ukuran layar tidak mungkin dapat di abaikan begitu saja, jika Anda ingin bisnis Anda berjalan maksimal. Ini adalah jawaban pada isu isu di masa lalu bahwa Google sangat fokus terhadap kenyamana pengguna terutama para pengguna seluler yang jumlahnya ribuan kali lipat pengguna PC baik desktop maupun laptop. Siapa mau mengabaikan pasar sebesar pengguna seluler di masa depan?
Itulah alasannya mengapa projek AMP (accelaration Mobile Page) dikembangkan oleh Google. Ini benar benar fokus ke halaman seluler, dan ini bisa membuat halaman desktop benar benar tersingkir dari prioritas Google terutama jika merujuk pada tool webmaster Web Core Vitals.
Dan jika AMP atau Accelerated Mobile Pages Accelerated Mobile Pages (AMP) adalah halaman ringan yang dirancang untuk dimuat dengan cepat di perangkat seluler. Halaman yang sesuai dengan AMP menggunakan subset HTML dengan beberapa ekstensi. Accelerated Mobile Pages (AMP), adalah kerangka kerja yang sangat mudah diakses untuk membuat halaman web seluler yang memuat dengan cepat.
Maka,i halaman mobile yang non-AMP adalah halaman web atau blog yang dibuat dengan desain mobile friendly.
RWD adalah pendekatan desain web yang ditujukan untuk membuat situs guna memberikan pengalaman menonton yang optimal di berbagai perangkat - mulai dari monitor komputer desktop, tablet, hingga ponsel. Secara khusus, bereaksi terhadap lebar jendela browser - tidak hanya mengalirkan teks, tetapi sering mengubah aspek tata letak halaman. Dan pekerjaan merubah ini adalah tugas yang sedikit banyaknya menghalangi kecepatan halaman mobile non-AMP.
Jadi sebuah situs web dapat dibuat responsif atau ramah seluler dengan menambahkan Media Queries. Contohnya:
<!-- Media query CSS pada elemen link --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- Media query CSS di dalam style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
Media Queries memungkinkan tampilan setiap konten menyesuaikan diri dengan perangkat pengguna tanpa harus mengubah konten itu sendiri.
Ini adalah teknik CSS yang diperkenalkan di CSS3 versi ke 3. Media Queri memungkinkan halaman web menggunakan aturan gaya CSS yang berbeda beda berdasarkan fitur seperti lebar, tinggi, dan warna. Media Queri adalah ekspresi logis yang benar atau yang salah (true or false).
Yang jelas halaman mobile akan menjadi prioritas blogging setelah May 2021 nanti tiba, baik ketika dia dibuat dengan Media Queri (mobile page non AMP) ataupun ketika blogging menggunakan halaman AMP.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: