INPatience Is A Virtue: Interaction to Next Paint Explained

Picture this: It’s 8:59 AM on a Saturday. You’re sitting in your kitchen with a cup of Earl Grey, laptop open, heart racing. The Glastonbury tickets go on sale in exactly one minute. You refresh the page. The “Buy Tickets” button appears. You click it.

And then… nothing.

You click again. Still nothing. You start to panic. Did it register? Is the site broken? Should you refresh and risk losing your place in the virtual queue? Suddenly, three seconds later, the screen jumps, a spinning wheel appears, and you realise you’ve accidentally ordered four camping passes instead of two because you kept clicking in frustration.

Whether it’s trying to book a train home for Christmas or snapping up a limited-edition jumper from a High Street retailer, there’s nothing more infuriating than a website that ignores you.

For years, the web industry focused heavily on how fast a page loads—that is, how quickly the pictures and text appear. But they often ignored how fast the page responds once it’s there.

Enter INP, or Interaction to Next Paint.

INP is the new gold standard for measuring web responsiveness. It’s the metric that tells us if a website feels snappy and helpful, or sluggish and broken. In March 2024, Google officially made INP a “Core Web Vital,” meaning it now directly affects how high websites appear in search results.

In this guide, we’re going to explore every nook and cranny of INP. We’ll look at why it matters, how it works under the bonnet, and how it’s changing the way the British web operates.

Please note: The content below may contain affiliate links. If you make a purchase through these links, we could earn a commission, at no additional cost to you.

1. Core Concepts: What Exactly is INP?

To understand INP, we first need to understand the difference between a website looking ready and a website being ready.

The “Shop Window” vs. The “Shop Assistant”

Imagine walking into a department store.

• Loading (LCP): This is like walking past the shop window. You see the mannequins, the displays, and the lights. If the window is empty, you walk away. This is what we used to measure—how fast the window gets dressed.
• Responsiveness (INP): This is what happens when you walk inside and ask a staff member for help. If you ask, “Do you have this in blue?” and the assistant stares blankly at the wall for five seconds before answering, that’s bad responsiveness. It doesn’t matter how pretty the window display was; the service is poor.

Interaction to Next Paint (INP) measures that delay. It clocks the time from when you interact with the page (click a mouse, tap a screen, or press a key) to the moment the screen actually changes to show you it heard you.

The Technical Definition (Simplified)

Technically speaking, INP measures the time between a user interaction and the “Next Paint.”

• Interaction: This could be clicking a “Add to Basket” button, tapping a menu icon on your mobile, or typing your postcode into a delivery form.
• Next Paint: This is the moment the browser draws the next frame on your screen to reflect that action (e.g., the menu opens, the number in your basket goes up, or the letter ‘SW1’ appears in the box).

INP looks at all the interactions you make while you’re on a page, and it reports the worst one. If you click 50 times and 49 clicks are instant, but one takes a whole second, your INP score is determined by that one slow second. It’s a harsh but fair judge: a website is only as fast as its slowest moment.

2. A Brief History of Web Patience

The internet hasn’t always been this interactive. To appreciate why INP is such a big deal today, we need to look at where we came from.

The Static Era (1990s–2000s)

In the early days of the web—think the BBC News website in 1998—pages were mostly static documents. You clicked a blue link, the page went white, and a new page loaded. There wasn’t much “interaction” beyond moving from Page A to Page B. Responsiveness was simple: how fast does the new page arrive?

The Rise of JavaScript (2010s)

As technology improved, websites started trying to be more like apps on your phone. We got interactive maps, image carousels, and forms that checked your password strength while you typed. This was powered by a coding language called JavaScript.

JavaScript is brilliant, but it’s also heavy. It’s the engine that runs all the interactive bits. The problem? If the engine is too busy thinking about a complex calculation, it can’t listen to your mouse clicks. This led to the “Frozen Screen” era, where a site looked fully loaded, but clicking a button did absolutely nothing.

The Era of FID (First Input Delay)

Google tried to fix this a few years ago with a metric called FID (First Input Delay). FID was a bit like a polite greeter at the door. It only measured the very first time you clicked something on a page. If the first click was fast, FID said, “Great job, this site is responsive!” even if every subsequent click was agonizingly slow.

It was better than nothing, but it was flawed. It was like judging a restaurant solely on how quickly they seat you, ignoring the fact that it took an hour to get your food.

The Arrival of INP (2024)

Google retired FID in March 2024 and replaced it with INP. INP doesn’t just check the first click; it checks every click (and tap and key press) and judges the site based on the slowest one. It’s a much stricter standard, forcing developers to ensure the entire experience is smooth, not just the greeting.

