Cara Optimasi Laporan Data Web Inti (Core Web Vitals)

Semakin berkembangnya teknologi, semakin kesini semakin update. Ada beberapa yang baru saya sadari mengenai Data Web Inti yang ada di Google Search Console. Karena ada beberapa masalah mengenai data web inti, terlebih lagi jika anda seorang blogger atau websiter yang memanfaatkan google search console untuk mengontrol performa website, pasti dalam beberapa waktu ini telah disibukkan dengan pertahanan blog/ web digempur dengan berbagai serangan efek dari update algoritma google.

Dimulai dari masalah breadcrumb, data schema, hingga masalah data web inti yang harus segera diselesaikan oleh pengelola blog maupun website agar bisa bertahan di mesin pencarian google.

Bagi Blogger pemula, Data web inti menjadi masalah yang serius karena dapat menyebabkan penurunan traffik yang sangat signifikan, hal ini bukan tanpa alasan, seperti saya yang sempat binggung mengenai penurunana traffik yang lumayan banyak dari biasanya. 

Google melalui Webmaster Central Blog dalam postingannya yang berjudul Evaluating page experience for a better web, bahwa bulan mei 2020 kemarin google telah mengumumkan  tentang Core Web Vitals yang berupa metrik terkait dengan kecepatan, daya tanggap, dan stabilitas visual untuk membantu pengalaman terbaik para user dalam menjelajah halaman web.

Pengenalan tentang Data Web Inti atau Core Web Vitals tidak lain adalah untuk memberikan laporan /gambaran tentang masing-masing website tentang kualitas pengalaman pengguna di halaman web.

Apa Itu Core Web Vitals?

Core Web Vitals adalah sekumpulan faktor khusus yang dianggap penting oleh Google dalam pengalaman pengguna halaman website secara keseluruhan. Core Web Vitals sebelumnya terdiri dari :

• Mobile Friendly (Ramah Seluler)

• Safe Browsing (Penelusuran yang Aman)

• HTTPS

• No Intrusive Interstitial 

4 hal tersebut yang Google pakai sebelumnya untuk menentukan peringkat website. Namun saat ini ada 3 tambahan yaitu : 

• Site Speed (Kecepatan Loading)

• Interactivity (Respon Elemen Website)

• Visual Stability (Stabilitas Visual)

Singkatnya, Core Web Vitals merupakan bagian dari faktor-faktor yang akan menjadi bagian dari skor “Page Experience” Google. Pada dasarnya, cara Google mengukur UX halaman Anda secara keseluruhan.

Indikator Core Web Vitals

Google telah menentukan Core Web Vitals dan inilah 3 indikator yang digunakan sesuai core web vitals tersebut.

• LCP (Largest Contentful Paint) : Seputar kecepatan website

• FID (First Input Delay) : Bagaimana respon elemen di website

• CLS (Cumulative Layout Shift) : Stabilitas tata letak halaman website

LCP (Largest Contentful Paint)

Metrik ini mengevaluasi kinerja loading khususnya kecepatan loading halaman dan bagaimana pengguna dapat melihat serta berinteraksi dengan halaman. Google menyarankan bahwa untuk memberikan pengalaman pengguna yang baik, LCP harus terjadi dalam waktu 2,5 detik saat halaman pertama kali mulai memuat. 

LCP adalah waktu yang diperlukan oleh sebuah elemen terbesar di halaman untuk dimuat. Namun perlu diketahui bahwa elemen terbesar tersebut tidak hanya gambar ataupun video. Tulisan panjang pun bisa dianggap sebagai LCP.

Selain itu LCP ini hanya menghitung waktu elemen ukuran terbesar yang muncul pertama kali ketika halaman website diakses, jadi elemen-elemen yang ada dibawahnya tidak termasuk LCP walaupun ukurannya besar juga.

