First Input Delay measures the delay before the first interaction is processed and says nothing about how long the processing took.
// FID: input received → handler starts. often ~0ms.
// INP: input received → the next paint. the whole thing.
import { onINP } from 'web-vitals'
onINP(({ value, attribution }) => {
send({ metric: 'INP', value, target: attribution?.eventTarget })
})
// a site can score well on FID and badly on INP, which is
// most sites with a heavy client framework.
The attribution data naming the element is what makes INP actionable where FID never was — knowing that the slow interaction is a specific button is a different conversation from knowing the page is slow. It is experimental in 2022 and becomes a Core Web Vital in 2024, which makes collecting it now a way to be unsurprised later.