Mengenal Core Web Vitals dan Cara Optimasinya

Google pada 28 Mei 2020 mengumumkan bahwa mesin pencarian mereka akan menggunakan faktor ranking baru. Faktor baru yang dimaksud ini adalah page experience atau dalam bahasa indonesia pengalaman ketika seseorang berkunjung dan mengakses suatu halaman web. Faktor-faktor ini bernama Core Web Vitals. Hal ini sesuai dengan keselarasan website terhadap penggunannya, dimana loading experience, interaktivitas, dan stabilitas visual konten halaman sangat di perhatikan. Jika digabungkan ini adalah dasar dari Core Web Vitals. Untuk lebih jelasnya kami digital marketing agency Toprank akan memberikan penjelasannya berikut ini.

3 Aspek Penting Core Web Vitals

1. LCP ( Largest Contentful Paint )

Segala hal yang berhubungan dengan kecepatan suatu website saat dimuat.

2. FID ( First Input Delay )

Terkait dengan responsivitas halaman, beserta elemen – elemen yang ada didalamnya.

3. CLS ( Cumulative Layout Shift )

Dilihat dari stabilitas layout sebuah halaman website.

Untuk penjelasan ketiga aspek diatas, bisa anda lihat dibawah ini.

LCP – Largest Contentful Paint

LCP sendiri artinya adalah durasi waktu yang dibutuhkan untuk membuat elemen terbesar dalam sebuah halaman website. Elemen disini bisa berupa banyak hal yang tidak hanya mencakup gambar atau video, bahkan teks yang cukup panjang pun bisa dikategorikan sebagai salah satu LCP. Bagian ini sangat diperhatikan oleh para praktisi SEO terutama pemilik jasa SEO profesional Toprank.

Salah satu hal yang perlu diingat adalah aspek ini menekankan pada konten yang mempunyai ukuran terbesar yang pertama kali dimuat pada saat seorang user mengunjungi halaman website dan elemen – elemen lain setelahnya tidak termasuk meskipun ukurannya juga cukup besar.

LCP digunakan sebagai pengganti metrik yang sempat dipakai oleh Google yaitu FCP atau First Contentful Paint. Perbedaan yang mendasar dari FCP jika dibandingkan dengan LCP adalah FCP mencakup elemen halaman website yang pertama kali dimuat, terlepas apakah elemen tersebut ukurannya kecil atau besar.

Jika anda melihat ilustrasi diatas, dapat dilihat jika dalam FCP elemen yang berhubungan mencakup logo, judul konten dan beberapa baris kalimat yang tampil saat sebuah halaman pertama kali diakses.

Akan tetapi google mengubah indikator pages dikatakan mempunyai loading yang cepat, hal ini ditunjukkan dalam elemen LCP. Pada ilustrasi tersebut elemen seperti featured image merupakan sebuah konten visual yang pertama kali di load dan seakan-akan membuat website loading nya seperti lebih cepat.

Maka dari itu, beberapa elemen seperti featured image perlu anda evaluasi dalam beberapa website yang sedang anda optimasi untuk mendapatkan skor yang bagus dalam kategori LCP.

FID – First Input Delay

First Input Delay adalah rentang waktu yang dibutuhkan oleh sebuah halaman website untuk dapat memberikan respons ketika ada interaksi pertama kali yang dilakukan pengunjung website tersebut. Yang termasuk interaksi disini adalah klik atau input dan bukan scroll atau zoom.

Akan tetapi, jika ditelisik lebih lanjut aspek ini belum terlalu sempurna. Karena FID hanya diukur oleh Google lewat data lab, dimana untuk menentukan penilaiannya hanya berdasarkan klik atau input. Jadi jika user tidak langsung berinteraksi dengan website seperti mengklik menu atau tombol lainnya maka nilai FID website akan jelek.

CLS – Cumulative Layout Shift

Aspek Core Web Vitals yang satu ini mempunyai tolak ukur dari perubahan layout yang terjadi saat website dimuat. Salah satu contoh CLS adalah ketika anda sedang akses website yang berpindah tempat ke posisi lain. Saat ingin mengklik, halaman tersebut tiba – tiba muncul banner.

Hal-hal diatas bisa membuat skor CLS menjadi buruk dimata google, sehingga anda perlu melakukan evaluasi kembali dan memposisikan diri anda sebagai seorang user yang sedang mengunjungi website tersebut, sehingga anda bisa mendapatkan hasil optimasi yang tepat dan efektif.

Cara Mengecek Skor ‘Core Web Vitals’

Sekarang ini sudah ada beberapa tools yang bisa digunakan untuk menampilkan data atau informasi yang berhubungan dengan core web vitals, antara lain:

1. PageSpeed Insights

2. Google Search COnsole

3. Chrome UX Report

4. Chrome Web Vitals Extension

Meskipun tools diatas sangat bermanfaat untuk mengukur Core Web Vitals, Anda hanya perlu menggunakan satu tools saja. Anda dapat mengecek data Core Web Vitals secara general di Google Search Console. Jika ingin mengukur dan mengevaluasi elemen yang perlu dioptimasi bisa mengunakan PageSpeed Insights.

Jika anda ingin melihat data core web vitals di Google Search Console anda tinggal akses Dashboard GSC anda dan klik menu Core Web Vitals yang terdapat dalam sidebar.

Ketika anda mengklik menu tersebut anda akan langsung ditampilkan Dashboard Core Web Vitals dengan berbagai data dan informasi yang bisa anda evaluasi dan teliti.

