Membedah Core Web Vitals di Projek React
“Mengoptimalkan performa website dengan matriks google yaitu core web vitals di Projek React”
Topik yang lalu kita sudah bahas mengenai konsep Web Vitals itu sendiri, matriksnya, sampai alat ukurnya. Pada kesempatan ini akan lebih sharing pengalaman workshop yang pernah saya dapat dari salah satu startup e-commerce di Indonesia mengenai optimizing core web vitals secara practical steps. Sedikit mengulas mengenai core web vitals ini penting karena digunakan untuk mengukur kualitas suatu website dan mengidentifikasi matriks sesuai guideline dari google untuk meningkatkan pengalaman pengguna menggunakan sebuah website. Berikut merupakan matriks web vitals yang diambil dari lab data google. Terdapat 6 matriks web vitals yaitu First Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time, dan Cumulative Layout Shift.
Selain terdapat matriks, google juga memberikan pembobotan nilai di setiap matriksnya. Pembobotan tersebut dapat dilihat pada gambar di bawah sesuai dengan measurement tools yaitu lighthouse version 6.
Di dalam workshop tersebut diidentifikasi masalah apa saja yang biasa terjadi terhadap website perfomance dan apa saja yang dapat dioptimalkan dari sebuah website. Gambar di bawah merupakan sample app yang akan dianalisis dan dioptimalkan. Terdapat Sample App yang memiliki 2 component yaitu product component dan footer component yang masing-masing memanggil API yang telah disediakan.
Di website yang belum dioptimalkan, kita memperoleh nilai perfomance awal yaitu 19.
Dari hasil nilai performa website tersebut kita dapat membaca detail evaluasi dan suggestion yang diberikan oleh measurement tools seperti lighthouse atau web.dev/measure/, dsb. Setelah dianalisis, nilai tersebut didapatkan karena ada beberapa permasalahan yang umum biasa terjadi:
- Adanya pergeseran konten tata letak ketika load page atau yang disebut layout shifting
- Gambar-gambar yang tidak dioptimasi dengan meningkatkan kualitas pixels dan melakukan compressing size file
- File JavaScript yang terlalu besar
- API Call dipanggil dalam satu halaman
- Component dipanggil semua dalam satu halaman
- 3rd party packages yang tidak penting atau code yg tidak digunakan
Dari permasalahan tersebut kita dapat melakukan optimasi dengan:
- Mengatur css dengan memberikan value dari atribut height pada layout di User Interface. Sehingga tidak ada layout shifting, didapatkan kenaikan nilai perfomance-nya sampai 23.
- Mengoptimasi image dengan meningkatkan quality file dan melakukan compresing file size-nya. Kita bisa dapatkan kenaikan nilai perfomance-nya sampai 43
- Membuat image component yang dapat mendeteksi intersection dan menggunakan lazy load untuk mengurangi image load size dan jumlah request ke server. Kenaikan nilai perfomance-nya sampai 52.
- Menggunakan module bundler untuk re-sizing javascript file. Salah satu module bundler tools yang sering digunakan adalah webpack. Kita dapat menaikan nilai perfomance-nya sampai 67
- Membuat Lazy Footer Component untuk mengurangi request API ke server. Kenaikan nilai perfomance-nya sampai 79.
- Clean up code yang tidak digunakan dan 3rd party package yang tidak digunakan bisa menaikkan nilai perfomance sampai 88.
Dengan skor akhir 88 ini dapat disimpulkan untuk meningkatkan sebuah website dengan core web vitals kita dapat perhatikan beberapa poin di bawah ini:
- LCP atau Largest Contentful Paint berkaitan dengan konten terbesar yang di page website.
- FID atau First Input Delay berkaitan dengan sedikitnya blocking time ketika user mulai melakukan trigger pada User Interface sampai request dan mendapatkan response dari server.
- CLS atau Cumulative Layout Shift berkaitan dengan ruang yang disediakan selama proses loading page.
Penting dalam pengembangan website terutama bagi Front End Developer untuk memperhatikan performa di level browser dengan menggunakan matriks google bernama web vitals untuk meningkatkan web perfomance dan pengalaman pengguna yang luar biasa. Core Web Vitals ini bisa dijadikan salah satu upaya untuk menempatkan User Experience jadi poin utama dalam website development. Kedepannya kita akan bahas seputar web development lain lagi yang lebih seru. Thanks, sudah membaca. See you next time.
Reference:
