Dari FID ke INP: Yang Berubah di Core Web Vitals 2024

TL;DR: Sejak 12 Maret 2024, Google mengganti First Input Delay (FID) dengan Interaction to Next Paint (INP) sebagai metrik responsivitas resmi di Core Web Vitals. INP mengukur seluruh siklus interaksi pengguna, bukan hanya delay input pertama. Threshold "good" INP adalah di bawah 200 ms (p75). Banyak situs yang sebelumnya hijau di FID kini kuning atau merah di INP karena cakupan pengukuran yang lebih luas.

Dalam beberapa proyek terakhir, saya melihat tren konsisten: situs Next.js yang dulu mulus di FID 80-100 ms ternyata punya INP 250-400 ms saat diuji ulang. Bukan karena kualitas turun, tapi karena INP menangkap apa yang dulu tidak terlihat: interaksi setelah hydrate, scroll handler berat, dan modal yang lambat membuka.

Kenapa Google Mengganti FID dengan INP?

FID hanya mengukur delay input pertama, dan hanya jeda sebelum browser mulai memprosesnya. Realitanya, pengguna mengalami banyak interaksi setelah input pertama: klik tombol, expand accordion, submit form. FID tidak mengukur itu. INP mengisi celah ini dengan mengukur p98 dari semua interaksi sepanjang sesi.

Acuan resmi: web.dev - INP overview.

Threshold INP yang Harus Diingat

Pengukuran dilakukan pada percentile ke-75 (p75) dari Chrome User Experience Report. Artinya, 75% sesi pengguna nyata harus berada di bawah threshold "good".

Formula sederhana untuk memprediksi dampak optimasi:

$\text{INP}{\text{baru}} = \text{INP}{\text{lama}} - (\text{handler_time}{\text{terpotong}} + \text{render_block}{\text{terpangkas}})$

Kalau handler dipangkas dari 180 ms ke 60 ms, dan render-blocking script dipotong 90 ms, ekspektasi penurunan INP adalah sekitar 210 ms.

Studi Kasus: Migrasi Vetmo dan Atmo

Saat me-refactor Vetmo, platform pet care berbasis Next.js, INP awal di mobile mid-tier ada di 380 ms. Tiga intervensi yang dipakai: memecah komponen modal jadi lazy-loaded chunk, memindahkan analytics script ke next/script dengan strategy lazyOnload, dan mengganti state-update sinkronous di onClick dengan startTransition. Hasilnya INP turun ke 145 ms dalam dua minggu.

Pola serupa diterapkan di Atmo, LMS internal training. Kuncinya bukan satu fix besar, melainkan banyak optimasi kecil yang dikalibrasi pada interaksi real-world.

Checklist Migrasi FID ke INP

1. Audit interaksi dengan Chrome DevTools Performance panel (record real interaction, lihat Long Tasks).
2. Pakai Web Vitals JS library untuk capture INP di production via tag manager.
3. Lazy-load komponen berat dengan dynamic() di Next.js.
4. Pakai startTransition untuk update state non-urgent di React 18+.
5. Bagi long-running JS jadi chunk lebih kecil, pakai requestIdleCallback.
6. Cek third-party script dengan WebPageTest dan pertimbangkan defer.
7. Pasang structured data Article supaya hasil migrasi terukur di GSC.

Pertanyaan Umum

Apakah FID benar-benar dihapus?

Ya, FID dihapus dari laporan Core Web Vitals di GSC sejak September 2024. Namun bisa diukur manual untuk debugging.

Berapa lama biasanya butuh untuk turun ke INP "good"?

Pengalaman menangani 10+ situs Next.js, 4-8 minggu untuk mayoritas situs sedang. Situs e-commerce dengan banyak third-party script bisa lebih lama.

Apakah Server Components otomatis menyelesaikan masalah INP?

Tidak otomatis. Server Components mengurangi JS bundle, yang membantu, tapi masalah handler berat di Client Components tetap perlu di-refactor manual.

Penutup: INP Adalah Cermin UX Sebenarnya

INP memaksa developer dan marketer berhenti menganggap "load cepat = pengalaman bagus". Yang diukur sekarang adalah responsivitas sepanjang sesi, bukan first impression. Bagi pemilik website bisnis di Indonesia, ini berita baik: investasi kecil pada interaksi sehari-hari akan terbayar di SERP dan retensi.