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.
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?
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.
