Update: 11th May 2023
It’s official – INP is set to replace FID in March 2024.
Chrome has announced that Interaction to Next Paint (INP) is no longer experimental and will replace First Input Delay (FID) as a Core Web Vital metric in March 2024. Although this change won’t take effect for some time, we should start considering INP as soon as possible. Fewer sites have good INP on mobile devices (around 60%) when compared to FID (>93%), so there is more room for improvement.
Read more information about the upcoming changes, here.
Introduction
Picture this. You’re having a wonderful time browsing the website of one of your favourite online retailers. All of a sudden, you spot the latest must-have product. In the hopes of snapping up your item before someone else gets there first, you quickly click ‘add to basket’, but before long, your shopping journey reaches a snag.
Not only has your item not been added to your basket, but the screen has frozen.
Disaster!
You try clicking ‘add to basket’ again a few more times, after all, this might just be a glitch and you really do want to get your hands on your purchase. But this time, you encounter the spinning loading wheel of death.
Eventually, the screen appears to have finished loading, but the chaos doesn’t end there. It turns out your item has now been added to your basket five times.
Sound familiar? We’ve all experienced the misfortune of interacting with an unresponsive website at some point.
With estimates from Forbes that 20.8% of retail purchases are expected to take place online in 2023, there has never been a better time to ensure that your website provides the best possible experience. If your website is slow to respond, or uses interactive elements poorly, it runs a high risk of customers becoming frustrated by the shopping experience and looking elsewhere.
But how can you measure just how quickly your website responds?
Introducing Interaction to Next Paint.
INP is a metric that measures how long it takes to interact with different elements on a web page.
You may be wondering, why should my website be optimised for responsiveness? How is INP calculated? Is INP better than First Input Delay? Or what can be done to improve INP scores?
You ask, we answer. So let’s take a closer look at INP and why conducting an INP audit now can identify low hanging fruit to boost your website performance.
Defining INP
INP has been developed to address the gaps that arise when measuring the Core Web Vitals – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Both LCP and FID are only reported for the initial page load, yet 90% of user time spent on a page happens after the load. Therefore it’s important to measure all user interactions on a page to reflect the full experience.
INP is a full page lifecycle metric meaning it measures runtime responsiveness – the responsiveness of a website as a user interacts with it. This experimental metric considers all interactions on the page when scoring, not just the first one.
Discrete interactions such as tap, drag, and keyboard movements are measured, but continuous events such as hover and scroll are ignored.
Be that as it may, scrolling with the keyboard – space bar, page up, page down, and so forth – involves a keystroke, which can trigger other events that INP does measure. Any resulting scrolling triggered by keystrokes is not factored into how INP is calculated.
For now, INP is still an experimental metric, but it has been widely speculated that it’s intended to be a successor to FID.
Why should a website be optimised for responsiveness?
User interaction is key to the success of a website. An interactive website includes elements that users can actively engage with, and provides opportunities to communicate.
It’s important to strike a balance between interactivity and providing useful information, as users should not feel overwhelmed by interactive elements that prevent them finding what they’re looking for.
Successful interactive elements provide a better user experience. Therefore, make sure that you monitor and enhance website interactivity since engaged users are more likely to click, view and of course, buy products.
Similarly, a poor user experience – in this case, an inability to interact with a page or its elements in a timely and responsive manner – can lead to higher bounce and exit rates.
The potential impact of improving responsiveness must also be taken into account. Research from Google estimates that users experiencing better responsiveness i.e., pages with ‘good’ INP scores load twice as many web pages compared to those who land on webpages with poor INP scores.
Captivating an online audience with a website that is fast to respond might sound complicated at first, but it doesn’t have to be. Essentially, by regularly auditing your website, you can identify potential bottlenecks and blockers to interaction before your customers do.
How is INP calculated?
When measuring INP in an audit, full interaction latency is considered. From an INP perspective an interaction consists of three components:
- Input delay – any background tasks on the page that prevent the event handler from running.
- Processing time – time spent running event handlers in JavaScript.
- Presentation delay – time spent recalculating the page layout and painting the page elements.
INP is measured from the time a user interacts with a page until they see a visual response – this means it’s not only the delays on the main thread that are measured.
INP is calculated in three steps:
- Multiple interactions – Interactions are measured. Each interaction can have multiple events which can lead to multiple animation frames. For each interaction, the duration of the worst performing part is recorded. Each interaction is assigned an INP value.
- Whole page lifecycle – One poor interaction is chosen for the whole page lifecycle. Although there might be many interactions taking place within a website, for INP, each page load reports only this single value. Most websites have relatively few interactions so the single worst interaction is chosen. However, for more interactive websites, i.e., those with text editors, chat, or games, a high percentile is chosen to overlook any outliers.
- 75th percentile – As with other metrics, a website is assessed using 75th percentile scores across all page loads. Today, 200 milliseconds (ms) is an ideal threshold for good responsiveness on webpages, whereas 500ms is considered to be poor.
Although research by Google suggests that users typically expect interactions to be no longer than 100ms, the threshold for INP is 200ms. If the majority of your website’s users have high end devices, then a 100ms target might be more appropriate, however, 200ms is established as an achievable target for most websites.
Is INP a better interactivity metric than FID?
Measuring interactiveness involves more than first impressions. By sampling groups of interactions, responsiveness can be assessed comprehensively, making INP a more reliable metric than FID.
For instance, some third party bot detection libraries wait until the first interaction is complete before executing heavy scripts. An issue like this one might not impact input delay or tasks during load, but can still affect user responsiveness.
FID is also capturing fewer delays than when the metric was first launched. Some potential explanations for this are that frameworks have adapted web platform features like isInputPending() to avoid delaying user input while third parties have delayed loading heavy scripts until user interaction.
Origin data gathered by Google suggests that almost 95% of websites are now passing for FID. Unfortunately, the web is far from being fixed. For instance, main-thread blocking JavaScript is still a huge issue across the board, especially on JavaScript heavy websites.
How to optimise INP
Optimising for INP leads to a better user experience. With that being said, it’s important to understand which activities can lead to improvements in INP scores. This is why conducting regular page experience audits of your website is key.
For instance, long running tasks early in page load can delay content from being displayed – this type of issue is captured by the LCP metric. Long running tasks that cause freezing when the user tries to interact with the web page however are captured by FID and INP.
When identifying opportunities to improve INP scores as part of a page experience audit, reducing main-thread blocking scripts should be a priority. INP scores can be measured using PageSpeed Insights, web-vitals.js, and then tools such as Lighthouse can provide detailed debugging information such as identifying which JavaScript resources are blocking the main-thread.
Once lab data scores start to improve, further optimisations can be difficult. However, the Core Web Vitals LCP, FID, and CLS are all measurable in the field and can be used to get a feel for what real users are seeing. Consequently, web-vitals.js and the performance insights panel can be used to determine which interactions are slow and what’s going wrong. Some common issues are listed below:
- Multiple event handlers – e.g., when the user encounters a long wait after clicking on a product image on a web page. Using multiple event handlers contributes to interaction time, but only looking at individual event handlers neglects the full story. When optimising, consider the full interaction to measure performance.
- Too much third-party code – e.g., when loading a news article and opening a menu. Third party scripts load and evaluate tasks before the interaction. Third-party scripts often run continuously and slow things down as event handlers need to wait for them to finish until they can run.
- Running essential tasks on the main thread – essential tasks can be split and scheduled more efficiently.
INP therefore offers a simple way to measure page loads and uncover responsiveness issues quickly while taking multiple interactions into account. Accordingly, if the majority of websites continue to score well for FID then this Core Web Vital could be replaced by INP in the near future.
Optimise your website for INP today
Online audiences deserve an experience that is fast and responsive. Therefore, brands that value their search presence and want to generate leads from Google should focus on improving Core Web Vitals scores while also taking into account experimental metrics like INP.
Above all, making changes to boost Core Web Vitals scores and responsiveness metrics like INP can help to deliver better user experiences and increase conversion rates.
Ultimately, the sooner improvements are made to the responsiveness of your website, the greater any advantages will be against competitors. Need help implementing improvements or have any questions about the topics covered in this blog? Get in touch with our team today.
