Web performance plays a critical role in shaping the modern internet. Our CTO, Ivailo Hristov, developed an innovative tool to enhance INP measurement capabilities that represents a step forward in creating a faster, more responsive web experience. This polyfill for measuring INP levels the playing field for web developers, enabling accurate responsiveness insights across all browsers and devices. Whether you’re looking to improve INP or debug specific issues, this tool provides the clarity you need.

What is INP?

Interaction to Next Paint (INP) is a key performance metric introduced in March 2024 by Google as part of the Core Web Vitals. It measures how quickly a webpage responds to user interactions - like taps, clicks, or key presses - by tracking the time it takes for the browser to display the visual result of that interaction. 

Unlike the older responsiveness metric First Input Delay (FID), INP focuses on the entire user session rather than just a single interaction, providing a more accurate picture of a site's overall interactivity.

Why does INP matter?

Immediate and smooth interactions can make or break the user experience. Whether it's a delayed click response or slow input on mobile devices, poor INP can frustrate users and drive them away. 

Source: web.dev

Beyond usability, INP also influences SEO performance. Google factors Core Web Vitals, including INP, into its search rankings - making a good INP score essential for search visibility and site success.

Source: web.dev

However, there’s a challenge: not all browsers natively support the APIs required to measure INP. This gap has left developers struggling to collect complete data, leading to missed opportunities for optimization - especially on mobile INP where responsiveness matters most.

How is INP measured:

In Chrome and other Chromum-based browsers (like Edge and Opera)INP is determined by analyzing the lifecycle of a user interaction, which can be broken into distinct phases, captured by the EventTiming API. 

Source: web.dev

When a user clicks, taps, or presses a key, there is often an initial input delay before the browser begins processing the event. This delay can occur if the main thread is busy handling other tasks, such as long-running scripts or rendering operations. Once the browser starts executing the event handler, the interaction is processed, and any relevant updates are triggered. However, another delay may occur before the browser is able to render the updated frame and display the result of the interaction on screen.

The total time from the user’s input to the visual response is what determines the responsiveness of the page. Since INP focuses on the worst-performing interactions during a session, it highlights areas where delays are most noticeable and helps developers identify bottlenecks affecting real-world user experience.

Why measure INP on Safari (and other non-Chromium browsers)?

While Google Chrome fully supports the native Event Timing API, Safari and Firefox lag behind, creating gaps in measuring INP performance. For developers, this limitation is particularly significant on Safari, where custom scripts, plugins, or third-party tools can introduce hidden issues.

For instance, a site optimized for Chrome may still exhibit poor responsiveness on Safari, especially on mobile. This discrepancy can hurt the user experience and business outcomes. Accurate measurement across all browsers ensures good INP scores universally and provides actionable data for improvements. This is often due to differences in browser engines - Chrome’s Blink and Safari’s WebKit handle layouts and interactions uniquely. Additionally, Safari’s slower adoption of new web standards and variations in network handling, like caching and resource prioritization, can further impact responsiveness.

The Uxify solution: A polyfill for consistent INP measurement

Recognizing this gap, Ivailo Hristov set out to address the problem. His polyfill bridges the divide by emulating the missing PerformanceEventTiming events on browsers where native support is unavailable. By capturing key user interactions – like clicks and key presses – and generating high-resolution timestamps, the polyfill mirrors the functionality of the native API. This approach, which we detail further on our INP Polyfill page, provides a reliable and consistent way to track responsiveness, no matter which browser your audience is using

How the polyfill works

The polyfill creates and emits the missing PerformanceEventTiming entries by capturing and processing native browser events. Here’s a quick breakdown of its core functionalities:

• Event Monitoring:
  The polyfill attaches handlers to critical user interaction events, such as pointerdown, pointerup, mousedown, mouseup, keydown, and keyup.

• Timestamp Creation:
  For each interaction, it generates high-precision timestamps that align with the format of native PerformanceEventTiming entries, ensuring consistency.

• Custom Events:
  These synthetic events replicate the behavior and structure of native PerformanceEventTiming data, making them seamlessly compatible with existing performance measurement tools and libraries.

