Interaksi ke Cat Berikutnya (INP): Panduan Teknis Lengkap & Standar Pengoptimalan

Interaction to Next Paint (INP) adalah metrik resmi Google Core Web Vital yang diperkenalkan untuk menilai responsivitas antarmuka halaman web secara keseluruhan.

Berbeda dengan First Input Delay (FID), yang hanya mengevaluasi interaksi awal saat memuat halaman, INP mengamati latensi semua interaksi pengguna (klik, ketukan, dan input keyboard) yang terjadi sepanjang masa kunjungan pengguna ke suatu halaman.

Jawaban-Ringkasan Pertama

Interaction to Next Paint (INP) adalah metrik Core Web Vital yang mengukur waktu yang berlalu sejak pengguna berinteraksi dengan halaman (mengklik, mengetuk, atau menekan tombol) hingga browser menampilkan bingkai visual yang diperbarui ke layar.Latensi INP terdiri dari tiga sub-bagian: Penundaan Input, Durasi Pemrosesan, dan Penundaan Presentasi.Skor INP yang lulus adalah 200 milidetik atau kurang pada persentil ke-75 dari kunjungan pengguna sebenarnya.Pada bulan Maret 2024, INP resmi menggantikan First Input Delay (FID) dalam algoritma pemeringkatan pencarian Google.

Ambang Batas Skor & Skala Penilaian INP

Untuk memberikan pengalaman pengguna yang responsif, halaman web harus memenuhi ambang batas Data Web Inti berikut untuk INP yang dievaluasi pada persentil ke-75 dari kunjungan lapangan pengguna sebenarnya:

Bagus: $\le 200\text {ms} $ (Hijau) - Respons UI yang cepat dan lancar yang terasa instan bagi pengguna.
Perlu Peningkatan: $> 200\text {ms} $ dan $\le 500\text {ms} $ (Amber) - Penundaan yang nyata selama klik atau ketukan yang memengaruhi interaksi pengguna.
Buruk: $> 500\text {ms} $ (Merah) - Pembekuan antarmuka yang parah dan pemblokiran thread utama yang menyebabkan frustrasi pengguna dan rasio pentalan yang tinggi.

Latensi INP	Peringkat Kinerja	Dampak Pengalaman Pengguna	Status Peringkat Pencarian Google
$\le 200\teks {ms} $	Bagus	Umpan balik visual instan saat diketuk atau diklik.	Nilai kelulusan penuh untuk penilaian Core Web Vitals.
$201\teks {ms} - 500\teks {ms} $	Perlu Perbaikan	Interaksi yang lamban;penundaan nyata dalam memperbarui status UI.	Mungkin mengalami penalti peringkat pada kata kunci kompetitif.
$> 500\teks {ms} $	Kasihan	Tombol tidak responsif, UI terhenti, dan kebuntuan thread utama.	Gagal dalam penilaian Data Web Inti;penalti peringkat aktif.

Tiga Komponen Latensi Interaksi INP

Saat pengguna berinteraksi dengan elemen di halaman web, total latensi interaksi yang diukur oleh INP terdiri dari tiga fase berurutan:

Penundaan Input: Waktu yang berlalu antara saat pengguna memulai interaksi fisik (klik, ketuk, atau tekan tombol) dan saat thread utama browser mulai mengeksekusi pengendali peristiwa terkait.Penundaan input terutama disebabkan oleh kemacetan thread utama dari tugas JavaScript latar belakang yang panjang yang berjalan selama pemuatan halaman atau perenderan ulang komponen.
Durasi Pemrosesan: Waktu yang dihabiskan untuk mengeksekusi kode JavaScript dalam semua event listening yang terdaftar untuk interaksi tersebut (seperti onclick , onkeydown , atau penangan pembaruan status reaktif kerangka kerja).
Penundaan Presentasi: Waktu yang berlalu setelah penanganan peristiwa selesai hingga browser selesai menghitung penghitungan ulang gaya, tata letak, mengecat piksel yang diperbarui, dan menampilkan bingkai visual berikutnya pada perangkat keras tampilan pengguna.

Secara matematis, total latensi INP untuk satu interaksi dinyatakan sebagai:

$$\text{INP Latency} = \text{Input Delay} + \text{Processing Duration} + \text{Presentation Delay}$$

Mengapa Google Mengganti FID dengan INP pada Maret 2024