3. The Mechanics of a Click: What Happens in those Milliseconds?

When you tap a button on your phone, it feels instantaneous. But behind the glass, a complex relay race is taking place. INP breaks this race down into three distinct legs. If any one of these legs is slow, the whole experience feels sluggish.

Part 1: Input Delay (The Waiting Room)

This is the time between you pressing the button and the website actually starting to react. Why would there be a delay? Imagine a single cashier at a supermarket (this is the “Main Thread” of the computer). If the cashier is currently scanning a huge trolley full of shopping (running other code), they can’t serve you immediately, even if you’re standing right there. You have to wait until they finish the current task.

Part 2: Processing Time (The Thinking Time)

Once the cashier (Main Thread) turns to you, they have to do your job. If you clicked “Calculate Mortgage,” the site has to run the maths. If you clicked “Sort Price: Low to High,” it has to reorder the list of products. If the code is messy or the calculation is huge, this step takes a long time.

Part 3: Presentation Delay (The Drawing Time)

The cashier has finished your request. Now, they need to hand you the receipt. In web terms, the browser has to “paint” the new picture on the screen. It has to calculate where the new menu sits, what colour the button should turn, and physically light up the pixels on your screen. If the page is enormous and complex—like a news homepage with thousands of elements—painting this new picture can take a surprising amount of time.

INP = Input Delay + Processing Time + Presentation Delay.

If the total of these three parts is under 200 milliseconds, you’re golden. If it’s over 500 milliseconds, you’re in trouble.

4. Why Does INP Matter? The British Perspective

You might be thinking, “It’s just a fraction of a second. Does it really matter?” In a word: Yes.

The “Rage Click” Phenomenon

We are a polite nation. We queue patiently. But on the web, our patience is non-existent. When a user clicks a button and nothing happens, they assume the click didn’t work. So they click again. And again. Harder. This is called a Rage Click. Rage clicks are a clear sign of frustration. They lead to users abandoning their baskets, closing tabs, and going to a competitor. In the UK e-commerce market, which is one of the most advanced in the world, a slow site is a death sentence. If Waitrose.com is slow, it’s very easy to switch to Ocado.

The SEO Impact (Google Rankings)

Google’s mission is to organise the world’s information and make it universally accessible and useful. They don’t want to send users to websites that feel broken. Because INP is a Core Web Vital, it is part of Google’s ranking algorithm. If two websites have equally good content on “How to bake a Victoria Sponge,” but one has a poor INP score and the other is snappy, the snappy one will likely rank higher.

For British businesses, from local florists in Yorkshire to financial giants in Canary Wharf, ignoring INP means handing traffic to competitors.

Accessibility and Fairness

Poor INP hits users with older devices the hardest. Not everyone in the UK is walking around with the latest iPhone 15 Pro. Many people, especially younger students and older pensioners, use budget Android phones or older laptops. These devices have slower processors (slower “cashiers”). A website that feels okay on a £1,000 phone might be completely unusable on a £100 phone. improving INP is about digital inclusion—ensuring the web works for everyone, not just the wealthy.

5. Measuring INP: The Scorecard

How do you know if your site is a hare or a tortoise? Google categorises INP scores into three buckets.

Field Data vs. Lab Data

This is a crucial distinction for site owners.

• Lab Data: This is when a developer tests the site on their own powerful computer with fast office Wi-Fi. It’s a controlled environment.
• Field Data: This is the real world. This data comes from actual users visiting your site—someone on a patchy 4G signal on a train to Manchester, or someone on an old tablet in a café in Cornwall.

Google ranks you based on Field Data. It doesn’t matter if your site runs fast for you; it matters how it runs for them.

6. Practical Applications: How to Tame the Beast

If you own a website or work in digital marketing, this section is for you. How do we actually fix a poor INP score? It mostly comes down to giving the “Main Thread” (our supermarket cashier) a break.

1. Break Up Long Tasks

Imagine our cashier has to scan 100 items for one customer. No one else can get served. The solution? Break it up. Scan 10 items, then look up and see if anyone else is waiting. If yes, serve them quickly, then go back to the scanning. In coding, this means taking big, heavy chunks of JavaScript and splitting them into smaller pieces. This gives the browser a chance to breathe and respond to clicks in between the heavy lifting.

2. Don’t Overwork the Browser

Many modern websites are bloated. We add a tracking pixel for Facebook, a chat widget for customer support, a recommendation engine, and a newsletter popup. Every single one of these adds weight. The browser has to juggle all of them. Tip: Audit your “Third-Party Scripts.” Do you really need that heatmap tool you installed three years ago and haven’t looked at since? Delete it. It’s clogging up the works.