Considerations and Limitations

While the polyfill triggers the required PerformanceEventTiming events, it doesn't calculate INP directly. Developers are responsible for implementing their own calculations or integrating the polyfill with tools like web-vitals to obtain accurate INP values suited to their specific requirements.

Also, for accurate measurements, it's essential that the polyfill loads before other event listeners. This ensures that all interactions are captured without being missed during the event collection process.

Performance impact

The polyfill is designed with performance in mind, ensuring smooth integration into web applications without causing bottlenecks:

• Minimal Overhead: Event handlers are lightweight, focusing only on key user interactions such as pointer and keyboard events, thus avoiding unnecessary processing.

• Efficient Event Handling: Handlers are triggered only by relevant events, eliminating redundant tasks and minimizing CPU consumption.

By prioritizing both accuracy and efficiency, this solution delivers reliable performance measurement while preserving optimal website functionality.

After implementing the polyfill, we tested its impact on the native INP value reported by Chromium browsers. The results, shown in the chart below, indicate no additional overhead. Internal tests confirmed that there was no measurable effect on load times, responsiveness, or resource consumption, making it suitable for real-world use.

Source: Uxify

Implementing the PerformanceEventTiming polyfill

To integrate the polyfill, simply add the following JavaScript snippet to your website’s <head> tag, ideally before any other scripts:

<script src="https://unpkg.com/performance-event-timing-polyfill"><script>

This should be sufficient for most cases. 

You can use this data to calculate your own INP value or integrate with third-party libraries like the web-vitals library.

We also developed a cross-browser INP demo page (adapted from the popular Chrome INP demo page) that allows you to test how the polyfill works. 

For additional information, visit the official GitHub repository for the polyfill.

Celebrated by the performance community

We’re proud that Ivailo’s work has been featured in the 2024 PerfPlanet Advent Calendar, a premier platform for sharing cutting-edge insights into web performance. His article, "Towards Measuring INP on All Browsers and Devices", provides a deep dive into the technical aspects of this tool.

The polyfill has already sparked enthusiasm within the performance community:

“Great work! I like the idea of also using next-event-listener as another opportunity to mark timings, alongside next tick and raf.”
– Michal Mocny, Senior Software Developer @ Google Chrome

Why this matters for your business

Reliable INP measurements aren’t just for developers - they impact user satisfaction, SEO, and conversion rates. A site with good INP keeps users engaged longer and reduces bounce rates, directly improving business outcomes.

For example, a retail site struggling with input delays during checkout could see fewer abandoned carts simply by improving INP. Similarly, a media platform with optimized responsiveness ensures users spend more time on content, boosting retention and ad revenue.

Research reveals how INP optimization directly impacts conversion rates. Their findings showed that retail users with Good INP experienced a 25% higher conversion rate compared to those in the Poor or Needs Improvement range—2.5% versus 2.0%. The difference was even more significant for desktop users, where Good INP boosted conversion rates to 4.2%, a remarkable 45% increase compared to 2.9% for others. These percentages highlight the critical role of INP in enhancing user engagement and driving measurable business outcomes.

Conclusion: Build a faster web with Uxify

A developer-friendly innovation

Although native support for the EventTiming API for all browsers would be the ideal future, this polyfill is more than just a workaround - it’s a tool designed for real-world performance monitoring. Lightweight and efficient, it integrates seamlessly with popular tools like the web-vitals library, allowing teams to continue their workflows without adding complexity or performance overhead. For developers focused on improving user experience, this opens the door to a fuller understanding of site responsiveness and empowers better optimization decisions.

Join the journey

At Uxify, we’re committed to helping developers and businesses improve performance and deliver seamless user experiences. Ivailo’s polyfill is a developer-friendly, efficient tool that empowers you to measure, debug, and improve INP across all browsers and devices.

The polyfill is completely free to use, and we’re excited to collaborate with the community to make it even better and more useful. By working together, we can continue refining tools that help developers optimize site performance and ensure a smoother, faster web experience for everyone.

To explore the polyfill in action, check out the GitHub repository for details on the implementation.

Let’s make the web work faster and smoother for everyone, everywhere.