Skip to main content

Cara Memperbaiki INP: Metrik yang Menggantikan FID dan Cara Menanganinya

INP menggantikan FID sejak 2024 dan menilai seluruh interaksi, bukan hanya yang pertama. Penyebab INP buruk, cara menemukannya, dan urutan perbaikannya.

Cara Memperbaiki INP: Metrik yang Menggantikan FID dan Cara Menanganinya

Apa Itu INP

Interaction to Next Paint mengukur jeda antara pengunjung melakukan sesuatu dan layar menanggapinya — dan Google menetapkan ≤ 200 milidetik sebagai batas baik, diukur di persentil ke-75.

Yang dihitung sebagai interaksi: klik, ketukan di layar sentuh, dan penekanan tombol papan ketik. Menggulir tidak termasuk.

INP mengambil interaksi terburuk (atau mendekati terburuk pada halaman dengan sangat banyak interaksi) selama satu kunjungan. Artinya satu tombol yang lambat bisa merusak angka seluruh halaman, meski sisanya responsif.

Sebagai bagian dari Core Web Vitals, INP harus dibaca dari kunjungan nyata; satu pengujian cepat hanya berguna untuk mencari penyebabnya.

Bedanya dengan FID

INP menggantikan First Input Delay sebagai metrik interaktivitas sejak 2024. Perbedaannya bukan sekadar nama, dan ini yang menentukan cara memperbaikinya:

FID (sudah tidak dipakai)INP
Interaksi yang dinilaihanya yang pertamaseluruh interaksi
Yang diukurjeda sebelum penanganan dimulaisampai layar benar-benar berubah
Batas baik100 ms200 ms

Karena FID hanya menilai jeda sebelum pemrosesan dimulai, banyak situs lolos dengan mudah. INP jauh lebih ketat karena mengukur sampai pengunjung melihat hasilnya — termasuk waktu memproses dan waktu menggambar ulang.

Akibat praktisnya: situs yang dulu hijau di FID bisa merah di INP tanpa ada yang berubah di kodenya. Itu bukan penurunan mutu, melainkan pengukuran yang lebih jujur.

Tiga Bagian yang Menyusun INP

  1. Jeda masukan — waktu menunggu sampai penanganan bisa dimulai, biasanya karena utas utama sedang sibuk.
  2. Waktu pemrosesan — menjalankan kode yang menanggapi interaksi itu.
  3. Jeda penggambaran — waktu sampai layar benar-benar diperbarui.

Bagian pertama dan ketiga sering lebih besar daripada yang diperkirakan, dan keduanya berasal dari hal yang sama: utas utama yang terlalu sibuk.

Penyebab yang Paling Sering

  • JavaScript berat yang memblokir utas utama, terutama saat halaman baru dimuat.
  • Skrip pihak ketiga — pelacak, obrolan langsung, peta, dan iklan yang berjalan bersamaan.
  • Tugas panjang yang berjalan lebih dari 50 milidetik tanpa jeda.
  • Penanganan peristiwa yang mengerjakan terlalu banyak dalam satu jalan.
  • Perubahan DOM besar setelah setiap interaksi.
  • Kerangka kerja yang menghitung ulang seluruh bagian untuk perubahan kecil.

Urutan Perbaikan

  1. Cari interaksi yang paling lambat lebih dulu. INP diambil dari yang terburuk, jadi memperbaiki yang sudah cepat tidak mengubah angkanya.
  2. Kurangi dan tunda JavaScript yang tidak dibutuhkan di layar awal.
  3. Tinjau ulang skrip pihak ketiga. Buang yang tidak dipakai, dan muat sisanya setelah halaman siap.
  4. Pecah tugas panjang jadi potongan kecil, supaya utas utama sempat menanggapi interaksi di sela-selanya.
  5. Tampilkan tanggapan visual lebih dulu, lalu kerjakan pekerjaan beratnya. Pengunjung yang melihat tombolnya bereaksi tidak menekan berulang kali.
  6. Kurangi pekerjaan di dalam penanganan peristiwa — pindahkan yang bisa ditunda ke luar jalur interaksi.
  7. Hindari perubahan DOM yang lebih besar dari yang dibutuhkan.

Langkah ketiga yang paling sering menghasilkan perbaikan besar di situs biasa, dan paling sering ditolak karena skrip itu dipasang bagian lain di perusahaan.

Masalah skrip berat ini sejalan dengan JavaScript SEO saat JavaScript juga menentukan apakah isi halaman berhasil terbaca mesin pencari.

Cara Menemukan Interaksi yang Lambat

  • PageSpeed Insights menyebutkan elemen yang menyumbang INP terburuk dari data lapangan.
  • Panel Performance di alat pengembang untuk merekam interaksi dan melihat pemecahan waktunya.
  • Ekstensi Web Vitals untuk melihat angka INP langsung saat menjelajah situs sendiri.
  • Uji di perangkat kelas menengah, bukan di komputer kerja Anda. INP paling terasa di perangkat yang prosesornya lebih lemah.

Pertanyaan Umum Seputar INP

Kenapa INP saya buruk padahal halaman terasa cepat?

Karena Anda mengujinya di perangkat yang terlalu bagus. INP diukur di persentil ke-75 kunjungan nyata, dan sebagian besar pengunjung memakai ponsel kelas menengah.

Apakah menggulir dihitung sebagai interaksi?

Tidak. Yang dihitung klik, ketukan, dan penekanan tombol papan ketik.

Apakah masih perlu memperbaiki FID?

Tidak. FID sudah tidak dipakai sejak digantikan INP pada 2024. Perbaikan yang menyasar INP mencakup semua yang dulu menyasar FID.