How to Improve INP (Interaction to Next Paint) Score on Websites

How do you improve INP score on a website? The short answer: reduce the main-thread work that delays the next visible paint after a user clicks, taps, types, or interacts with the page. In practice, that means breaking up long JavaScript tasks, removing unnecessary scripts, simplifying event listeners, optimizing render-blocking resources, controlling third-party code, and measuring results with real user data. A good INP score is 200 ms or less; 200-500 ms needs improvement, and anything above 500 ms is considered poor.

INP, short for Interaction to Next Paint, is one of the key Core Web Vitals metrics for SEO and user experience in 2026. Google no longer looks only at how quickly a page loads; it also evaluates how smoothly users can interact with that page after it appears. A product filter that opens late, an add-to-cart button that feels frozen, a mobile menu that responds slowly, or a form field that lags while typing are all classic signs of INP problems.

In this guide, you will learn how to measure INP, how to identify the technical bottlenecks behind a poor score, and which practical optimization steps you can apply as a developer, site owner, or WordPress administrator. We will also cover the indirect performance impact of hosting infrastructure, CDN usage, and secure connections with practical examples. If you want to build on a performance-focused foundation, you can review Web Hosting Packages, and for WordPress-based projects, you can compare WordPress Hosting options.

What Is INP and Why Does It Matter?

INP measures the overall responsiveness of user interactions on a page. A visitor clicks a button, switches tabs, opens a menu, types into a form field, or taps an element on mobile. The browser processes that interaction, runs JavaScript, calculates styles and layout, and then creates a new visual state on the screen. The time between the interaction and that visual update is what INP evaluates.

In previous years, First Input Delay, or FID, was the more familiar responsiveness metric; however, FID focused only on the delay of the first interaction. INP takes a broader view by evaluating interactions throughout the entire life of the page. That makes it a better representation of real user experience for e-commerce sites, blogs, SaaS dashboards, corporate websites, membership platforms, and interactive web applications.

Google’s recommended thresholds are as follows:

INP matters not only for SEO but also for conversion rates. For example, if a filter button on a mobile category page opens 700 ms late, users may assume it did not work, tap it again, or leave the page entirely. By contrast, interfaces that respond in the 150-180 ms range feel more reliable, faster, and more professional.

How to Measure INP Score

Before optimizing INP, you need accurate measurement. Lab tools can show likely problems, but real user data reflects actual devices, network conditions, browsers, and user behavior in the field. The healthiest approach is to use both types of data together.

1. Run a quick check with PageSpeed Insights

PageSpeed Insights shows real user INP data when Chrome User Experience Report data is available. Review mobile and desktop results separately. Prioritize mobile data in particular, because lower-powered phones are much more likely to experience main-thread congestion. If the page’s INP value is above 200 ms, make a note of the opportunities and diagnostics listed in the report.

2. Monitor the Core Web Vitals report in Search Console

The Core Web Vitals report in Google Search Console lists issues by URL groups. Instead of looking at a single page in isolation, you can see whether similar templates share the same problem. For example, if all product detail pages have poor INP, the root cause is likely the theme, cart script, review plugin, or product variation logic.

3. Use the Chrome DevTools Performance panel

The Chrome DevTools Performance panel shows which JavaScript functions run during a click and which tasks create long tasks over 50 ms. Record a menu click and inspect the purple, yellow, and green blocks on the main thread. Long script execution, repeated style recalculation, and heavy layout work are critical signals for INP troubleshooting.

4. Set up real user monitoring

For high-traffic projects, RUM, or Real User Monitoring, is extremely valuable. With the Web Vitals library, you can collect INP data and analyze it by URL, device type, browser, country, and interaction target. For example, your data might show that the mobile menu click takes 620 ms only for Android users. That insight allows you to fix the exact problem instead of applying broad, unfocused optimizations.

The Most Common Causes of a Poor INP Score

