Adanya perkembangan teknologi terus berevolusi hingga ke desain dan pengembangan situs web. Lebih lanjut, hal ini membuat user experience (UX) menjadi hal penting bagi bisnis untuk web designer untuk mengoptimalkan situs web. Adapun salah satu metrik yang sering digunakan adalah core web vitals yang merupakan kumpulan metrik yang telah untuk mengukur kinerja situs web seperti kecepatan memuat, interaktivitas, dan stabilitas visual.
Memahami core web vitals dan bagaimana pengaruhnya terhadap kinerja situs web Anda sangat penting untuk tetap mempertahankan visibilitas dan fungsi situs web. Oleh karena itu, pada artikel kali ini kami akan menjelaskan mengenai core web vitals dan bagaimana cara mengoptimalisasikannya. Dengan demikian, untuk selengkapnya Anda perlu membaca artikel berikut ini!
Apa Itu Core Web Vitals?
Core web vitals adalah inisiatif baru dari Google yang dirancang untuk mengukur dan meningkatkan pengalaman pengguna di web. Alih-alih hanya berfokus pada metrik umum seperti berapa lama waktu yang diperlukan untuk memuat seluruh situs web, core web vitals lebih berfokus pada bagaimana kinerja situs web Anda dapat terhubung untuk memberikan pengalaman pengguna yang berkualitas tinggi.
Adanya core web vital dalam membantu mesin telusur dalam pengukuran untuk memutuskan tentang halaman mana yang akan ditampilkan dalam hasil penelusuran atau berpengaruh terhadap SEO. Lebih lanjut, dengan mengukur dan mengoptimalkan metrik ini maka web developer dan pemilik situs web dapat meningkatkan pengalaman dalam memuat desktop dan perangkat seluler, meningkatkan keterlibatan pengguna, dan pada akhirnya meningkatkan rasio konversi.
Baca Juga:Â Profesi Web Developer : Job Desc dan Kualifikasi
Metrik Pengukuran dalam Core Web Vitals
Ada banyak hal penting yang dapat Anda lacak pada web, namun secara khusus ada tiga variabel sebagai metrik pengukuran dalam core web vitals, yakni sebagai berikut:
Largest contentful paint (LCP)
Largest contentful paint (LCP) mengukur waktu yang dibutuhkan untuk memuat agian terbesar halaman web, yang biasanya berupa gambar atau blok teks. Lebih lanjut, pentingnya mengukur waktu yang dibutuhkan untuk memuat konten utama halaman karena mempengaruhi seberapa cepat pengguna melihat situs Anda. Dengan demikian, saat elemen terbesar pada halaman menjadi terlihat dengan cepat, maka hal tersebut akan membantu mesin pencari memahami bagaimana pengguna melihat kecepatan dalam memuat halaman.
Google mengklasifikasi LCP menjadi tiga kelompok, yakni sebagai berikut:
- Level LCP baik jika waktu memuat kurang atau sama dengan 2,5 detik
- Level LCP perlu perbaikan jika waktu memuat kurang atau sama dengan 4 detik
- Level LCP kurang jika waktu memuat lebih 4 detik
Baca Juga:Â 10+ Tools untuk Periksa Kecepatan Website Terbaru 2022
Untuk mendapatkan level LCP yang baik, maka Anda bisa melakukan beberapa hal berikut ini:
-
Optimalisasikan gambar
Gambar dapat memainkan peran penting dalam menentukan level LCP sehingga Anda harus memastikan untuk mengoptimalkannya terlebih dahulu. Anda dapat mengubah ukuran dan mengompresnya untuk mengurangi ukurannya. Jika memungkinkan, gunakan WebP, format gambar yang yang telah disesuaikan serta mendukung animasi dan transparansi alpha.
-
Menghapus kode yang tidak diperlukan
Kode pemblokiran dapat menjadi penyebab dalam banyak kasus di mana LCP menjadi lambat. JavaScript mungkin memblokir pemuatan konten penting yang seharusnya sudah dimuat. File CSS dan skrip yang besar juga dapat menyebabkan LCP lambat. Dengan demikian, sangat penting untuk meminimalkannya dan menghapus kode yang tidak perlu.
-
Gunakan content delivery network (CDN)
Menggunakan CDN tidak hanya akan memuat gambar Anda lebih cepat tetapi juga mempercepat situs web terlepas dari mana pengguna Anda akan mengakses situs web tersebut. Lebih besar, sebagian besar CDN akan memiliki server khusus di seluruh dunia sehingga membuat transfer jauh lebih cepat.
Baca Juga:Â Apa Itu CDN? Kenali Manfaat dan Cara Kerjanya
First Input Delay (FID)
First Input Delay (FID) adalah mengukur waktu antara saat pengguna berinteraksi dengan sesuatu di halaman Anda misal mengklik tautan, formulir, tombol, tautan, dan sebagainya. Lebih lanjut, FID mungkin merupakan metrik yang paling rumit untuk dipahami dan dioptimalkan karena sangat dipengaruhi oleh JavaScript. Selain itu, Google mengklasifikasi FID menjadi tiga kelompok, yakni sebagai berikut:
- Level FID baik jika waktu memuat kurang atau sama dengan 100 milidetik
- Level FID perlu perbaikan jika waktu memuat kurang atau sama dengan 300 milidetik
- Level LCP kurang jika waktu memuat lebih 300 milidetik
Untuk mendapatkan level FID yang baik, maka Anda bisa melakukan beberapa hal berikut ini:
- Pisahkan tugas yang berjalan lama di halaman web. Tugas yang berjalan lebih dari 50 ms dianggap sebagai tugas yang berjalan lama sehingga Anda bisa memecahnya menjadi beberapa bagian dan tugas UI lainnya pun tidak diblokir.
- Tunda pembuatan skrip JavaScript pihak ketiga yang tidak perlu dan dapat meningkatkan kesiapan secara drastis.
- Gunakan web worker untuk memindahkan tugas pemrosesan ke tugas latar belakang dan biarkan UI menggunakan threads lainnya sehingga membuka blokir pemuatan elemen UI.
Cumulative Layout Shift (CLS)
Cumulative layout shift (CLS) adalah metrik yang mengukur stabilitas visual halaman web dari perspektif pengguna. CLS menunjukkan seberapa stabil elemen user interface (UI) pada halaman web dan diukur dengan seberapa banyak elemen bergerak selama pemuatan halaman.
Anda mungkin pernah melihat elemen UI pada halaman web tertentu berpindah-pindah saat halaman dimuat. Pergeseran ini berdampak negatif pada pengalaman pengguna saat mereka mengubah seluruh UI.
Hal ini memaksa pengguna untuk mempelajari kembali dan mencari elemen UI yang mereka minati. Oleh karena itu, CLS mengukur perubahan ini dan memberitahu Anda jika situs Anda termasuk dalam parameter tersebut. Dengan semakin, semakin sedikit pergeseran tata letak pada halaman web maka skor CLS akan semakin rendah sehingga menghasilkan pengalaman pengguna yang lebih baik.
Google mengklasifikasi CLS menjadi tiga kelompok, yakni sebagai berikut:
- Level CLS baik jika waktu memuat kurang atau sama dengan 0,1 detik
- Level CLS perlu perbaikan jika waktu memuat kurang atau sama dengan 0,25 detik
- Level CLS kurang jika waktu memuat lebih 0,25 detik
Untuk mendapatkan level CLS yang baik, maka Anda bisa melakukan beberapa hal berikut ini:
- Tambahkan elemen UI baru apapun setelah fold sehingga elemen UI yang ada tetap berada di tempatnya.
- Tambahkan elemen harus memiliki ruang yang dicadangkan agar tidak mendorong elemen lain muncul ke segala arah.
- Menggunakan atribut ukuran untuk elemen UI seperti gambar, video, dan sebagainya. Hal ini akan membantu memastikan bahwa elemen lain tidak menggunakan ruang hingga aset ini dimuat.
Baca Juga:Â Apa Saja Perbedaan UI dan UX?
Penutup
Core web vitals adalah metrik yang dapat mengukur dan meningkatkan pengalaman pengguna di web. Lebih lanjut, selain mampu meningkatkan SEO namun metrik ini dapat Anda gunakan untuk meningkatkan user experience. Adapun jenis matrik tersebut adalah largest contentful paint untuk mengukur loading performance, first input display untuk mengukur interaktif, dan cumulative layout shift untuk mengukur stabilitas visual.
Selain core web vitals, Anda juga meningkatkan performance website Anda dengan server yang berkualitas. Anda bisa menggunakan layanan server VPS menyediakan server dengan harga yang murah dan performa terbaik di Indonesia. Selain itu, layanan ini telah kompatibel terhadap semua sistem operasi dengan teknologi SSD NVMe Storage dengan 50 kali lebih cepat. Dengan demikian, pastikan Anda menggunakan server yang handal untuk pengalaman users yang lebih baik.
