Cara Optimumkan INP (Interaction to Next Paint) untuk Laman Web Lebih Responsif

Artikel ini adalah adaptasi daripada sumber dokumentasi Chrome dan web.dev yang sah. Panduan ini membantu anda memahami dan mengoptimumkan metrik Interaction to Next Paint (INP) – salah satu metrik teras Web Vitals yang mengukur responsiviti laman web terhadap interaksi pengguna.

Apa Itu INP?

INP mengukur keseluruhan responsiviti halaman web terhadap semua interaksi pengguna (klik, sentuhan, ketukan papan kekunci) sepanjang lawatan. Nilai INP yang baik adalah di bawah 200 milisaat. Nilai antara 200-500 milisaat menunjukkan respons yang perlu diperbaiki, manakala lebih 500 milisaat dianggap responsiviti yang lemah.

Tiga Komponen INP

Setiap interaksi boleh dipecahkan kepada tiga fasa berturut-turut:

1. Input Delay (Kelewatan Input): “bermula apabila pengguna memulakan interaksi dengan halaman, dan berakhir apabila panggilan balik acara untuk interaksi mula berjalan.” Ini adalah tempoh masa dari saat tindakan pengguna diterima oleh sistem pengendalian sehingga pelayar dapat mula memproses panggilan balik event handler pertama interaksi tersebut.

2. Processing Duration (Tempoh Pemprosesan): “terdiri daripada masa yang diambil untuk panggilan balik acara berjalan hingga selesai.” Fasa ini merangkumi semua event handler dalam bingkai (frame) tersebut.

3. Presentation Delay (Kelewatan Persembahan): Ketiga-tiga komponen interaksi adalah “kelewatan input, tempoh pemprosesan, dan kelewatan persembahan.” Kelewatan persembahan adalah masa selepas panggilan balik dilaksanakan sehingga bingkai dipaparkan pada skrin pengguna.

Cadangan Tindakan untuk Setiap Komponen

1. Mengoptimumkan Input Delay

“Secara umumnya, anda ingin memastikan setiap bahagian interaksi adalah sesingkat mungkin supaya laman web anda mempunyai peluang terbaik untuk memenuhi ambang 'baik' metrik INP, tanpa mengira peranti pengguna.”

Strategi utama:

• Kurangkan beban thread utama: Input delay tinggi biasanya disebabkan oleh kerja lain yang menduduki thread utama sebelum panggilan balik interaksi dapat bermula. Interaksi itu sendiri “mungkin bukan penyebab langsung INP yang perlahan.”
• Elakkan kerja thread utama yang berlebihan semasa pengguna cuba berinteraksi dengan halaman anda. Selagi anda mengelakkan ini, input delay sepatutnya cukup rendah.

2. Mengoptimumkan Processing Duration

Jika tempoh pemprosesan tinggi, ini bermakna “event handlers interaksi adalah penyebab langsung INP yang perlahan.”

Strategi utama:

• Kurangkan atau tangguhkan kerja yang dilakukan oleh event handlers.
• Audit semua pendengar: “Mana-mana kod yang berjalan dalam mana-mana event listener akan melambatkan interaksi.” Ini termasuk pendengar daripada skrip yang berbeza, kod rangka kerja (framework) atau pustaka (library) yang berjalan dalam pendengar, seperti kemas kini keadaan yang mencetuskan render komponen.
• Jangan lupa skrip pihak ketiga – kod mereka juga menyumbang kepada kelewatan.
• Pertimbangkan code-splitting, pemuatan progresif, dan pemecahan tugas panjang untuk meningkatkan masa respons.

3. Mengoptimumkan Presentation Delay

Jika kelewatan persembahan tinggi, siasat kerja rendering pelayar selepas panggilan balik.

Strategi utama:

• Fokus pada mengurangkan masa fasa paling perlahan.
• Cuba pelbagai interaksi pengguna yang berbeza semasa merakam untuk lebih memahami penyumbang terbesar INP untuk halaman tersebut.

Cara Mengukur INP

Anda boleh mengukur INP menggunakan:

• Chrome DevTools: Gunakan panel Performance Insights dan cari panel “INP breakdown” untuk melihat pecahan setiap komponen interaksi.
• JavaScript: Ukur peristiwa dan masa panggilan balik untuk interaksi.

Nota Penting

Dokumentasi rasmi

developer.chrome.com/docs/web-platform/optimize-inp

Dengan mengikuti panduan ini, anda boleh meningkatkan responsiviti laman web dan memastikan pengalaman pengguna yang lebih lancar, terutamanya pada peranti mudah alih yang lebih perlahan.