Apa Itu Core Web Vitals? Ini Pengertian dan Cara Optimasinya

Muhammad Anas adalah founder Pendidikanpedia. Anas merupakan lulusan terbaik SMKN 1 Karawang jurusan RPL tahun 2019 dan finalis 100 besar duta bahasa pelajar Jawa Barat 2017. Follow ig @muhammadanas.id

Pada akhir bulan Mei 2021 lalu, Google secara resmi memperkenalkan update algoritma terbaru yang mengutamakan pengalaman pengguna atau page experience sebagai faktor utama.

Alhasil, sejak hari itu para pemilik website terus berlomba-lomba melakukan riset UI/UX design, speed loading, serta skor core web vitals agar semakin maksimal di mata pengguna. Nah, di artikel kali ini Pendidikanpedia akan membahas secara khusus tentang teknologi core web vitals yang notabene merupakan salah satu faktor utama dalam update algoritma page experience tadi.

Apa Itu Core Web Vitals?

Mengutip dari sumber resmi Google, core web vitals adalah serangkaian faktor penting bagi Google untuk menilai kenyamanan pengunjung ketika mengakses sebuah website. Secara tidak langsung, Core Web Vitals juga berpengaruh terhadap SEO website. Apa itu SEO? Kamu bisa cek di sini apa itu SEO

Bagi sebagian orang, core web vitals saat ini dianggap sebagai ranking faktor yang bisa mendongkrak posisi website agar bisa muncul di peringkat pertama hasil pencarian. Jadi, selain teliti dalam memilih paket hosting murah gratis domain, sangat penting juga bagi para blogger dan web developer untuk mempelajari teknik optimasi yang satu ini agar website bisa berjalan lancar.

Indikator Core Web Vitals

1. Cumulative Layout Shift (CLS)

Indikator pertama yang menjadi metrik core web vitals adalah CLS atau Cumulative Layout Shift. Sesuai namanya, indikator ini memiliki fungsi utama untuk menunjukkan adanya pergeseran visual yang terjadi pada elemen halaman website ketika dalam proses loading.

Contohnya, jika kamu memasang banner iklan atau tombol, maka sebaiknya dibuat container atau pembatas elemen sehingga tidak menimbulkan pergeseran pada layar perangkat pengguna.

2. Largest Contentful Paint (LCP)

Largest Contentful Paint atau LCP merupakan indikator dari core web vitals yang hadir untuk melakukan evaluasi kecepatan muat halaman. Google menyarankan angka LCP di kisaran 2,5 detik sebagai syarat kelulusan, selebihnya website kamu perlu perbaikan agar bisa memenuhi skor core web vitals.

3. First Input Delay (FID)

Dan indikator core web vitals yang terakhir adalah First Input Delay atau yang biasa disebut FID. FID menjadi metrik yang menunjukkan kemampuan pengguna dalam melakukan interaksi pertama kali setelah halaman website selesai dimuat. Angka minimal dari FID berdasarkan panduan Google Webmaster yakni di kisaran 100 milidetik.

Tips Cara Optimasi Core Web Vitals

Di bawah ini merupakan beberapa tips yang bisa dijadikan sebagai pedoman ketika kamu ingin meningkatkan skor core web vitals. Selamat mencoba!

1. Menggunakan Web Hosting Terbaik

Tips pertama yang bisa kamu coba untuk mengoptimalkan skor core web vitals adalah dengan beralih ke paket hosting dengan resource lebih baik. Agar kecepatan website semakin optimal, sangat disarankan untuk memakai VPS (Virtual Private Server) agar tidak saling berbagi resource dengan website lain.

2. Melakukan Kompresi File 

Di antara banyaknya tips cara mengoptimalkan skor core web vitals, melakukan kompresi file adalah salah satu yang paling efektif. Mulai dari sekarang kamu bisa mengatur batas atas ukuran file yang tidak lebih dari 100kb.

Selain itu, kamu juga bisa menggunakan ekstensi .WEBP sebagai pengganti .JPG atau .PNG agar ukuran file bisa lebih kecil tanpa mengurangi kualitas gambarnya.

3. Menyederhanakan Kode CSS dan JavaScript

Menyederhanakan file CSS dan Javscript merupakan salah satu saran dari Google agar website kamu lebih cepat ketika diakses dengan berbagai macam koneksi.

Kamu bisa mulai dengan cara membuang fitur-fitur yang tidak diperlukan, seperti embed musik, elemen banner popup, kode iframe, dan aspek lain yang kurang bermanfaat bagi user.

4. Menggunakan CDN (Content Delivery Network)

Bagi blogger maupun web developer, istilah CDN (Content delivery Network) tentu sudah tidak asing lagi. Belakangan ini fitur CDN semakin populer dan banyak digunakan setelah cloudflare memberikan fasilitas CDN gratis kepada seluruh pengguna.

Kamu juga bisa memanfaatkan fasilitas gratis dari cloudflare jika belum memiliki dana untuk menggunakan CDN berbayar, tapi ingat sesuatu yang gratis tentu ada batasan dan aturan yang harus dipatuhi.

5. Menggunakan Template Fast Loading

Alternatif lain untuk mengoptimalkan skor core web vitals secara cepat dan efisien adalah dengan memasang template fast loading, Istilah tema fast loading sendiri muncul karena memang pihak pengembang sengaja membuat template yang cepat diakses serta minim script yang tidak penting bagi pembaca.

Lantas, bagaimana cara memilih template fast loading? Karena setiap website memiliki kebutuhan berbeda-beda, maka cara paling efektif adalah dengan melakukan uji coba secara langsung.

Kamu bisa mencari beberapa kandidat template, kemudian memasang satu per satu secara bergantian. Jangan lupa juga untuk melakuan uji kecepatan melalui link ini untuk mengukur skor core web vital.

6. Mengaktifkan Fitur Cache

Bagi para pembaca yang belum tahu, cache adalah sebuah proses yang dijalankan oleh browser atau aplikasi untuk menyimpan informasi sementara.

Kehadiran cache bisa membuat loading website menjadi lebih cepat bagi masing-masing pengguna, karena membuat browser tidak perlu mengunduh seluruh file dari awal. Alih-alih, browser atau aplikasi bisa menggunakan data yang sebelumnya sudah disimpan sebagai cache.

Cara mengaktifkan cache pada website sendiri sangat mudah, terutama jika kamu menggunakan CMS WordPress sebagai platform website kamu. Pasalnya, saat ini sudah ada beberapa plugin cache yang kinerjanya sangat baik.

Misalnya seperti WP Rocket, WP Fastest Cache, W3 Total Cache, dan lain-lain. Kamu tinggal memilih plugin mana yang dirasa cocok dan sesuai untuk jenis website yang sedang dikelola.

Bagaimana? Apakah penjelasan tentang apa itu core web vitals di atas sudah cukup jelas? Semoga bermanfaat dan bisa membantu kamu dalam mengembangkan website ya!

Web Browser: Pengertian, Cara Kerja, Fungsi, dan Contohnya

Web Browser: Pengertian, Cara Kerja, Fungsi, dan Contohnya

Apa itu ⭐ web browser? ⭐ Berikut pengertian ☑️ cara kerja ☑️ fungsi ☑️ manfaat ☑️ dan contoh-contoh web browser ☑️

Tinggalkan komentar