Have you been hearing the buzz about INP and wondering, “What exactly is INP?”
You’re not alone!
INP, or ‘Interaction to Next Paint’, joins the conversation around website performance and user experience metrics, much like your favourite LCP or FCP.
Let’s explore INP, its importance, and how to optimise it to give your users a smoother, more satisfying experience. If you need more help, our SEO agency can also help!
What is INP?
INP stands for Interaction to Next Paint.
This relatively new metric has been added to the list of Core Web Vitals and businesses should start optimising towards it.
INP measures the time between a user’s interaction with your page (like a click or tap) and the next time the user sees a visual response. Think of it as the gap between your action (clicking a button) and the reaction (something happening on the screen). Unlike other metrics focusing on loading times, INP hones in on responsiveness during use.
Why INP Matters
People today are notoriously impatient online. They want pages to respond instantly.
Google understands this and focuses on metrics like INP to ensure users don’t just visit your site but have a delightful experience.
A high INP can frustrate users, making them bounce right off your site.
A low INP makes your site feel responsive and smooth, which keeps users engaged longer.
Imagine you own an online bookstore.
Users land on your page and start interacting by scrolling, clicking on book titles, and adding items to their carts.
If your site has a high INP, those interactions will feel laggy, and you’ll likely lose customers before they complete their purchase.
If your INP is optimised, interactions are smooth and instantaneous, enhancing the user experience and likely keeping those bookworms on your site longer.
INP vs. FID
If you’re familiar with FID (First Input Delay), you might wonder how INP differs or if it’s necessary.
While FID measures the delay between a user’s first interaction and the time the browser begins to process that interaction, INP takes it a step further and measures until the next frame is painted.
Simply put, INP is a more comprehensive look at how interactions are handled after the initial input.
How to Measure INP.
Tools to Use
-
Google Chrome’s DevTools: An excellent tool for developers to measure INP directly within the browser.
-
Lighthouse: Google’s development tool also includes INP in its performance audits.
-
Web Vitals Extension: This browser extension gives a real-time feed of vital metrics, including INP.
Understanding Good vs. Poor INP
These numbers are a benchmark provided by Google, and, like everything related to site speed and Core Web Vitals, it’s more important to be better than your competition to meet these numbers. Be the best of the bunch
-
Good INP: Less than 200 milliseconds.
-
Needs Improvement: Between 200 and 500 milliseconds.
-
Poor INP: More than 500 milliseconds.
Strategies to Improve INP.
Optimise JavaScript
Heavy JavaScript execution can bog down your site, increasing INP values.
Steps to optimise include:
- Split your JavaScript bundles — Google recommends this, but let’s be realistic, this is not an easy fix, and most websites don’t focus on it because it’s too expensive.
- Minify and compress your code — Depending on your CMS, you might be able to use a plugin like WP Rocket on WordPress to compress and minimise your code base.
- Defer non-critical JavaScript to load later — This can sometimes be tricky depending on your site build, but have a look at the scripts that load on your site and see if you have some that don’t need to be loaded, like an old plugin or a script that is only useful for certain pages and not others.
My favourite tool for analysing scripts is GTMetrix. I use the waterfall view, select JS at the top, and analyse the loaded scripts. You’ll see that some are from our website and some are external.
Minimise Main Thread Work
Your browser’s main thread is like the control centre. If it’s overloaded, everything slows down.
You can minimise main-thread work by:
- Reducing complex CSS layouts — Again, this is not an easy fix and will require a fair amount of development. Things to consider would be keeping your CSS selector specificity low by avoiding deep nesting of selectors. Avoid redundant or conflicting styles or use CSS Grid and Flexbox to create flexible, responsive layouts without cumbersome float-based designs or excessive positioning.
- Avoiding excessive use of large libraries — In reality, this never happens; I would not focus on this unless you are building a website from scratch.
- Using web workers to distribute tasks — By delegating heavy tasks to Web Workers, your main thread remains unblocked. This ensures that user interactions like clicks, scrolls, and other inputs are processed immediately.
Reduce Server Response Times
Slow server responses can increase INP and, most importantly, everything else.
Make your server as fast as possible by:
- Using faster hosting services — This is usually quite easy but can be costly!
- Implementing caching strategies — Caching is a very important part of site speed. We won’t dwell on it too much in this article, but below are the 2 things I would look at:
-
Browser Caching: Configuring HTTP headers to instruct browsers to store static resources locally allows users to load assets such as images, stylesheets, and scripts from their own devices rather than fetching them from the server with each request. This reduces server load and speeds up page loading times.
-
Content Delivery Network (CDN): A CDN distributes your content across geographically dispersed servers. When a user requests a resource, it is delivered from the nearest server, significantly decreasing latency and improving load times. CDNs also help in balancing the load during traffic spikes.
- Reducing payload sizes for network requests — It goes without saying, but the heavier the payload, the slower the response will be. Ensure that all your images and videos are fully optimised. Payload optimisation is an easy fix, and most of the time, it doesn’t require any development, just time.
Optimise Web Fonts
Web fonts can add to your loading times and affect INP.
Improve this by:
- Using modern formats like WOFF2 — Fonts might look innocent, but they are often the culprits of site speed issues. Loading fonts externally takes time and blocks the page’s rendering, so you must ensure you use optimised formats.
- Limiting the number of different fonts used — Websites sometimes accumulate a lot of different fonts year after year, especially if they are not monitored. This can cause chaos, as every loaded font needs to be downloaded from somewhere. I always recommend doing a font audit to see how many there are and if they are all needed. As you can see they quickly rack up.
- Leveraging font-display swap to render fallback fonts initially — font-display: swap is a CSS property. It tells the browser to use a fallback font immediately, and once the custom font is ready, swap it in. This ensures that users can read the text immediately, even in a default font, rather than waiting for your custom font to load.
@font-face
{ 2 font-family: 'MyCustomFont';
3 src: url('MyCustomFont.woff2') format('woff2');
4 font-display: swap; 5}
Image Optimisation
Huge images can be a silent INP killer.
Optimise images by:
- Compressing them using tools like Compressor or TinyPng — This is a very easy fix and should be monitored closely.
- Using next-gen formats like WebP — Most recent CMS today offer the option of delivering your images in WebP format. Have a look and leverage it.
- Lazy loading images to defer offscreen images — Another easy fix is to ensure that images not above the fold are only loaded once the user scrolls down. You don’t need to load them all at once.
So why should businesses prioritise INP?
- Enhanced User Experience: Snappy interactions lead to satisfied users.
- Competitive Edge: Seamless, responsive sites stand out, potentially increasing user engagement and conversions.
- SEO Benefits: Google increasingly favours user experience metrics, affecting search rankings.
Interaction to Next Paint is not just another technical metric; it’s a direct line to better user experiences and improved business outcomes. As Google continues to prioritise user experience, having a great INP can set you apart from competitors.
Start with small audits, make incremental improvements, and keep iterating. Your users will thank you, and so will your bottom line.
Remember, a fast site isn’t just a happier user; it’s also a more profitable business.
Ask our team of SEO experts if you have doubts about your Core Web Vitals.