curriculum/challenges/english/blocks/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md
Let's walk through a practical way to measure Interaction to Next Paint, or INP, using Chrome DevTools.
First of all, let's open DevTools by pressing "F12" or Right-click and click on "Inspect".
Now, let's say you have a search bar on your webpage.
Imagine a user types a query, but it takes 600ms before the suggestion dropdown appears. Chrome DevTools would mark this high INP value.
You can optimize by deferring heavy JavaScript, reducing long tasks, and improving event handling. The INP would then drop to 150ms, making interactions feel instant.
Cool, right?
Now, let's look at a practical measurement technique that helps identify interaction delays so you can create a faster and smoother user experience!
First, we would open Chrome DevTools. We would do so, once again, by opening Google Chrome, navigating to a webpage that we want to analyze, and pressing "F12" or right-clicking the page and clicking "Inspect". Now, let's head to the "Performance" tab - and there is everything that you need.
Now we are ready to identify the Interaction to Next Paint, or INP. We are going to look for the longest interaction delay recorded. A good INP is generally below 200ms, and a poor INP is above 500ms. And that's it!
How do you open Chrome DevTools?
By pressing "F12" or Right-clicking and selecting "Inspect".
By typing "DevTools" in the browser search bar.
Think about the easiest way to access developer tools in Chrome.
By clicking on the Chrome settings menu.
Think about the easiest way to access developer tools in Chrome.
By installing a separate software.
Think about the easiest way to access developer tools in Chrome.
1
What does a high INP value indicate?
The webpage loads quickly.
Consider what happens when you click something and have to wait for a response.
There is a delay between a user interaction and the visual update.
The browser has cached all resources efficiently.
Consider what happens when you click something and have to wait for a response.
The webpage does not have any JavaScript.
Consider what happens when you click something and have to wait for a response.
2
Which of the following is NOT a way to improve INP?
Reducing main thread work.
One of these options makes performance worse instead of better.
Using requestIdleCallback() for non-critical scripts.
One of these options makes performance worse instead of better.
Adding more large images and scripts to the page.
Deferring or lazy-loading heavy assets.
One of these options makes performance worse instead of better.
3