Optimising INP (Interaction to Next Paint) for Better Website Responsiveness: Key Takeaways from Expert Webinar

Optimising Interaction to Next Paint

Content Roadmap

With user expectations higher than ever, delivering a smooth, responsive browsing experience is crucial for success. A key metric that evaluates responsiveness is Interaction to Next Paint (INP), which measures the time from user input like clicking until visual feedback is provided.

In a comprehensive webinar, experts from Google and NitroPack dove deep into I.N.P., providing invaluable insights and proven techniques to optimise it.

How to Improve Interaction to Next Paint (INP)

The Business Impact of Improving I.N.P.

Adam Silverstein of Google kicked off explaining why website responsiveness matters. Poor I-N-P leads to unhappy users, more cart abandonment, and increased bounce rates. However, improving responsiveness provides better engagement and directly boosts conversions.

Silverstein shared examples like Economic Times which reduced I.N.P. from 1000ms to 250ms, cutting bounce rates in half and increasing page views. RedBus also improved INP significantly, driving higher sales as a direct result.

What exactly does INP measure?

Illustration about interaction to next paint (inp)

Barry Pollard of Google provided an in-depth look at what exactly I.N.P. measures. It evaluates the time from common user interactions like clicks, taps, or typing to the browser’s next opportunity to update the screen. This provides visual feedback that the input was received and is being processed.

Unlike older metrics like FID that only measured the first interaction, INP looks at all interactions on the page and assesses the longest one. The target for a good I.N.P. score is under 200ms on both desktop and mobile.

Diagnosing the Root Causes of Slow I.N.P.

Pollard explained that typical causes of slow I.N.P. include:

  • Bloated JavaScript and DOM
  • Complex CSS selectors
  • Poorly optimised code
  • Third-party scripts

Isolating exactly which interactions are slow can be challenging without real user data from RUM tools. Lab tests alone often fail to surface I.N.P. issues accurately.

Optimisation Strategies to Improve INP

Ivailo Hristov of NitroPack provided actionable optimisation strategies, including:

  • Simplifying the DOM structure and CSS rules
  • Splitting heavy processing into smaller chunks
  • Offloading work to web workers
  • Lazy loading non-critical assets

He demonstrated these techniques live on example sites, improving INP from 400ms down to 130ms. For WordPress sites specifically, optimising the DOM and CSS tends to provide significant gains.

Monitoring I.N.P. and Making Incremental Improvements

The experts emphasised that optimising I..N.P. must be an ongoing process, not a one-time fix. Monitoring real user data identifies issues, then incremental improvements can boost scores. As I.N.P. becomes a Core Web Vital in 2023, improving responsiveness now future-proofs websites.

While I.N.P. will be officially measured soon, enhancing responsiveness delivers better UX and business metrics immediately. With a few key strategies, developers can reduce frustrating lag and deliver the seamless interactivity that modern users expect. Mastering INP optimisation separates high-performance sites from the competition.

Jesus Guzman

M&G Speed Marketing LTD. CEO

Jesus Guzman is the CEO and founder of M&G Speed Marketing LTD, a digital marketing agency focused on rapidly growing businesses through strategies like SEO, PPC, social media, email campaigns, and website optimization. With an MBA and over 11 years of experience, Guzman combines his marketing expertise with web design skills to create captivating online experiences. His journey as an in-house SEO expert has given him insights into effective online marketing. Guzman is passionate about helping businesses achieve impressive growth through his honed skills. He has proud case studies to share and is eager to connect to take your business to the next level.