Lebih Dekat dengan Metrik Kinerja Web Interaction To Next Paint (INP)

Dalam dunia pengembangan web, kinerja dan kecepatan halaman web merupakan faktor yang sangat penting. Google telah mengenalkan metrik Core Web Vitals untuk membantu pengembang web dalam mengukur dan meningkatkan kualitas pengalaman pengguna. Salah satu metrik yang termasuk dalam Core Web Vitals adalah Interaction To Next Paint (INP). Kali ini IDCopy akan menjelaskan secara detail tentang INP termasuk apa itu INP, cara mengukurnya, dan bagaimana meningkatkan nilai INP.

Apa Itu INP?

Interaction To Next Paint (INP) adalah metrik Core Web Vitals yang dirancang untuk memberikan representasi dari delay interaksi suatu halaman secara keseluruhan. Metrik ini bekerja dengan mengambil sampel dari interaksi terlama yang terjadi saat user mengunjungi halaman. Pengukuran INP merupakan representasi dari berapa lama user harus menunggu untuk berinteraksi dengan seluruh halaman. INP telah ditambahkan ke dalam ekstensi Google Lighthouse Chrome pada PageSpeed Insights.

Bagaimana INP Bekerja?

INP hanya memperhatikan beberapa jenis interaksi tertentu, seperti klik mouse pada elemen interaktif, menekan tombol pada keyboard fisik atau virtual, serta interaksi ketukan (tap) yang dapat mencakup peristiwa pointerup dan pointerdown. Semua interaksi ini dianggap sebagai “logical user interaction“.

Bagian-bagian dalam INP

Setiap logical user interaction (seperti klik mouse dan menekan tombol) diukur dalam beberapa fase, yaitu waktu presentasi, waktu pemrosesan, dan delay input. Hasil dari event yang terkait (misal klik mouse pada bagian tertentu) mengandung total waktu yang dihabiskan untuk ketiga fase tersebut. Durasi terlama akan direkam sebagai nilai INP.

Nilai INP yang Baik

Dokumentasi web.dev Google menjelaskan bahwa nilai Interaction To Next Paint (INP) yang baik adalah sekitar 200 milidetik atau kurang. Berikut penjelasan detailnya:

  • INP di bawah atau sama dengan 200 milidetik berarti halaman Anda responsif dengan baik.
  • INP di atas 200 milidetik dan di bawah atau sama dengan 500 milidetik berarti responsivitas halaman Anda perlu ditingkatkan.
  • INP di atas 500 milidetik berarti halaman Anda responsif dengan buruk

Google juga mencatat bahwa INP masih dalam tahap eksperimental dan panduan yang direkomendasikan terkait metrik ini kemungkinan akan berubah.

Perbedaan antara INP dan First Input Delay (FID)

Perbedaan utama antara INP dan FID adalah bahwa FID hanya mempertimbangkan interaksi pertama di halaman, sedangkan INP memperhitungkan semua interaksi halaman. FID mengukur metrik delay input saja dan tidak memperhatikan pengendali peristiwa serta berapa lama waktu yang diperlukan untuk mempresentasikan frame berikutnya dari interaksi. Lebih Jelas mengenai FID bisa ditemukan di link ini.

Mengidentifikasi Masalah INP pada Website

Untuk menemukan masalah INP pada sebuah website, kita harus mempertimbangkan perbedaan antara data lab (data simulasi) dan data field (data sesungguhnya). Satu-satunya cara untuk mendapatkan data realistis tentang experience yang dialami oleh user adalah dengan menggunakan data field. 

Mengukur INP dengan Data Lab dan Data Field

Untuk mengukur INP secara efektif, idealnya menggunakan kombinasi data lab dan data field. Data lab diperoleh melalui pengujian di lingkungan yang dikendalikan dengan kondisi yang telah ditentukan sebelumnya (simulasi). Data lab ini disebut sebagai “data lab” karena pengujian dilakukan di dalam lingkungan yang terkendali.

Sementara itu, data field, atau yang juga dikenal sebagai Real User Monitoring (RUM) data, diperoleh melalui pemantauan pengguna di halaman web. Data ini mengukur kinerja individu dari pengalaman user yang sebenarnya, seringkali memberikan wawasan tentang metrik kinerja tertentu. Data field didasarkan pada kunjungan user pada web kita, sehingga mencerminkan kondisi perangkat yang digunakan pengguna, lokasi geografisnya, serta kondisi jaringan yang digunakan.

Pentingnya Kombinasi Data Lab dan Data Field

Data field memberikan informasi yang lebih realistis tentang pengalaman yang dialami oleh user. Ini karena data tersebut didasarkan pada pengalaman pengguna yang sebenarnya dan mencakup berbagai perangkat, lokasi, dan kondisi jaringan. Dalam beberapa kasus, data field dapat menunjukkan bahwa halaman web berpotensi memuat dengan sangat lambat bagi sebagian pengguna. Oleh karena itu, penting untuk mengumpulkan data field sendiri guna memahami distribusi kinerja yang lebih akurat.

Namun, data lab juga memiliki perannya sendiri. Dengan melakukan pengujian di lingkungan yang terkendali, Anda dapat mengidentifikasi masalah dan melakukan eksperimen untuk memperbaiki kinerja halaman sebelum diterapkan ke user sesungguhnya. Kombinasi data lab dan data field memberikan gambaran yang lebih lengkap tentang kinerja halaman Anda.

Cara Meningkatkan Nilai INP Anda

Untuk meningkatkan nilai INP, Anda dapat melakukan beberapa langkah optimasi pada pekerjaan utama (main thread) halaman web Anda. Beberapa langkah yang dapat Anda lakukan antara lain:

  1. Minimalkan penggunaan font pihak ketiga dan gunakan font sistem yang sudah ada di perangkat.
  2. Hindari penggunaan plugin yang terlalu banyak dan membebani proses muat halaman.
  3. Optimalisasi pemrosesan JavaScript dan CSS agar lebih efisien.
  4. Cache resource halaman web untuk mengurangi waktu unduhan.
  5. Periksa dan perbaiki masalah jaringan yang dapat mempengaruhi kinerja halaman web.

Penting untuk diingat bahwa meningkatkan nilai INP bukanlah jaminan kesuksesan SEO secara instan. Ini hanya salah satu dari banyak faktor yang perlu diperhatikan dalam rangka melakukan perbaikan kualitas dan kinerja halaman web secara menyeluruh.

Kesimpulan

Dalam upaya untuk meningkatkan pengalaman user (user experiences) dan kinerja halaman web, pemahaman tentang metrik Interaction To Next Paint (INP) pada Core Web Vitals sangatlah penting. INP adalah metrik yang mengukur delay interaksi halaman web. Dengan memahami cara mengukurnya serta langkah-langkah untuk meningkatkannya dapat membantu Anda mengoptimalkan kualitas halaman web Anda. Kombinasi data lab dan data field, serta melalui langkah-langkah optimasi yang tepat, dapat meningkatkan nilai INP dan meningkatkan pengalaman user pada halaman website.

Tags: , , , , ,

Semua

Premium

x