Interaction to Next Paint (INP) is a new Core Web Vital metric focused on responsiveness that is scheduled to replace First Input Delay on March 12, 2024. Optimizing for INP is easier with the right tools to monitor and track it.
What Is Interaction to Next Paint (INP)?
INP measures the amount of time a site visitor waits after doing something like clicking a button or typing and the time it takes for the website to provide a visual feedback. INP is a metric showing the amount of time visual feedback is blocked after a user interaction.
The idea behind this metric is that an unresponsive webpage is a poor user experience. For example, adding a product into a shopping cart should immediately produce a visual feedback response showing the site visitor that the interaction was responded to. In that specific example, INP is not measuring the time it takes to add a product to the shopping cart, it only measures how long the visual feedback of that action is blocked.
Lower INP scores mean fast response times, which is the goal. Good INP scores are those under 200 milliseconds.
JavaScript and CSS are the primary targets to look at for INP optimization.
INP measures the following user interactions:
- Mouse clicks
- Taps on devices that have a touchscreen.
- Pressing on a keyboard (both physical and virtual keyboards)
INP Measurement And Optimization Tools
There is no tool that can singlehandedly fix INP problems because the problems originate in the JavaScript and CSS used by themes, plugins, features and extra functionalities used on a webpage.
For example, installing and using an image carousel or animation effects will load extra JavaScript and CSS code which can negatively impact INP scores. Minifying JavaScript and CSS isn’t always the solution, which means a key step for optimizing for Interaction To Next Paint is to audit the code and identify anything that doesn’t help the webpage and the user achieve their purpose.
Thus, the key functionality of an INP optimization tool is to identify what’s blocking or delaying the visual feedback from a user interaction.
Five Interaction To Next Paint Diagnostic Tools
1. Site Kit by Google – Analytics, Search Console, AdSense, Speed
WordPress Plugin By Google
Site Kit by Google, with over 4 million WordPress installations, is one of the most powerful ways to integrate Google search data into a WordPress dashboard for easy access while inside WordPress.
This tool displays PageSpeed Insights and Search Console data, including actionable advice on what to improve.
2. DebugBear Interaction to Next Paint Tool (Free And Paid Versions)
Free INP Debugger
DebugBear is a popular page speed monitoring tool that has a pro version that offers scheduled tests, event notifications, performance tests that preview impacts before live deployment another benefits.
But it also offers free tools like this excellent Interaction to Next Paint tool that will crawl a webpage and diagnose issues and provide actionable tips for fixing Interaction To Next Paint issues.
3. Web Vitals Chrome Extension
This Chrome extension offers core web vitals metrics, including INP. A useful feature of this extension is the unique heads up display (HUD) that overlays the webpage which can be helpful when developing or making changes to a webpage.
The Treo site speed tool offers incredibly fast Page Speed tools with an attractive user interface that’s easy to read and understand.
A useful feature with Treo is that users can adjust select to see metrics in specific countries.
There is an advanced tool for measuring core web vitals metrics from actual site visitors that can be deployed by individual publishers on their own web servers. This tool can enable publishers to see real core web vitals scores that are useful for troubleshooting actual webpage issues. An overview and explainer is available here.
Bonus Tools
Looker Studio
Looker Studio, previously known as Google Data Studio, is a data visualization tool that enables users to connect to data sources and visualize the information with easy to understand reports and dashboards. Just navigate here to find the Chrome UX Report connector that can transform Chrome UX (CrUX) origin data into a report that makes it easy to see the real-world CWV trends.
Google has published an explainer in the Chrome for Developers pages that shows how to set up a CrUX Dashboard on Looker. Check it out, it’s easy to be a superstar SEO with this tool!
Website Builder Platforms Are Ready
Website builder platform Duda anticipated the Interaction to Next Paint and has already worked to make sure that sites using their platform score well on the new metric.
According to Russ Jeffery, Director of Platform Strategy:
“Website performance is important to the agencies and SaaS companies that rely on Duda for their clients’ sites. Helping their clients rank better in search, deliver better conversions & user experiences, and ultimately drive better results.
As of writing, about 75% of all websites built on Duda are already within the “good” range for INP.
Websites built on Duda can also track and optimize for these metrics using third-party tools like WooRank, which is built into the Duda App Store. Clients can set up custom Google Analytics/Google Tag Manager events to send these metrics into GA4.”
Get Ready For INP
While INP might not be a direct ranking factor, INP is still a useful metric for creating the fastest page experience because site speed is known to improve sales, clicks and ad views and it aligns with signals that Google uses for ranking.
Featured Image by Shutterstock/Kues