Metrik ini ditetapkan oleh Google menggantikan metrik sebelumnya yaitu FCP (First Contentful Paint). FCP ini yaitu elemen yang tampil pertama kali saat dimuat walaupun ukurannya kecil. 

FID (First Input Delay)

Metrik ini mengevaluasi kemampuan pengguna untuk berinteraksi secara efektif dengan halaman tertentu. Google mendefinisikan pengalaman pengguna yang baik dengan halaman yang memiliki FID kurang dari 100 milidetik.

FID atau First Input Delay adalah waktu yang diperlukan sebuah website untuk merespons interaksi pertama kali yang dilakukan visitor . Interaksi ini bisa berupa klik ataupun input dan bukan scrool atau zoom

Walaupun FID ini diukur dari interaksi visitor website setelah beberapa elemen halaman web sudah dimuat, indikator ini belum lah sempurna.

Interaksi ini dapat terjadi kapan saja tergantung dari visitor, jadi ketika visitor tidak langsung melakukan klik atau input saat halaman sudah dimuat maka skor FID Anda kemungkinan menjadi tidak baik.

Nah salah satu hal yang bisa dilakukan agar skor FID mendapat skor baik yaitu dengan cara mengoptimalkan file JavaScript atau bisa juga meminimalkan penggunaannya.

CLS (Cumulative Layout Shift)

Metrik ini meninjau stabilitas visual dan dampak pergeseran berbagai elemen halaman web saat memuat font, gambar, atau tombol. Dalam hal angka yang akan dituju, Google menyarankan bahwa CLS kurang dari 0,1 memberikan pengalaman pengguna yang baik.

Sejauh ini, ada klarifikasi mengenai Core Web Vitals mana yang akan memiliki pengaruh terbesar pada faktor peringkat sehingga sangat penting bagi tim untuk mempertimbangkan masing-masing metrik baru ini (serta dasar-dasar UX yang ada) untuk menyediakan pengalaman pengguna sebaik mungkin.

Jadi bisa dikatakan CLS ini yaitu indikator untuk mengukur perubahan layout halaman website apa saja yang terjadi ketika dimuat.

Contoh kasus dari skor CLS yang buruk yaitu misalnya Anda sedang memuat halaman web, halaman website tersebut belum sepenuhnya dimuat. Namun saat Anda ingin menekan tombolnya, tombol tersebut tiba-tiba bergeser ke sebelah kiri atau kanan. Hal tersebut terjadi dikarenakan ada elemen lain yang terlambat muncul ketika dimuat.

Contoh lainnya yaitu misal memasang banner iklan atau promo di blog. Ketika Anda membaca sebuah paragraf, tiba-tiba paragraf yang Anda lihat meluncur kebawah dikarenakan ada banner iklan atau promo yang muncul.

Hal-hal tersebut lah yang membuat skor CLS Anda tidak baik. Kembali lagi karena pengalaman pengguna terganggu.

Tapi perlu diketahui untuk drop down menu, perubahan tersebut tidak akan mengurangi skor CLS yaa.

Cara Memeriksa Skor Web Vitals

Untuk mengetahui skor core web vitals, Anda perlu menggunakan tools. Nah saat ini ada beberapa tools yang Kami tahu yaitu:

• PageSpeed Insights

• Google Search Console

• Chrome UX Report

• Chrome Web Vitals Extension

Namun Anda jangan bingung dan menggunakan semua tools tersebut. Kami merekomendasikan 2 tools aja yang dapat Anda gunakan yaitu Google Search Console dan PageSpeed Insights.

Perbedaannya antara 2 tools ini yaitu, jika menggunakan Google Search Console, Anda bisa melihat data web vitals secara garis besarnya, dan untuk PageSpeed Insights bisa mengidentifikasi elemen yang perlu dioptimalkan. Kedua tools ini bisa Anda gunakan bersamaan.

Google Search Console

Untuk melihat skor web vital di Google Search Console yaitu masuk seperti biasa ke halaman search console. Setelah itu klik menu Core Web Vital di sidebar.