Most INP issues are not caused directly by server response time; they happen because the browser is doing too much work at the exact moment the user interacts with the page. Still, infrastructure, file delivery, caching, and third-party dependencies can indirectly increase that workload.

Heavy JavaScript files

Modern websites often load JavaScript for themes, sliders, live chat, ads, analytics, A/B testing, maps, and social media components. These files are not just downloaded; the browser must parse, compile, and execute them. If that process keeps the main thread busy, the browser responds late to the user’s click or tap.

Long tasks

Main-thread work that takes longer than 50 ms is considered a long task. A single task lasting 300 ms can hold up a user interaction. For instance, a script that recalculates all 1,000 products on the client side when a filter button is clicked can easily push INP above 500 ms.

Complex DOM and expensive layout work

Too many HTML nodes, deeply nested components, frequent style changes, and the read-write-read pattern known as layout thrashing can all damage INP. Mega menus, product listing pages, and long single-page applications are especially vulnerable to this problem.

Third-party scripts

Ad networks, tracking pixels, heatmap tools, live support widgets, and social media embeds run code that is outside your direct control. If these scripts use the main thread during a user interaction, even a well-written interface can feel slow and unresponsive.

WordPress plugin and theme bloat

On WordPress sites, every plugin may add its own CSS and JavaScript files. If a contact form plugin’s script is needed only on the contact page but loads across the entire site, it creates unnecessary overhead. Visual builders, sliders, and pop-up plugins can also harm mobile INP scores, especially when they load globally.

How to Improve INP Score: A Step-by-Step Action Plan

The practical answer to how to improve INP score is: measure, isolate, reduce, break up, and measure again. The steps below are organized in the order technical teams commonly use on real projects.

1. Find the most problematic interaction

First, identify which interaction is producing poor INP. Is it the mobile menu, add-to-cart button, filter panel, search box, or form submission? While recording in DevTools Performance, repeat the relevant action several times. In the recording, inspect the Event Timing or Interaction section to see the click target and duration.

Practical example: On an e-commerce site, a category filter button was producing a 740 ms INP. Analysis showed that clicking the button re-rendered every product card and updated 1,800 DOM nodes at once. After moving the filter panel into a separate component and deferring the list update, INP dropped to around 190 ms.

2. Reduce JavaScript bundle size

Removing unused code is one of the most effective INP improvements. Use a bundle analyzer to see which libraries are increasing file size. Instead of importing an entire library, import only the module you need. For example, instead of a large date library, you may be able to use a lighter alternative or the native Intl API.

• Disable theme features you do not use.
• Do not load slider, gallery, or animation scripts on pages that do not need them.
• Use modern build tools that support tree shaking.
• Do not ship admin dashboard code to public-facing pages.
• Serve legacy polyfills only to browsers that truly need them.

3. Break long tasks into smaller chunks

The browser needs the main thread to become available at regular intervals so it can respond to user interactions. Instead of doing large calculations all at once, split them into smaller pieces. setTimeout, scheduler.postTask, requestIdleCallback, or framework-level scheduling features can be used for this purpose. The goal is to replace one 300 ms block of work with smaller 20-40 ms tasks.

For example, if you need to filter and redraw a 5,000-row table, update the first 50 rows the user can see first, then process the remaining rows with virtualization or background tasks. This way, the result of the user’s click appears quickly, and the rest of the work does not block the experience.

4. Simplify event listeners

Running heavy functions on every click, input, scroll, and keydown event hurts INP. It is especially problematic to send an API request or recalculate an entire list on every keystroke in an input field. Use debounce and throttle techniques to reduce processing frequency.

• Apply a 300 ms debounce to search boxes.
• Use passive listeners for scroll events.
• Use event delegation instead of adding listeners to hundreds of individual elements.
• After a click, show visual feedback first and start the heavier work afterward.

5. Give users immediate visual feedback

Because INP is tied to the next paint, it is important to create even a small visual change immediately after the user interacts. A button changing to an active state, a loading indicator, a skeleton area, or the first frame of an opening panel tells the user that the system is responding. Instead of waiting for a heavy API response and changing the entire interface at once, design for fast feedback and progressive updates.

