What is this tool?
The Interaction Delay Visualiser is an interactive simulator that allows users to adjust the delay time in milliseconds for webpage elements and observe how this affects their responsiveness. By clicking on buttons, users can compare the performance of elements side-by-side, gaining insights into the impact of delays on user experience.
How do I use the visualiser?
Users can input a desired delay time in milliseconds using the provided input box. Upon interacting with the buttons on the page, they will experience a delay, as specified, before the accordion with lorem ipsum text appears. This feature allows for a direct comparison of different delay times, enabling users to visually perceive the effect of response times on user interaction.
Why create a tool like this?
When Google rolls out a new standard for Core Web Vitals we can find ourselves chasing a ‘Good’ score with little thought of how these changes will impact user experience. If your INP score sits at 220ms for a group of pages Search Console will state that it ‘Needs Improvement’. However, the time, effort, and $ spent trying to shave off those 20ms could be directed towards other initiatives that will have a greater impact on user experience.
This tool is designed to make the often abstract concept of webpage responsiveness tangible. By allowing users to manipulate and observe the effect of input delay, it provides a hands-on understanding of how response times can affect user experience. This understanding is crucial for developers and designers in optimising web performance and user experience.
What are the tool’s limitations?
While this tool effectively demonstrates the impact of delays on individual elements, it’s important to remember that it does not replicate the full scope of real-world user interactions or the comprehensive INP metric. INP considers a variety of interactions and paints a broader picture of page responsiveness, which this tool, focusing on specific elements and controlled delays, does not fully capture.
Where can I learn more about INP?
The best place to start is Web.Dev’s official documentation: https://web.dev/articles/inp
The metric won’t be rolled out until March 2023, but you can see your INP scores in Google Search Console.