3. Visual Feedback is Key

Sometimes, the processing really does take time. If you’re searching a database of a million items, it might take a second. In this case, the “Presentation Delay” is vital. You must show the user something immediately.

• Bad: User clicks “Search”. Screen stays still for 2 seconds. User rage-clicks.
• Good: User clicks “Search”. Instantly, a spinning wheel appears or the button turns grey. The results appear 2 seconds later. The user is happy because the interface responded, even if the task wasn’t finished. The INP metric rewards this immediate visual feedback.

4. Avoid “Layout Thrashing”

This is a quirky technical term. It happens when your code asks the browser to calculate a measurement (e.g., “How wide is this picture?”) and then immediately changes it (“Make it 10px wider”), over and over again in a loop. It forces the browser to re-measure the whole page repeatedly. It’s like asking a builder to measure a wall, then knocking a brick out, then asking him to measure it again, fifty times a minute. It wastes massive amounts of time.

7. Case Studies: INP in the Real World

Let’s look at two hypothetical examples to see how this plays out in the British market.

Case Study A: The Artisanal Baker (London)

• The Site: A trendy bakery in Hackney selling sourdough starter kits.
• The Problem: They have a beautiful, high-resolution image gallery on their homepage. They also use a heavy “parallax” scrolling effect where images move at different speeds.
• The INP Issue: When a user on a mobile tries to tap the “Menu” button, the phone is so busy calculating the position of the moving images that it ignores the tap for 600ms.
• The Fix: The developer removes the heavy scroll effect for mobile users and simplifies the image gallery.
• The Result: The “Main Thread” is free. The menu opens instantly. INP drops to 80ms. Sales of sourdough kits increase by 15% because mobile users stop leaving in frustration.

Case Study B: The National News Portal

• The Site: A major UK news outlet with millions of daily readers.
• The Problem: The site relies on advertising revenue. They have 20 different ad slots on every article. Each ad slot runs its own heavy code to decide which ad to show.
• The INP Issue: As you scroll down and try to click “Read More,” the browser is fighting to load ads. Input Delay is huge.
• The Fix: They cannot remove the ads (it’s their income). Instead, they use “Web Workers.” This is like opening a second checkout lane at the supermarket specifically for the ads. The main cashier is left free to deal with the user’s clicks.
• The Result: The ads still load, but they don’t block the user. The reading experience becomes smooth, and reader loyalty improves.

8. Future Implications: The Responsive Web

INP is not just a trend; it is the direction of travel for the entire web.

The Death of “Good Enough”

In the past, we accepted that the web was a bit clunky compared to a native app on your phone. That excuse is vanishing. Users now expect a website to feel as smooth as an app. INP is the metric that forces websites to meet that standard.

AI and Complexity

As we start integrating Artificial Intelligence into websites—chatbots that answer questions, tools that generate images on the fly—the demand on the browser is going to skyrocket. These features require heavy processing. Developers will need to become masters of INP to ensure that these fancy new AI features don’t destroy the basic usability of the site.

A Greener Web?

Interestingly, optimizing for INP often means writing more efficient code. Efficient code uses less processing power. Less processing power means less electricity used by your phone and the servers. While the primary goal is user experience, a nice side effect of the drive for better INP is a slightly more sustainable, energy-efficient internet.

Conclusion: The Butler Who Doesn’t Blink

The web is the modern British high street. It is where we bank, shop, learn, and gossip. Just as we wouldn’t return to a shop where the staff ignored us, we won’t return to a website that doesn’t respond to our touch.

INP is a complex acronym, but the concept is beautifully simple: Respect the user’s time.

When you click, the site should reply. Immediately. Not after it finishes loading a tracker, not after it fetches an ad, but now.

For business owners, INP is a metric to watch like a hawk. For users, it’s a promise of a less frustrating digital life. And for the web as a whole, it’s a sign of maturity. We are moving past the clunky, frozen screens of the past and into a future where the digital world feels as responsive and tangible as the physical one.

So, the next time you tap a button and the screen snaps instantly to attention, spare a thought for the engineers working behind the scenes to keep that INP score low. They are the unsung heroes keeping the digital queue moving.

Further Reading & Resources

If you want to dig deeper into the technical side or test your own site, here are the industry-standard resources:

• Web.dev: Interaction to Next Paint – The official documentation from Google’s Chrome team. The bible of INP.
• PageSpeed Insights – The tool to test your website’s performance. Just type in your URL and see your score.
• MDN Web Docs: Performance – A highly respected technical resource for developers wanting to learn the code behind the speed.
• W3C Web Performance Working Group – The international community that defines the standards for how the web works.