Core Web Vitals
“Matriks Google untuk optimizing web perfomance yang akan memberikan pengalaman pengguna yang luar biasa dalam menggunakan website application”
Penting untuk kita menyadari bahwa prioritas pengembangan sistem tidak hanya kecepatan dalam delivering fitur pada website atau sistem, namun juga perlu menjaga kualitas pengembangan sebuah fitur pada website atau sistem. Pengembangan website perlu dilakukan improvement dari performa website. Web performance jadi salah satu faktor yang memberikan kenyamanan user dalam menggunakan sebuah website. Performa sebuah website ini dekat dengan pekerjaan Front End Developer. Improvement begitu penting untuk memberikan kualitas pengalaman pengguna dalam jangka panjang di sebuah pengembangan website. Sebelum berbicara improvement, perlu kita ketahui alat pengukuran sebuah website dan parameter apa saja yang diukur.
Core Web Vitals
Google berinisiatif menghadirkan Core Web Vitals sebagai poin kritikal dalam memberikan pengalaman pengguna. Setidaknya ada 3 aspek dari pengalaman pengguna yaitu, loading, interactivity, and visual stability.
LCP(Largest Contentful Paint) merupakan waktu render dari gambar atau teks blok di dalam satu viewport. Tujuannya untuk mengukur loading perfomance. Ketika halaman pertama loading setidaknya LCP di bawah 2.5 seconds untuk memberikan pengalaman pengguna yang baik.
FID(First Input Delay) merupakan waktu dari pengguna melakukan action(click or etc) di dalam satu page sampai browser benar-benar memberikan respon. Tujuannya untuk mengukur interactivity. Halaman sebaiknya memiliki FID di bawah 100 miliseconds untuk memberikan pengalaman pengguna yang baik.
CLS(Cumulative Layout Shift) merupakan total skor pergeseran letak tampilan komponen di setiap halaman dalam sebuah website. mengukur visual stability. Halaman sebaiknya memiliki CLS di bawah 0.1.
Alat untuk mengukur Core Web Vitals antara lain seperti lighthouse, pagespeed insights, chrome ux report, search console, chrome dev tools, lighthouse, web vitals extension. Masing-masing measurement tools memiliki kegunaan dan kelebihannya masing-masing. Namun tujuannya tetap untuk mengukur LCP, FID, dan CLS. Bahkan di beberapa tools dapat mengukur total blocking times.
Alur untuk memaksimalkan Core Web Vitals dengan measurement tools kurang lebih seperti ini:
- Search Console gunakan lebih awal untuk mengetahui halaman-halaman yang perlu perhatian khusus
- Setelah dapat mengidentifikasi halaman-halaman tersebut dapat menggunakan PageSpeed Insight untuk issue tiap halaman yang lebih detail
- Untuk mengukur keberhasilan solving code development di tiap issue dapat menggunakan lighthouse atau chrome dev tools sekaligus dapat rekomendasi yang dapat diperbaiki kembali
- Jika diperlukan dashboard pengukuran Core Web Vitals dapat menggunakan Chrome UX Report hasil dari API Page Speed Insight
- Gunakan web.dev/measure untuk mengetahui panduan prioritas yang harus dioptimalkan terlebih dahulu
Baca juga Membedah Web Applications — Storage
Selain menggunakan tools, kita juga dapat mengukur website yang sudah kita kembangkan sendiri atau bahkan membuat measurement tools monitoring sendiri. Untuk dapat mengukur Core Web Vitals pada website kita atau untuk membuat measurement tools monitoring sendiri dapat menggunakan web-vitals JavaScript Library, salah satu contoh function-nya seperti berikut:
Google telah memberikan panduan step by step untuk melakukan improvement dalam website development yang dinamakan Core Web Vitals beserta dengan Measurement Tools-nya. Hal ini tentu angin segar untuk peningkatan website development. Semoga dapat dimaksimalkan dan bermanfaat dalam pengembangan website. Terimakasih sudah membaca. Ke depan kita akan bahas website development yang seru lainnya. See you next time.
Referensi:
