This is a small library which provides a polyfill for the PerformanceEventTiming API such that is enough for measuring INP across all browsers.
Currently only Chromium based browsers are reporting INP data. This means that interactivity of sites can be improved only for these browsers. Reality is that other browsers like Safari and Firefox exist and in some cases they form the largest visitor base for a website. Not having data for the user experience there means these sites cannot be optimized for the users of these browsers. Chromium's data cannot be used as a proxy because we know that:
- events are handled differently sometimes
- third parties might behave differently for these browsers
- the site itself might have different behavior for these browsers
Using this library you can get INP data for all browsers and ensure great user experience for everybody 🎉
You can test how the polyfill works on this modified version of the popular INP demo page.
In order to ensure most accurate results load the script as early in your page as possible. Make sure to load it before you load your code which measures INP.
<script src="https://unpkg.com/performance-event-timing-polyfill"></script>By default the polyfill will try to emulate native PerformanceEventTiming API entries. However internally the library is tracking the events a bit more granularly. You can subscribe to the raw event measure entries and calculate INP yourself, if you so desire (not recommended).
import { onInteraction } from 'https://unpkg.com/performance-event-timing-polyfill?module';
onInteraction(console.log);All major browsers are supported. For Chrome, the polyfill doesn't activate by default since this API is provided natively. But the event observer is still active. This means you can still use onInteraction() from this library which could be useful if you need apples to apples comparisons across browsers.
When there are overlapping interactions, attribution comes out a bit off currently. Further investigation is needed.
Data may be off if this polyfill is not loaded early enough in the page lifecycle. Ideally it should be loaded before any event listeners are registered and before any performance observers are created. This is needed to ensure that the event handlers added by this library are the first to execute. Otherwise calls to stopImmediatePropagation() can prevent the library from detecting an event.
Only pointerdown, mousedown, pointerup, mouseup, pointercancel, click, auxclick, contextmenu, keydown, keypress, keyup are measured for now.
To build the code once (production) run
npm run build
To build and watch for changes (dev) run
npm run dev
Feel free to open issues or PRs to report issues or suggest improvements!