Interaction to Next Paint (INP): Why It Matters and How to Fix It

What Interaction to Next Paint measures and why Google switched to it

Interaction to Next Paint tells you how long a visitor waits between acting on your page and seeing the page react. It matters because a slow response feels like a broken button, and people tap again, give up or leave.

Interaction to Next Paint (INP) is a field metric that records the latency of clicks, taps and keyboard input across a whole page visit, then reports one of the slowest values. Scrolling and hovering are not counted. On pages with many interactions, the browser ignores the single worst outlier for every 50 interactions, so one freak delay does not define the score.

The old metric, First Input Delay, only measured the wait before the browser started handling the first interaction. Most sites passed FID easily while still feeling sluggish. INP is stricter because it includes the time your event handlers run and the time the browser takes to paint the result. Google documents the thresholds on its INP reference page.

For businesses in Saudi Arabia, the stakes are practical. Most traffic to retail, food delivery, real estate and clinic sites arrives on phones, often mid-range Android devices with less processing power than the laptops developers test on.

The three phases of every interaction

Each interaction splits into input delay, processing duration and presentation delay, and the INP value is their sum. Knowing which phase is slow tells you exactly which fix to apply.

Input delay: the main thread is busy

Input delay is the time between the tap and the moment your event handler starts. It grows when something else is already running on the main thread, such as a tag manager firing ten pixels, a hydration step in React or a carousel script initialising. Any task longer than 50 ms is a long task, and a tap that lands during one must wait for it to finish.

Processing duration: your handlers do too much

Processing duration covers the event callbacks themselves. Common culprits are “add to cart” handlers that recalculate the whole basket, filter panels that re-render 200 product cards, and analytics calls that run synchronously before the UI updates. The fix is to do the visible work first and defer everything else.

Presentation delay: the browser struggles to paint

Presentation delay is the time from the end of your handlers to the next frame on screen. Large DOMs, expensive CSS selectors, forced layout recalculation and big client-side renders all push it up. Mega-menus and long bilingual product listings often show a slow presentation phase.

How to diagnose a poor Interaction to Next Paint score

Start with field data to find which pages and interactions are slow, then reproduce them in the lab on a throttled phone profile. Guessing wastes days; a 60-minute diagnosis usually points to two or three root causes.

1. Check the Core Web Vitals report. In Google Search Console, open Core Web Vitals, select Mobile and group URLs flagged for INP. Templates matter more than single URLs: if all product pages fail, fix the product template.
2. Confirm with PageSpeed Insights. The field section shows your 75th-percentile INP for the URL and the origin. Note the value so you can compare later.
3. Add real-user monitoring. The open-source web-vitals JavaScript library can report INP with attribution: the element tapped, the event type and the time spent in each phase. Send it to your analytics as a custom event.
4. Reproduce in Chrome DevTools. Open the Performance panel, set CPU throttling to 4x or 6x, record, and perform the slow interaction. Look for red-cornered long tasks around the tap.
5. Read the call stack. Expand the long task and note which script owns the time. In our audits the top owner is a third-party tag roughly half the time.
6. Use Long Animation Frames data. Chrome’s Long Animation Frames API attributes slow frames to specific scripts, which is useful when a tag manager hides many vendors behind one file.
7. Write a ranked fix list. For each slow interaction, record phase, owner, estimated saving in milliseconds and effort in hours.

How to fix Interaction to Next Paint: nine techniques that work

Most INP fixes fall into three groups: run less JavaScript, break the JavaScript you keep into smaller pieces, and make rendering cheaper. Apply them in that order, because removing code is always faster than optimising it.

Run less JavaScript

• Audit your tag manager. Remove pixels for campaigns that ended. Many Saudi sites run Meta, Snap, TikTok, Google Ads and two analytics tools at once. Each one you delete removes main-thread work on every page.
• Load chat and review widgets on intent. Show a lightweight button and load the full widget only when someone taps it. This alone often saves 150–400 ms of input delay.
• Drop unused libraries. Old jQuery plugins, sliders nobody swipes and polyfills for browsers you no longer support still execute on load.

Break up the work you keep

• Yield to the main thread. Split long handlers so the visual update runs first. Use scheduler.yield() where supported, with a setTimeout fallback, between the UI change and non-urgent work such as tracking.
• Debounce input handlers. Search-as-you-type and price filters should wait 150–300 ms after the last keystroke before querying.
• Move heavy computation off the main thread. Web Workers suit tasks such as filtering large JSON catalogues or formatting Arabic and English numbers in bulk.

