What Is INP? The Core Web Vital Replacing FID

From FID to INP

FID (First Input Delay) only measured the first interaction''s delay and only the blocked-main-thread portion. It didn''t fully represent real UX. INP looks at all interactions across the page lifecycle and takes the worst (usually the 98th percentile).

INP Definition and Targets

Google uses the 75th-percentile mobile INP from CrUX as a ranking signal.

How Is INP Calculated?

An interaction consists of three phases:

1. Input delay: Time from event firing + main thread busy wait
2. Processing time: Event handler execution time
3. Presentation delay: Browser render + paint time

Patterns That Degrade INP

• Long event handlers (form submit with synchronous validation)
• Large state updates in handlers (React re-render storms)
• Third-party scripts blocking the main thread
• Heavy DOM manipulation in large lists
• Competing timeouts and animations

9-Step Optimization Strategy

1. Break Long Tasks

Any JS task over 50 ms is a "long task". Use scheduler.yield() or setTimeout to break up work.

2. Defer Event Handlers

Non-urgent work goes into requestIdleCallback — analytics push, etc.

3. React''s startTransition

React 18+ lets you mark non-urgent state updates:

import {startTransition} from ''react'';
startTransition(() => setFilteredList(expensiveFilter()));

4. Debounce and Throttle

Debounce search input (300ms); throttle scroll handlers (16ms for 60fps).

5. Move Heavy Computation to Web Workers

Parsing, hashing, filtering — move off the main thread.

6. Third-Party Scripts via Partytown

Run Google Analytics, Facebook Pixel, Hotjar in a web worker. Often saves 200+ ms INP.

7. Virtual Scrolling

Render only visible rows (~30) in a 1,000-row table. react-virtuoso, tanstack-virtual are standard.

8. CSS content-visibility

.card { content-visibility: auto; contain-intrinsic-size: 300px; }

9. isInputPending() Yield Pattern

Check for pending user input during long work and yield.

Measurement: Where to Find INP

• Chrome DevTools Performance panel
• web-vitals.js library (RUM)
• PageSpeed Insights (75th percentile from CrUX)
• Search Console → Core Web Vitals

Framework-Specific Notes

React

Concurrent features (Suspense, transitions) are designed to help INP. Redux with large stores needs careful memoization.

Vue

Reactivity helps event handlers but v-for on large lists needs v-memo.

Svelte

Compile-time advantage shows in INP. Wrong store setup still hurts.

Common Mistakes

1. Trusting Lighthouse desktop scores, missing mobile field reality
2. Ignoring INP because FID was fine
3. Assuming "defer" on third-party solves it (tag manager still on main thread)
4. Doing animations in JS instead of CSS keyframes
5. One good page = whole site good (not true)

Frequently Asked Questions

Which interactions count toward INP?

Click (pointerdown/up + click), keypress (keydown/up), tap (touchstart). Scroll and hover don''t count.

Can I measure INP without RUM?

Lighthouse gives a lab approximation, but real user INP requires RUM.

Is mobile INP the same as desktop?

Mobile is usually 2-3x higher due to lower CPU power. Google uses mobile values.

Does poor INP hurt SEO a lot?

Direct ranking impact is small; poor UX leading to bounce and low dwell time hurts rankings over time.

Next Step

Free INP audit for your site — contact us. Related: Core Web Vitals Guide.