Website performance is important for SEO. Google favours websites with good performance and user experience. Google’s metric system, called Core Web Vitals (CWV) can be used to check how well your website is performing. Google considers these metrics when deciding how high a website should appear in search results. The newest metric in CWV is Interaction to next paint (INP), this replaced First Input Delay (FID) in March 2024. If you are a website manager, learning about INP is a must. This article will help you understand what INP is, and how to measure it through Google’s free tools.
What is INP?
Interaction to Next Paint (INP) is a measure of how quickly a website responds to user actions. It tracks the delay between when you interact with a page and when you see the result.
The longest delay among these interactions is recorded as the INP. A low INP means the website reacts quickly to what you do.
If the INP is good, the page will respond fast to user actions. For example, in online shopping, if you click the “add to cart” button, visual feedback will show that the item is now in your cart.
What do we mean by “interaction on a website”?
When you use a website, you expect to see results right away when you click, tap, or type. If it takes more than 100 milliseconds to respond, it feels slow. Making these actions faster can make the website more user-friendly.
For examples, an interaction happens when users:
– Scrolling up or down a webpage.
– Hovering over a button or link to reveal more information.
– Filling out a form or entering text in a search bar.
– Clicking on a dropdown menu to select an option.
– Watching a video or slideshow play automatically.
– Liking, sharing, or commenting on content through social media buttons.
– Dragging and dropping items to rearrange them on the screen.
– Using sliders or toggles to adjust settings or preferences.
– Clicking on a notification to view more details.
– Bookmarking or saving a page for later reference.
According to Google, what is the ideal INP?
A good INP is when it takes less than 200 milliseconds for the website to respond. If it takes between 200 and 500 milliseconds, the site could be better. If it takes more than 500 milliseconds, the response is too slow.
How to measure interaction to next paint (INP)?
The best way is to use free tools provided by Google including Google Lighthouse, Chrome Dev Tools, and Chrome User Experience Report (CrUX). One extra option is to install the Web Vitasl extension in your Chrome.
Using Lighthouse in Chrome DevTools
Lighthouse is a tool built into Chrome that helps you see how well your website is performing.
1. Open Google Chrome and go to the website you want to test.
2. Right-click on the page and select “Inspect” to open DevTools.
3. Find the “Lighthouse” tab at the top of DevTools.
4. Click on “Generate report”.
5. Once the report is ready, look for the INP metric in the “Performance” section.
Using the Performance Tab in Chrome DevTools
Chrome DevTools has a feature that lets you record what happens when you interact with your webpage.
1. Open the website in Chrome.
2. Right-click and select “Inspect” to open DevTools.
3. Go to the “Performance” tab.
4. Click the reload button (a circular arrow) to start recording.
5. Interact with the webpage as usual.
6. Stop the recording after a few interactions.
7. Check the “Summary” section for the INP metric.
Using PageSpeed Insights
PageSpeed Insights is a website where you can enter your website’s URL to get performance insights.
1. Go to PageSpeed Insight
2. Type in your website URL and click “Analyze”.
3. Scroll down to the “Field Data” section to find the INP metric.
(images from web.dev)
Using the Web Vitals Extension
The Web Vitals extension is a tool you can add to Chrome that shows performance metrics as you use your website.
1. Install the Web Vitals extension from the
2. Go to your website in Chrome.
3. Click on the Web Vitals extension icon in the top-right corner of the browser to see real-time metrics, including INP.
(image from Web Vitals extension)
What are type of data to measure INP?
You may find that the data you view in reports is different to the data collected by Google and reported in your Core Web Vitals reports. This is because there can be a big difference between “field data” and “lab data”. We’ll explain the difference between these data types below.
Field Data: This refers to actual user interactions collected as they navigate the webpage in different settings.
Lab Data: This type of data stems from controlled experiments conducted in a lab environment, providing a reliable and repeatable method to gauge performance.
Understanding Field Data and Lab data
What is Field Data?
Field data, or Real User Monitoring (RUM) data, comes from real users as they use the website. To figure out why interactions were slow, make sure to collect the following when gathering INP data from users.
- INP Value: This is the main number you need, showing how quickly the page responds to user interactions. Analyzing these values helps you see if the page meets performance standards.
- Element Selector: This tells you exactly which part of the page caused the slow interaction. Without this, you wouldn’t know which element to fix.
- Page Loading State: It’s important to know if the interaction happened while the page was still loading. When a page is loading, it’s doing a lot of things (like parsing HTML and running scripts), which can slow down interactions. Knowing this helps you decide if you need to speed up the initial load or if the interaction itself is slow.
- Interaction Start Time: This tells you the exact moment the interaction occurred, helping you see where it fits in the performance timeline.
- Event Type: Knowing whether the interaction was a click, keypress, or something else helps you pinpoint which specific event took the longest to process.
What is Lab Data?
Lab data is gathered in a controlled test setting where we create certain situations to see how things work. This data helps us find and fix problems with how the website performs.
Conclusion
In summary, Interaction to Next Paint (INP) tells us how quickly a website reacts when you click or tap on something, by measuring the time it takes for you to see the result of your action. The metric is shown in the report of Google Lighthouse, Chrome Dev Tools, and Chrome User Experience Report (CrUX) or Web Vital extension. Choose one tool that you feel most comfortable with to regularly monitor the performance of INP.