6. Reduce render and layout cost

CSS and layout can affect INP just as much as JavaScript. After a click, changing the size, position, and style of many elements can be expensive. In CSS animations, using transform and opacity instead of width, height, top, and left is generally more performant. For large lists, use virtualization; do not keep hundreds of off-screen cards in the DOM.

Avoid layout thrashing. In other words, do not repeatedly read an element’s width, write a style change, and then read layout again inside the same loop. Group read operations and write operations separately. This simple adjustment can save dozens of milliseconds on complex pages.

7. Audit third-party code

For every external script, ask this question: does this code directly contribute to conversions or essential business goals? If the contribution is low, remove it, delay it, or load it only on the pages where it is required. Keeping live chat on the checkout page may make sense; loading it immediately on every blog post may not. Where possible, load advertising and analytics scripts with defer or async so they do not get in the way of critical interactions.

8. Move heavy calculations to a Web Worker

If product filtering, large JSON processing, encryption, data transformation, or complex calculations are locking the main thread, use a Web Worker. A worker performs these tasks in the background while the main thread continues responding to user interactions. Not every job needs to move to a worker, but CPU-heavy tasks over 100 ms can benefit significantly.

9. Optimize framework and hydration cost

In React, Vue, Angular, Next.js, Nuxt, and similar setups, hydration cost after the initial load can affect INP. Instead of making the entire page interactive, consider islands architecture, partial hydration, or server components. Leave non-interactive content static. Components such as modals, comment areas, and recommendation widgets often perform better when they are loaded only when the user actually needs them.

10. Reduce plugin load on WordPress sites

If you use WordPress, start INP optimization with a plugin inventory. Remove multiple plugins that do the same job. Check whether form, gallery, slider, and pop-up plugins load their files on every page. With performance plugins that support asset unloading, you can disable unnecessary CSS and JavaScript on a page-by-page basis.

Example implementation: A corporate WordPress site had a mobile INP value of 560 ms on the homepage. The slider plugin was removed and the hero section was rebuilt with lightweight HTML/CSS, the pop-up script was delayed by 5 seconds, and the contact form JavaScript was loaded only on the contact page. As a result, mobile INP dropped to 210 ms, and after a few smaller refinements, it reached 175 ms.

How Hosting and Infrastructure Affect INP Score

INP is primarily a client-side responsiveness metric, meaning the load on the browser’s main thread is the key factor. But hosting infrastructure is not irrelevant. Fast server response, proper caching, modern PHP versions, HTTP/2 or HTTP/3 support, CDN delivery, and compression help files arrive faster and more consistently. This can help the main thread work in a more controlled way, especially during initial load.

Low-quality infrastructure can harm the user experience through high TTFB, late-loading resources, inconsistent cache behavior, and overloaded servers. If an uncached WordPress site performs heavy PHP and database operations on every request, the page becomes interactive later. That is why INP work should not be treated as completely separate from LCP and TTFB optimization.

• Use server-side caching.
• Prefer PHP 8.x and up-to-date database versions.
• Serve static files through a CDN.
• Enable Brotli or Gzip compression.
• Keep your SSL/TLS configuration up to date; for secure connections, review SSL Certificate.
• If you are launching a new project or brand website, use Domain Lookup to choose the right domain name.

INP Optimization Priority Table

The table below summarizes which improvements should usually be prioritized on a typical website. Results vary from project to project, so after each change, measure again with PageSpeed Insights, Search Console, and real user data.

Technical Checklist for Developers

INP improvement should become a trackable checklist within the team. Otherwise, one-off speed work can be undone a few months later by new plugins, campaign scripts, and design changes.

