Web Vitals: Apa Itu & Bagaimana Mengukurnya

Kinerja Web Web

Panduan Anda untuk metrik kinerja penting yang digunakan Google untuk memengaruhi peringkat aplikasi web Anda

Data Web Inti (sumber gambar asli)

Jack adalah seorang insinyur perangkat lunak muda yang mencintai pekerjaannya. Suatu pagi ketika dia sedang duduk di mejanya dengan kepala di kepalan tangannya, dia menemukan ide brilian tentang aplikasi web baru yang bisa membuatnya mendapatkan terobosan besar. Dia merasa sangat antusias dan tanpa membuang waktu, dia mulai mengerjakan proyek ini. Setiap hari, selama berjam-jam, dia duduk di depan komputernya dan mengetuk-ngetukkan jarinya di keyboard. Dia menerapkan fitur kompleks, memperbaiki bug rumit, dan membersihkan kode terus menerus untuk meningkatkan kualitasnya.

Dia juga menyadari betapa pentingnya kinerja web — halaman web yang lambat membuat pengguna frustrasi dan membuat mereka cenderung tidak bertahan meskipun mereka menunggu aplikasi seperti Gmail yang terkadang membutuhkan waktu 6 detik atau lebih lama untuk dimuat. Tetapi aplikasinya bukan Gmail, jadi ia harus menawarkan pengalaman yang lebih baik dengan waktu muat yang jauh lebih sedikit.

Dia begadang, mengerjakan masalah ini dan menggunakan teknik seperti:

  • menunda pekerjaan dengan JavaScript,
  • pemuatan malas,
  • pemuat skrip async,
  • rendering sisi klien,
  • dan konten dinamis.

Berbulan-bulan berlalu dan Jack sangat bersemangat untuk live setelah menyelesaikan implementasi. Dia memulai koneksi dengan server FTP-nya dan melakukan penerapan yang sukses.

Beberapa minggu setelah penerapan, ia menerima umpan balik dari pengguna yang frustrasi yang tidak puas dengan respons aplikasi. Saat mereka mencoba mengklik tombol tertentu, beberapa konten yang dimuat terlambat dan -dirender menekan tombol penting ke bawah:

Contoh Pergeseran Tata Letak Kumulatif³

Google telah menghukum Jack juga dengan menurunkan peringkatnya di halaman hasil pencarian.

Jack bingung; aplikasinya memiliki waktu PageLoad yang sangat kompetitif yang dia banggakan. Tapi apa yang dia lewatkan adalah bahwa PageLoad tidak sepenuhnya menangkap apakah sebuah situs web terasa cepat. Lebih buruk lagi, teknik yang dia gunakan seperti pemuatan lambat, konten asinkron, dan komponen dinamis:

sering meningkatkan waktu PageLoad tetapi menciptakan pengalaman yang lebih lambat dari perspektif pengguna akhir.

Ini adalah lereng curam yang bisa mengarah ke akhir yang buruk. Jack sedih, dan hatinya hancur. Tapi dia ingin memperbaiki aplikasinya.

Di bagian berikut, kami akan menjelaskan kepadanya tiga metrik kinerja penting yang telah dia abaikan dan menunjukkan berbagai teknik untuk mengukur dan memahaminya sehingga dia dapat menghasilkan aplikasi yang sehat tanpa perlu menjadi ahli kinerja web.

Jika Anda ingin membangun otot kinerja web Anda, Anda dapat bergabung dengan kami dan belajar bersama Jack.

Table of ContentsWhy PageLoad Time Is Not Enough?
The Core Web Vitals
∘ Largest Contentful Paint (LCP)
∘ Cumulative Layout Shift (CLS)
∘ First Input Delay (FID)
How to Gather These Metrics?
∘ Lab data
∘ Field data
Interpreting Performance Data
∘ The average
∘ Percentiles
Case Study: Edeka
Final Thought