Engrain by ByteRush

QLT.01.03 Mid-level· 12 minCore — asked often

Optimizing INP: making every click feel instant

Break an interaction into input delay, processing time and presentation delay, find long tasks and long animation frames, yield to the main thread, cut hydration cost, debounce heavy work, skip off-screen rendering and use React transitions.

Comes up in: Web fundamentals, Frontend system design, React

Learn#

Raghav’s shop page loads fast, but “Add to cart” sometimes takes over half a second to show anything. Its INP is 600 ms, poor.

Interaction latency is the time from a click, tap or key press to the next paint that shows a response. It has three phases:

  1. Input delay: waiting for whatever task is already running on the main thread.
  2. Processing time: running your event handlers.
  3. Presentation delay: style, layout and paint of the result.

INP takes roughly the worst interaction of a visit, and 200 ms or less at the 75th percentile is good.

The main fix for long processing is to show feedback first, then do the rest later: update the button, yield to the main thread (JS.01.07), and continue with the heavy work in a new task so the browser can paint in between.

A 600 ms tap, phase by phaseStep 1 of 4

Call stack

  • analytics.js (180 ms)

State

  • input delay 180 ms

The user taps "Add to cart". An analytics script is running a 180 ms task, so the tap waits: input delay 180 ms.

Read the steps as text
  1. The user taps "Add to cart". An analytics script is running a 180 ms task, so the tap waits: input delay 180 ms.
  2. The click handler runs: it updates the cart and re-renders the whole product grid. Processing time 250 ms.
  3. Style, layout and paint of the changed grid take 170 ms more: presentation delay.
  4. Total 600 ms, poor. Fixes: defer analytics, update only the cart badge first and yield, render the grid in a transition.

Predict#

Predict first

A click handler takes 20 ms, but INP for that click is 350 ms. What is the most likely cause?

Interview angle#

Say it like this — about 30 seconds

“An interaction’s latency is input delay, processing time and presentation delay. First I find the slow interactions from field data, with the web-vitals attribution build, then reproduce them in the Performance panel. For input delay I cut or split long tasks, such as third-party scripts and hydration. For processing, I show feedback first and yield, debounce expensive work, and use React transitions for heavy re-renders. For presentation delay I shrink DOM updates and use content-visibility for off-screen content.”

Stays on your device. Nothing is uploaded.
Follow-up What is the Long Animation Frames API?
It reports frames over 50 ms with the scripts that caused them, which helps attribute poor INP in the field.
Follow-up How does hydration hurt INP?
Hydrating a big page is a long task; taps during it wait. Reduce JavaScript, use selective hydration, or ship less with Server Components.
Follow-up Why update the UI before heavy work in a handler?
So the next paint shows feedback quickly; INP ends at that paint.

Practice#

Guided

Compute a visit’s INP the way the browser does, and find the dominant phase of an interaction.

Done when

  • Latency is the sum of the three phases.
  • INP skips one highest interaction per 50, otherwise it is the worst.
  • worstPhase names the biggest phase.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

Name the three phases of an interaction.

Input delay, processing time, presentation delay.

Which interaction does INP report?

Roughly the worst one; one highest is ignored per 50 interactions.

What is the first fix for long processing in a handler?

Update the UI first, then yield and do the heavy work later.

Which API attributes slow frames to scripts in the field?

The Long Animation Frames (LoAF) API.

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round
A long task is any main-thread task over 50 ms; long animation frames (LoAF) group work per frame and name the scripts involved, so they are better for diagnosing INP .
Check yourself: What counts as a long task?

Any main-thread task over 50 ms.

How it works underneathSenior rounds

INP skips one highest interaction for every 50, so a long visit is not judged by a single outlier; most visits have fewer than 50 interactions, so the worst is reported .

Check yourself: Why does INP ignore some interactions on busy pages?

It skips one highest interaction per 50, so one outlier does not dominate long visits.

Edge cases and trapsWhere people slip
In React, keep urgent updates small and put heavy re-renders in startTransition (RCT.02.03).
Debounce work tied to typing, such as search, and avoid layout thrashing in handlers (WEB.01.04).
Check yourself: How can React reduce processing time for heavy updates?

Mark non-urgent updates as transitions so urgent ones paint first.

In productionStaff-level answers
content-visibility: auto lets the browser skip off-screen sections, cutting presentation delay on long pages (WEB.02.02).
Reduce hydration with less client JavaScript, islands or Server Components, and load third-party scripts late.
Check yourself: Which CSS property cuts rendering of off-screen sections?

content-visibility: auto.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.