• Set a mobile INP target below 200 ms for every critical template.
• Check bundle size increases during pull request reviews.
• Test performance impact before adding any new third-party script.
• Measure at least mobile menu, search, form, and purchase interactions with DevTools Performance recordings.
• Try to bring long tasks below 50 ms; if that is not possible, split them into smaller tasks.
• Prefer transform and opacity for animations.
• Use pagination, infinite scroll, or virtualization for large lists.
• Report RUM data monthly and monitor Search Console warnings.

Common INP Optimization Mistakes

Installing only a cache plugin

Caching is important, but it is not the only solution for poor INP. Cache can help the page be delivered faster, but it does not automatically fix heavy JavaScript that runs after a user click. That is why caching should be combined with code optimization.

Looking only at lab scores and forgetting real users

Lighthouse tests are useful, but they are not enough on their own. Real users arrive with different devices, networks, and browsers. Lower-end Android devices in particular often reveal INP problems that do not show up in desktop-based tests.

Randomly delaying every script

Defer and delay techniques must be applied carefully. A poor configuration can break menus, carts, forms, or checkout flows. Critical interaction scripts should be protected, while unnecessary and third-party code should be delayed in a controlled way.

Focusing on visual performance and ignoring interaction

Compressing images is extremely valuable for LCP, but it does not always solve INP. If the problem is code that runs after a click, image optimization alone will not be enough. Core Web Vitals should be handled as a complete system.

An INP-Focused SEO Strategy for 2026

In 2026 SEO, technical performance, content quality, and reliable infrastructure need to work together. Google’s AI Overviews and advanced search experiences tend to favor pages that provide the fastest and most satisfying answer to the user. For that reason, INP optimization is not only a developer task; it is a shared responsibility across SEO, UX, content, and infrastructure teams.

On a blog, the table of contents, category filter, and comment form should work quickly. On an e-commerce site, size selection, variation switching, and add-to-cart actions should respond instantly. On corporate websites, quote forms, mobile menus, and contact buttons should not feel delayed. When users perceive a website as fast, they stay longer, browse more pages, and are more likely to convert.

With Hostragons, you can build a stronger foundation for technical SEO by choosing performance-focused hosting, up-to-date server technologies, and secure infrastructure. Managing domain, hosting, and security configuration from one place reduces operational overhead, allowing your team to focus more on user experience and content quality. For relevant solutions, you can explore Corporate Hosting, VPS Server, and SSL Certificate.

Conclusion

The essence of improving INP score is simple: do not make the browser do unnecessary work at the moment the user interacts. First, use real data to find the slowest interactions. Then reduce JavaScript load, break up long tasks, simplify event listeners, lower rendering cost, and take control of third-party code. Hosting, caching, CDN, and up-to-date security configurations provide a strong foundation that supports the entire process.

If you want to make your website faster, more reliable, and more user-friendly, start with a small measurement: check the mobile INP value of your most important page and apply the first three steps in this guide. On the infrastructure side, you can review Hostragons solutions and compare hosting plans calmly and carefully according to your needs.

Frequently Asked Questions

What should my INP score be?

A good INP score is 200 ms or less. A value between 200-500 ms indicates room for improvement, while anything above 500 ms points to a poor user experience. Mobile user data should be prioritized when evaluating INP.

What is the difference between INP and FID?

FID measures only the delay of the user’s first interaction, while INP evaluates the responsiveness of interactions throughout the full page lifecycle. That is why INP gives a more complete picture of real user experience.

Why is INP often poor on WordPress sites?

It is usually caused by too many plugins, heavy themes, unnecessary CSS/JS loaded on every page, sliders, pop-up scripts, and third-party code. Plugin cleanup, page-level asset unloading, and lightweight themes can deliver major improvements.

Will changing hosting fix my INP score?

Hosting alone will not fix heavy JavaScript or long tasks, but a fast server, good caching, CDN, current PHP versions, and stable resource delivery support INP optimization. In other words, the effect is indirect, but especially important for WordPress sites.

How long does INP optimization take to show results?

After code and plugin improvements, lab test results can improve immediately. In Search Console and Chrome real user data, the change usually takes a few weeks to appear because enough field data must be collected first.