In the ever-evolving landscape of web performance metrics, Interaction to Next Paint (INP) has emerged as a crucial indicator of user experience. INP is a performance metric that will become one of the three Google Core Web Vitals in March 2024.

Understanding INP

Before diving into optimisation techniques, let's briefly understand what INP is and why it matters.

INP measures the latency of all interactions a user has with your page and reports a single, overall score. It aims to capture the responsiveness of a page throughout its entire lifecycle. A good INP score is 200 milliseconds or less, while anything above 500 milliseconds is considered poor.

How to measure INP for a page interaction in Chrome DevTools

You can use the DevTools Performance tab to measure the Interaction to Next Paint metric.

• Open DevTools by right-clicking the page and selecting Inspect

• Open the Performance tab

• Start a new recording by clicking the record button in the top left

• Interact with the page, for example by clicking a button or typing in a text field

• When you're done, click the Stop button in DevTools and wait for the recording to process

Once the recording is complete, DevTools will display a lot of data, with the start of your recording on the left and the end on the right. Don't worry you can ignore most of it for now and focus on the INP value.

Find and expand the Interactions lane, then hover over the interaction you're interested in. You will see the duration of the interaction, as well as the interaction type.

You can also see the breakdown of the INP metric into three components:

• High input delay indicates that background activity on the page is preventing the page interaction from being processed

• High processing time means the event handlers for the interaction take a long time to run

• High presentation delay indicates that styling, layout, and painting the updated UI is delaying the next paint.

The grey whiskers on the left and right show the input and presentation delay.

CPU & Network throttling

If you're on a fast desktop computer you may struggle to replicate the slow laggy experiences your real users are having.

To emulate a less powerful device visiting your website you can enable CPU throttling in Chrome DevTools:

1. Open the Performance Capture Settings by clicking on the top right gear icon in DevTools

2. Select "4x" or "6x" CPU throttling in the dropdown

This will make CPU processing take 4 or 6 times longer than it otherwise would on your device.

Analyse INP with DevTools

The browser main thread is responsible for rendering content on the page and handling interactions. You can see what the main thread is up to in the "Main" lane in the performance recording.

The main thread can be busy even before the user interaction and this leads to input delay. The multiple event fired events show that the browser is running tasks that have been scheduled by the page. If a user interaction happens while this background task is in progress then the browser first has to finish the scheduled task before handling the input event.

Reducing the amount of scheduled tasks running in the background can reduce the input delay. You can also try to speed up those tasks so the delay is less significant.

If we click at the "Task" at the top of the main thread lane we can see a Summary view at the bottom of the screen.

The Bottom-up view which show us how much time is spent on individual JavaScript functions or tasks like compiling JavaScript code. Ideally we're hoping to find one function that stands out as taking much more time than the others. In that case we can focus on optimising that function, calling it less or making it run faster.

Improving Input delay during the initial page load process

Sometimes most interactions on a website are fast, but the initial loading process contains main long CPU-blocking tasks. If the user clicks anywhere on the page, for example to highlight text, then you'll get a high Interaction to Next Paint score with a big input delay component.

Few techniques that will help us minimise input delay

• Minimise JS code size: Reducing the amount of JavaScript code can decrease parsing and execution time, leading to faster page loads.

• Code splitting and Lazy loading: Breaking code into smaller chunks and loading them only when needed can improve initial load times and reduce main thread congestion.

• Non-UI JavaScript operations: Offloading non-UI related tasks to background processes can free up the main thread for user interface updates.

• Web Workers & Service workers: These allow running scripts in background threads, separating intensive computations from the main thread.

• Rate Limiter: Implementing rate limiting can prevent excessive function calls or API requests, reducing strain on the main thread.

• Debounce and Throttle: These techniques help control the rate at which certain functions are called, particularly useful for optimizing event handlers tied to user interactions.

Conclusion

Optimising INP is an ongoing process that requires attention to detail and a good understanding of how your web application behaves. Chrome DevTools provides invaluable insights into performance bottlenecks, allowing you to identify and fix issues that impact your users' experience.

Remember, the goal is to create web applications that feel instant and responsive. By focusing on INP and utilising the power of Chrome DevTools, you're well on your way to delivering exceptional user experiences.