Anda juga bisa cek nilai Core Web Vitals di PageSpeed Insights dengan cara yang cukup simpel. Ketika akses situs tersebut, anda tinggal ketikan URL yang akan diperiksa.

Anda juga bisa mengetahui skor Core Web Vitals untuk perangkat desktop maupun mobile. Anda bisa menemukan data ini di bagian Metrics atau Field Data.

Disini anda akan mengetahui beberapa indikator penilaian dari LCP, FID serta CLS dan bagaimana cara mengoptimasi ketiga aspek tersebut. Simak penjelasannya dibawah ini.

Cara Optimasi LCP dan Indikator Penilaiannya

Skor LCP yang bagus adalah yang rata – rata kecepatan loading elemen – elemen tersebut kurang dari 2,5 detik. Selebihnya akan dianggap buruk oleh google. Maka dari itu anda harus perhatikan mana saja konten yang dianggap oleh Google sebagai LCP. Hal ini dapat dilihat dari informasi yang bisa anda dapat di PageSpeed insights, sehingga bisa anda langsung optimasi untuk website.

Beberapa cara untuk menaikkan skor LCP, antara lain:

1. Meningkatkan efisiensi CSS dan file JavaScript

Cara ini bisa dilakukan dengan memperkecil ukuran atau memperbaiki render-blocking keduanya sehingga file-file javascript dan css tersebut tidak menyebabkan sebuah website lama untuk dimuat.

2. Mengoptimasi file yang berukuran besar

Dengan mengkompress gambar atau file yang memiliki ukuran cukup besar, anda bisa menggunakan lazy load untuk memberikan kesan seakan – akan halaman tersebut di loading secara cepat.

3. Melakukan perbaikan rendering di browser

Anda cukup menggunakan javascript hanya pada beberapa fungsi saja yang memang benar – benar penting menggunakan SSR atau server-side rendering serta pre-rendering.

4. Percepat waktu loading website

Untuk aspek yang satu ini anda bisa gunakan Content Delivery Network atau CDN serta plugin cache, sehingga elemen – elemen dari sebuah website dapat dimuat dengan lebih cepat pada website.

Baca juga: Peluang Bisnis Online yang Sangat Menjanjikan

Cara Optimasi FID dan Indikator Penilaiannya

Skor FID yang baik adalah ketika interaksi pertama kali di website tersebut dilakukan sebelum 100 milidetik. Hal ini sebenarnya sangat bergantung pada user yang mengunjungi website, karena meskipun user tidak pergi ke halaman lain, tetapi membaca dan scrolling halaman website tersebut, sehingga skor FID nya tetap dianggap buruk.

Cara termudah dalam meningkatkan nilai FID  adalah dengan meningkatkan kecepatan loading website. Caranya dengan mengoptimalkan JavaScript. JavaScript sendiri digunakan untuk membuat halaman website secara dinamis dan interaktif. Penggunaan javascript terlalu banyak dalam satu halaman akan membuat loading website semakin berat.

Untuk anda pengelola web yang ingin mengoptimasi JavaScript agar skor FID bagus, harus menyederhanakan file – file JavaScript. Meminimalisir penggunaan JavaScript untuk hal – hal yang bersifat esensial. Dengan demikian, user yang berkunjung ke website anda dapat dengan cepat melakukan interaksi terhadap elemen di halaman website.

Anda bisa cek file JavaScript yang loading halaman lambat di PageSpeed Insights, dan merujuk pada bagian Opportunities lalu lihat poin Eliminate render-blocking resources.

Cara Optimasi CLS dan Indikator Penilaiannya

Untuk skor Cumulative Layout Shift yang dianggap baik oleh Google adalah minimal 0,1. Cara menghitung nilai dari CLS ini merujuk pada dua faktor yaitu Impact Fraction dan Distance Fraction, untuk penjelasan kedua faktor tersebut anda bisa lihat di penjelasan berikut.

Anda lihat pada ilustrasi diatas, terjadi perpindahan elemen dalam suatu website pada saat sebelum dan sesudah proses loading website terjadi. Pergerakan elemen-elemen tersebut diukur dengan perbedaan persentase penggunaan layar dari sebelum dan sesudah loading, hal ini disebut impact fraction.

Ketika sebuah elemen memakan sekitar 50 persen bidang layar dan elemen berikutnya muncul, elemen tadi malah bergeser ke bawah sebesar 30 persen, sehingga bisa dihitung impact fraction sebesar 80 persen atau 0,80. Untuk distance fraction ini dihitung dari jarak pergeseran elemen dibagi dengan dimensi ukuran terbesar di layar (Panjang atau Tinggi). Misalnya tinggi layar yang ada merupakan 100 dan jarak elemen tersebut berpindah adalah sebesar 30 maka bisa dibilang jarak perpindahannya adalah sebesar 0,25

Rumus Menghitung Nilai CLS

Nilai Skor CLS = Impact Fraction x Distance Fraction

JIka diambil contoh kasus diatas maka perhitungan skor nilai CLS halaman tersebut adalah 0,80 x 0,30 = 0,24 sehingga dapat dikatakan skor CLS halaman tersebut cukup buruk dan perlu dilakukan optimasi yang detail agar bisa mendapatkan skor CLS yang baik. Anda tidak perlu repot – repot mengukur skor CLS anda sendiri, cukup lihat PageSpeed insight di bagian Diagnostics dalam poin Avoid Large Layout Shifts.