ReactJS

INP for Core Web Vitals

Need technical help?

Our experts will get back to you within 24 hours.

What is INP?

INP is a recently established core web vital metric that measures the total interaction delay, or, to put it another way, how quickly a website displays a new visual user interface following user activities such as keystrokes, clicks, and touches.

What is a good INP Score?

An INP score of less than 200 milliseconds is regarded desirable, however, a score greater than 500 milliseconds is poor and might have a detrimental impact on your search rankings.

Which interactions are considered while measuring INP Score, and which are not?

User interactions are taken into account in the INP metric below:

making mouse clicks.

tapping on a touchscreen device.

hitting a key on an on-screen or actual keyboard.

INP measurement excludes the following interactions:

Moving the cursor over the items

Scrolling

Is INP and FID the same?

FID (First Input Delay) only considers the delay of the first user interaction on a page, with a focus on load responsiveness.

INP (Interaction to Next Paint) is an improved measure that monitors all page interactions, including input delay, event handling, and visual updates.

While FID measures how quickly a page replies initially, INP provides a more comprehensive picture of overall responsiveness.

How can we measure INP?

Google PageSpeed Insights

Chrome DevTools Performance Panel

Web Vitals Chrome Extension

Lighthouse in Chrome DevTools

Minimize JavaScript Execution

Reducing the bundle size and avoiding heavy scripts can help to prevent blocking of the main thread, therefore improving the INP.

Techniques:

// Before: Static import (blocks main thread)import HeavyComponent from './HeavyComponent';// After: Dynamic import (better performance)import dynamic from 'next/dynamic';const HeavyComponent = dynamic(() => import('./HeavyComponent'),{ssr: false, // Disable server-side rendering if not neededloading: () => <p>Loading...</p> // Optional loading component});

Code splitting: Use dynamic imports to load only the code required for the current view.

Tree Shaking: Remove unneeded code using bundlers such as Webpack or esbuild.

Lazy Loading: Wait until non-critical components are needed before loading them.

Optimize input handling

Prevent excessive function calls while changing inputs quickly (for example, typing into a search box).

Techniques:

import { useCallback } from 'react';import { debounce, throttle } from 'lodash';// Debounce Example (API call after typing stops)const handleSearch = useCallback(debounce((value) => {fetchData(value);}, 500), []);// Throttle Example (Limit scroll handler execution)const handleScroll = useCallback(throttle(() => {console.log('Scrolled');}, 200), []);

Debouncing: Trigger the event after a delay.

Throttling: Ensure that the event is only triggered once within a given time frame.

Prevent unnecessary re-renders (Below React v19)

Excessive re-rendering increases the main thread effort, affecting INP.

Techniques:

import React, { useCallback, useMemo } from 'react';// Memoized child componentconst ChildComponent = React.memo(({ data }) => {console.log('ChildComponent rendered');return <div>{data}</div>;});// Parent component with optimizationsconst ParentComponent = ({ items }) => {const expensiveCalculation = useMemo(() => items.length * 100,[items] // Only recalculates when items change);const handleClick = useCallback(() => console.log('Clicked!'),[] // Stable callback reference);return (<div><ChildComponent data={expensiveCalculation} /><button onClick={handleClick}>Click Me</button></div>);};

React.memo: Prevents components from being re-rendered when their props have not changed.

useCallback & useMemo: Memorize functions and values to ensure consistent references.

Avoid Long Tasks

Long tasks (>50ms) can block the main thread, delaying user interactions. Break up huge operations into smaller parts to keep the app responsive.

Techniques:

// Instead of blocking the main thread:// expensiveFunction();// Defer execution during idle periods:if (typeof window !== 'undefined') {requestIdleCallback(() => {expensiveFunction();}, { timeout: 1000 }); // Optional timeout}