INP dan Core Web Vitals: Respons Cepat Lebih Penting dari Efek Berat

Pernah menekan filter, lalu bertanya-tanya apakah kliknya masuk? Atau mengetik di form yang terasa tertinggal setengah langkah? Halaman mungkin sudah tampil, tetapi belum benar-benar siap merespons. Interaction to Next Paint atau INP mengukur sisi pengalaman yang sering lolos dari diskusi “website cepat”.

INP mengamati latency interaksi selama kunjungan pengguna—klik, tap, dan input keyboard—lalu mewakili respons halaman berdasarkan interaksi terlama dengan perlakuan terhadap outlier. Untuk pengalaman yang baik, web.dev menyarankan INP 200 milidetik atau kurang pada persentil ke-75, dipisahkan antara mobile dan desktop.

Mulai dari momen yang menghasilkan nilai

Jangan optimasi semua animasi secara acak. Catat perjalanan penting: membuka navigasi, memilih variasi produk, mengubah jumlah, mengirim form, atau membuka detail transaksi. Field data dari pengguna nyata paling berguna karena memperlihatkan perangkat dan kondisi yang benar-benar ada. Setelah interaksi lambat ditemukan, barulah reproduksi di lab untuk mencari penyebabnya.

Respons lambat punya tiga bagian

1. Input delay: browser belum mulai menjalankan handler karena main thread sedang sibuk.

2. Processing duration: kode di dalam handler membutuhkan waktu terlalu lama.

3. Presentation delay: perubahan sudah dihitung, tetapi frame berikutnya belum sempat ditampilkan.

Karena itu, solusi tidak selalu “upgrade server”. JavaScript besar, long task, render komponen berulang, DOM yang terlalu besar, dan layout thrashing dapat menahan frame di browser pengguna. Server cepat tetap penting, tetapi INP sering mengajak kita melihat pekerjaan yang terjadi setelah response tiba.

Perbaikan yang biasanya terasa

• Kerjakan sesedikit mungkin di event handler, lalu tunda pekerjaan non-kritis.

• Pecah long task agar browser punya kesempatan merespons input dan menggambar frame.

• Kurangi render dan DOM yang tidak memberi nilai langsung pada layar tersebut.

• Muat fitur berat ketika dibutuhkan, bukan semuanya pada kunjungan pertama.

• Pertahankan feedback instan—misalnya state loading atau perubahan tombol—agar pengguna tidak menebak.

Animasi tidak harus dihapus. Animasi yang membantu orientasi tetap berguna. Yang perlu dipertanyakan adalah efek yang menahan tugas utama, khususnya di ponsel kelas menengah. Coba produk di perangkat nyata, nyalakan penghematan daya, dan lakukan tugas yang sama seperti pengguna. Pengalaman yang baik lebih mudah dirasakan daripada diperdebatkan.

Panduan teknis yang menjadi rujukan artikel ini adalah web.dev: Optimize INP.