How I Fixed My Website's INP Issue

INP stands for Interaction to Next Paint. It measures the time between a user interaction, like a click, and when something happens on the page, such as rendering or painting. A shorter INP means a faster and more responsive site.

Late last year I found out that the INP value for Brush Ninja was over 200ms. This was bad news because Google considers anything over 200ms as poor performance. I needed to fix this to improve the user experience and maintain my site’s search ranking.

The Issue with Brush Ninja

Brush Ninja is a collection of JavaScript apps that run in the web browser. Given this setup, having issues with Google’s INP was almost expected. Late last year, I noticed a report in Google Search Console mentioning that my INP time was longer than 200ms. To put this into perspective:

  • Less than 200ms: Performant
  • Between 200ms and 500ms: Poor
  • More than 500ms: Bad

Unfortunately, INP scores are assigned to groups of pages rather than individual ones, making it tricky to pinpoint the exact cause of delays.

Finding the Culprit

Unlike a lot of website metrics such as file size or page load time, INP is harder to track. It needs real user interactions to measure (referred to as RUM - Real User Monitoring), which can be challenging to measure.

Google offers a free script called web-vitals.js that tracks various performance metrics and stores data in Google Analytics. However, it doesn’t specify which event causes slowdowns and the data is hard to read.

I spent countless hours optimizing interactions on the Brush Ninja animation maker to make things faster for users. While this was beneficial overall, it didn’t solve the INP issue. Then I discovered a Web Vitals Chrome Extension by Google that logs different speeds when metrics perform poorly. By turning on console logs and clicking around my site, I could locate the flaws.

The Solution

For Brush Ninja, I suspected the animation maker was causing problems. Even with the extension’s help, finding the culprit took some time. Eventually, I realized that using a confirm dialog paused interactions. Although the confirm box appears instantly, it doesn’t trigger a paint until you click it. If you take 5 seconds to respond, that’s counted as a 5-second delay!

To fix this, I replaced the confirm box with a JavaScript modal. Now, I’ve submitted a fix and am waiting for about 28 days for Google to test the site and update the stored metrics. Fingers crossed this is it!

Fixing my website’s INP issue wasn’t easy but understanding what causes delays helped me address them effectively. If you’re facing similar problems, try using tools like web-vitals.js and Google’s Chrome Extension to diagnose performance issues.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

Related Posts

04 Jun 2008

Google hosted javascript libraries

Google recently announced that they are hosting popular open source javascript libraries for everyone to use in their projects. This is a great opportunity to have fast access to javascript libraries without worrying about bandwidth charges.Despite some negative feedback about...
16 Dec 2010

A New Secret to Increasing Your Page Views

Do you want to increase the page views on your website? Everyone does right? Well this is something I have been spending a lot of time thinking about, and I recently found out something quite surprising.In hindsight I probably shouldn’t...
13 Jul 2009

Fussing over the (web design) details

Having spent the last couple of months (on and off) messing around with the new Binary Moon design I am now at the stage where I want to say it’s finished and move on to something else.There’s a well known...
29 Jul 2013

Brush Ninja – An Upcoming HTML5 Animation Website

I’m thrilled to announce my latest project – Brush Ninja. Brush Ninja is a browser-based animation app that aims to bring back the simplicity and creativity of early versions of similar platforms.Sketch StarI am employed by Miniclip, an online games...
31 Aug 2018

Chrome for Android may start disabling JavaScript on 2G connections

This week a pull request was made on the Chromium project that, in certain situations, blocks Javascript from loading on 2G connections.Currently the Gutenberg editor doesn’t work without Javascript; it doesn’t even have a noscript tag.Chrome for Android may start...
08 Jul 2013

A Redesign for 2013

It’s only been a year since I last redesigned Binary Moon – I’m generally content to redesign, and then sit on things for a while, let it stew and evolve. However a lot has changed in the last year. Design...