Make rendering cheaper

• Shrink the DOM. Paginate or virtualise long lists and avoid rendering both Arabic and English menus and hiding one with CSS.
• Use content-visibility: auto on below-the-fold sections so the browser skips their layout until needed.
• Avoid layout thrashing. Read all measurements first, then write all style changes, rather than alternating reads and writes in a loop.

Key benefits of a good Interaction to Next Paint score

A responsive page earns more taps that turn into actions, fewer rage clicks and a cleaner Core Web Vitals profile in Google Search. The gains are largest on mobile checkout, booking and lead forms.

• Fewer abandoned actions: buttons that respond instantly stop double taps, duplicate orders and “nothing happened” exits.
• Better page experience signals: Core Web Vitals are part of Google’s page experience assessment. They rarely beat relevance, but they help when competing pages are otherwise equal.
• Lower ad waste: paid traffic from Google Ads or Snapchat lands on pages that react, so you pay for fewer bounced clicks.
• Healthier codebase: the tag audit and script cleanup behind a good INP also cut page weight and security exposure.
• Better accessibility: keyboard and screen-reader users benefit from fast focus and state changes, which supports WCAG 2.2 goals.

“Visitors do not see your Lighthouse score. They feel the pause after they tap. INP is the first metric that measures that pause honestly.”
— Best Web Developer performance team

Where INP problems hit hardest for sites in Saudi Arabia

Saudi sites face a particular mix: heavy social ad pixels, bilingual layouts, local payment widgets and sharp seasonal peaks. Each adds main-thread work that shows up as slow taps and a weak Interaction to Next Paint score.

Salla, Zid and Shopify stores

Hosted platforms give you less control over core code, but themes and apps are where most INP problems live. Every review, upsell, countdown and wishlist app adds scripts. Audit installed apps quarterly and remove anything that has not produced revenue in 90 days. During Ramadan and White Friday campaigns, avoid adding new pop-up apps without testing them on a mid-range Android phone first.

Bilingual corporate and real estate sites

Language switchers that reload heavy scripts, mega-menus with hundreds of links in two languages, and property galleries with large lightboxes are common slow interactions. Serving separate Arabic and English URLs with correct hreflang, instead of toggling languages in JavaScript, is usually faster and better for search. Our technical SEO service covers both the performance and the indexing side.

Booking and lead forms

Clinic, restaurant and car service bookings often use date pickers and phone-number validators that run on every keystroke. Validate on blur instead, and load the date picker only when the field gets focus.

INP vs LCP vs CLS: how the Core Web Vitals compare

LCP measures loading, CLS measures visual stability and INP measures responsiveness. A page needs all three in the good range at the 75th percentile to pass Core Web Vitals, and each one needs a different kind of fix.

Budget-wise, the three metrics cost different amounts to fix. In the ranges we quote for Saudi clients, LCP work often costs SAR 8,000–25,000 because it centres on hosting, images and a CDN such as Cloudflare. INP work is more expensive, typically SAR 12,000–45,000, because it requires developers who can read performance traces and refactor JavaScript safely. Full Core Web Vitals remediation for a large store can reach SAR 60,000–90,000 before 15% VAT.

INP, Vision 2030 and the next wave of web performance

As Vision 2030 pushes more commerce, government services and tourism bookings online, Saudi users are getting used to fast, app-like experiences. Responsiveness will become a baseline expectation rather than a technical detail.

• Government-grade benchmarks: citizens who use quick digital government services expect private-sector sites to respond just as fast.
• Heavier front ends: AI chat assistants, personalised product feeds and live inventory add JavaScript, so INP budgets need to be set before features are built.
• Better browser tools: scheduler.yield() and Long Animation Frames make diagnosis and fixes easier, but only teams that measure field data will benefit.
• Performance in procurement: we increasingly see Core Web Vitals targets written into Saudi website tenders and acceptance criteria.

Frequently Asked Questions about INP

Making Interaction to Next Paint part of every release

Interaction to Next Paint rewards sites that respond the moment a visitor taps. Measure it in the field, find the slow phase, remove or defer the scripts that block the main thread, and keep handlers focused on the visible update first.

For Saudi businesses selling to mobile-first customers, that discipline protects conversions during every Ramadan, White Friday and National Day campaign. Add a 200 ms INP budget to your release checklist so each new app, pixel or feature has to earn its place.