First Input Delay (FID) hanya mengukur komponen penundaan input dari interaksi pertama pada sebuah halaman.Meskipun FID membantu mengidentifikasi halaman yang pemblokiran thread utamanya mencegah interaksi awal, FID mengalami dua keterbatasan teknis utama:

Cakupan Interaksi Tunggal: FID mengabaikan semua interaksi pengguna berikutnya setelah pemuatan halaman, gagal menangkap kelesuan selama navigasi sisi klien aplikasi halaman tunggal (SPA) yang kompleks.
Pengukuran Latensi Tidak Lengkap: FID hanya mengukur penundaan input, mengabaikan waktu pemrosesan dan penundaan presentasi sepenuhnya.Pengendali peristiwa yang membutuhkan waktu 2.000 md untuk dieksekusi menerima skor FID yang lulus jika penundaan input awal di bawah 50 md.

Pada bulan Maret 2024, Google secara resmi mengganti FID dengan INP sebagai faktor peringkat Core Web Vital resmi.INP mengevaluasi persentil ke-75 dari seluruh interaksi selama suatu sesi, memberikan penilaian yang jauh lebih komprehensif dan realistis mengenai pengalaman pengguna nyata di seluruh aplikasi web modern.

Interaksi Pengguna yang Memenuhi Syarat vs Peristiwa yang Tidak Memenuhi Syarat

INP mengukur interaksi pengguna yang terpisah di mana pengguna mengharapkan umpan balik visual langsung.Memahami interaksi mana yang diperhitungkan dalam INP sangat penting untuk pembuatan profil diagnostik:

Interaksi Terukur

Klik Mouse: Mengklik tombol, tautan, kontrol formulir, atau komponen interaktif khusus.
Ketuk Layar Sentuh: Mengetuk elemen pada perangkat seluler atau tablet.
Keyboard Press: Menekan tombol keyboard fisik atau virtual (seperti Enter , Space , atau tombol alfanumerik dalam input teks).

Peristiwa yang Tidak Terukur

Menggulir & Menggeser: Menggulir halaman atau menggeser komponen peta tidak memicu pengukuran INP.
Melayang: Memindahkan kursor mouse ke atas elemen tanpa mengklik tidak termasuk dalam INP.
Animasi Pemuatan Halaman: Animasi CSS yang terpicu secara otomatis tanpa masukan pengguna tidak diperhitungkan dalam INP.

Strategi Teknis yang Terbukti Mengoptimalkan Skor INP Tinggi

Untuk mengurangi latensi INP di bawah ambang batas 200 ms, tim teknisi harus menerapkan pengoptimalan teknis berikut:

Pisahkan Tugas Thread Utama yang Panjang: Gunakan requestIdleCallback() , setTimeout() , atau scheduler.yield() untuk memecah tugas eksekusi yang berdurasi lebih dari 50 md menjadi bagian yang lebih kecil, sehingga memungkinkan browser memproses input pengguna yang masuk dengan segera di antara blok eksekusi tugas.
Optimalkan Pembaruan Status Kerangka Kerja: Pada aplikasi Vue 3 dan Nuxt 4, tunda rendering ulang UI yang tidak kritis menggunakan batasan komponen async atau tangguhkan pembaruan referensi reaktif.
Minimalkan Penghancuran Tata Letak: Hindari membaca properti geometri DOM (seperti offsetHeight atau getBoundingClientRect() ) segera setelah memutasi elemen DOM, yang memaksa penghitungan ulang tata letak sinkron.
Mengurangi Kedalaman Pohon DOM: Pohon DOM yang terlalu besar meningkatkan penghitungan gaya dan biaya tata letak selama penundaan presentasi.Pertahankan jumlah total elemen DOM di bawah 1.500 node per halaman.
Optimalkan Skrip Pihak Ketiga: Skrip pihak ketiga yang berat (analitik, jaringan iklan, widget obrolan pelanggan) sering membajak thread utama.Tunda atau pekerja web membongkar skrip pihak ketiga yang tidak penting.

Pemantauan Polri Berkelanjutan dengan SimpleOps

SimpleOps terus melacak kinerja INP dengan menangkap metrik kumpulan data lapangan pengguna nyata Chrome UX Report (CrUX) bersama dengan audit Lighthouse sintetis.SimpleOps secara otomatis memberi tahu tim Anda setiap kali INP persentil ke-75 situs web Anda melebihi 200 md, memastikan aplikasi Anda tetap cepat, lancar, dan dioptimalkan untuk peringkat mesin pencari.