PageSpeed Insight

Untuk melihat data core web vital yaitu, akses situs PageSpeed Insight lalu masukan URL website atau halaman Anda.

Nanti Anda akan menemukan Field Data untuk melihat hasil dari ketiga indikator Core Web Vitals yang sudah Kami bahas sebelumnya ditambah FCP  seperti dibawah ini.

Cara Mengoptimalkan Skor Web Vitals

Berikut ini beberapa hal yang bisa Anda lakukan untuk mengoptimalkan skor web vitals.

Optimalisasi LCP 

Website Anda bisa dikategorikan memiliki skor LCP baik yaitu dengan kecepatan loading elemen kurang dari 2,5 detik seperti gambar sebelumnya.

Nah untuk mengoptimalkan skor tersebut, Anda perlu menggunakan PageSpeed Insights. 

Di halaman hasil analisa PageSpeed Insights, scroll ke bawah hingga Anda menemukan bagian Diagnostics. Kemudian, klik tab Largest Contentful Paint element. Tab ini akan menunjukkan tag dari elemen LCP. Scroll kebawah pilih Diagnostics dan pilih tab Largest Contentful Paint.

Setelah itu akan muncul apa saja yang perlu dioptimasi. Dengan demikian, Anda dapat segera mengoptimasi elemen tersebut agar skor LCP meningkat.

Berikut ini cara-cara mengoptimalkan skor LCP yaitu:

• Mengoptimalkan File Ukuran Besar :  Kompres gambar dan file. Gunakan plugin lazy load.

• Menyederhanakan File JavaScript dan CSS : Perkecil ukuran atau memperbaiki render-blocking JavaScript dan CSS.

• Meningkatkan kecepatan website : Anda bisa pakai CDN atau plugin cache supaya elemen lebih cepat saat dimuat.

• Perbaiki Masalah Rendering di Sisi Browser : Pastikan Anda hanya memakai JavaScript untuk hal yang benar-benar penting.

Optimalisasi FID

Skor FID website dinilai baik yaitu saat interaksi pertama di website Anda terjadi sebelum 100 milidetik. Cara paling mudah untuk mendapat skor FID baik yaitu dengan mempercepat website Anda. Tapi kali ini bukan mengkompres gambar melainkan mengoptimalkan Javascript.

Nah cara optimasinya yaitu sederhanakan file JavaScript Anda atau minimalkan penggunaan kode Javascript. Anda bisa bantuan developer untuk melakukan hal tersebut. Jika sudah, nantinya website Anda akan lebih cepat saat loading atau memuat halaman. 

Selain itu Anda juga bisa gunakan tools PageSpeed Insight seperti biasa.

Optimalisasi CLS

Untuk mendapatkan hasil CLS yang baik, skor CLS Anda minimal 0,1. Anda bisa gunakan lagi PageSpeed Insight dan masuk ke Diagnostics. Disana akan muncul beberapa elemen yang mengurangi skor CLS Anda. Untuk mengatasi ini yaitu jika banner terlambat muncul, Anda bisa gunakan plugin Lazy Load. 

Anda juga bisa memastikan ukuran serta layout gambar menggunakan javascript. 

Contohnya seperti dibawah ini:

.wrapper { position: relative; height: 0; /* Formula is: (height / width * 100%) */ padding-top: calc(360 / 360 * 100%); }.wrapper__img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto;}

Anda hanya perlu mengganti value diatas sesuai yang Anda inginkan atau kebutuhan Anda.

Saya rasa cukup sekian dari saya, bila ada saran atau pertanyaan bisa tinggalkan komentar dibawah. 

Source:https://www.exabytes.co.id/blog/apa-itu-core-web-vital-dan-cara-optimasinya-lengkap/

Posting Komentar

© IMAGINATOR ID. All rights reserved. Developed by Jago Desain