Pengertian Web Core Vitals bagi halaman blog dan mengapa kita harus memperbaikinya

Diposting Oleh:
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. 

Hitungan mundur

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
JenisValidKesalahanTren
Data Web Inti
Mobile
Desktop
0
0
0
0
BUKA LAPORAN
Kebergunaan Seluler
205
0
BUKA LAPORAN
Breadcrumb
380
0
BUKA LAPORAN
Kotak penelusuran Sitelink
208
0

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:
  1. Kecepatan loading halaman (LCP) 
  2. Kecepatan interaksi halaman (FID) 
  3. 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).

Yakni Waktu yang dibutuhkan untuk memuat konten utama halaman. Pengukuran LCP yang ideal adalah 2,5 detik atau lebih cepat daripada itu.

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) 

Atau disebut juga dengan: First Input Delay atau Penundaan Input Pertama yakni waktu yang dibutuhkan halaman untuk menjadi interaktif. Pengukuran ideal kurang dari 100 ms.

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! 

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) 

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. 

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.

Halaman yang mobile-friendly adalah halaman dengan Responsive Web Design (RWD). 

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:

Baca Juga:

Komentar

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose compose view contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Downoad Notable simple yang pas buat blog curhat

Download Update Template Blogger Notable simple versi kedua