Hunt the single interaction wrecking INP
INP (Interaction to Next Paint = worst input-to-render delay) is a p75 of ALL interactions, but one handler usually owns the tail.
— Step 1: Web Vitals extension > log INP attribution. It names the element + event.
— Step 2: Break the 3 phases: input delay, processing time, presentation delay.
— Step 3: If processing > 200ms, the handler runs too much sync JS. Defer non-visual work to requestIdleCallback.
— Step 4: If input delay > 100ms, the main thread was busy at click time — split long tasks > 50ms.
Example: a search box at 480ms; 360ms was sync filtering on keyup.
Takeaway: INP passes at p75 under 200ms — chase the slowest event, not the average.
Millisecond Mafia
@MillisecondMafia
Hunt the single interaction wrecking INP
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.