Firefox 144<\/b> ships Firefox 144<\/b> ships support for the The Interaction to Next Paint (INP)<\/b> metric, part of the Core Web Vitals<\/a>, relies on this grouping to measure how responsive a page feels during real user interactions. INP represents how long it takes for the next frame to paint after a user input. Instead of looking at a single event, it captures the worst interaction latency during the page\u2019s lifetime, giving a more complete view of responsiveness.<\/p>\n Before If you use the PerformanceObserver API<\/a> to collect If you use external tools and libraries like web-vitals<\/a>, they should already collect the INP value for you.<\/p>\n","protected":false},"excerpt":{"rendered":" TL;DR Firefox 144 ships PerformanceEventTiming.interactionId, which lets browsers and tools group events that belong to the same user interaction. This property is used to calculate Interaction to Next Paint (INP), … Read more<\/a><\/p>\n","protected":false},"author":1859,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[457019],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/531"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/users\/1859"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}PerformanceEventTiming.interactionId<\/code>, which lets browsers and tools group events that belong to the same user interaction. This property is used to calculate Interaction to Next Paint (INP)<\/b>, one of the Core Web Vitals<\/a>.<\/p>\n
\nPerformanceEventTiming.interactionId<\/code> property. It helps browsers and tools identify which input events belong to a single user interaction, such as a pointerdown<\/code>, pointerup<\/code>, and click<\/code> triggered by the same tap.<\/p>\nWhy this matters<\/h2>\n
interactionId<\/code>, each event had to be measured separately, which made it hard to connect related events as part of the same interaction.
\nWith this property, performance tools and developers can now:<\/p>\n\n
Using interactionId<\/h2>\n
PerformanceEventTiming<\/code> entries, you\u2019ll start seeing an interactionId<\/code> field in Firefox 144. Events that share a non-zero interactionId<\/code> belong to the same interaction group, which can be used to calculate latency or understand where delays occur.<\/p>\n\/\/ The key is the interaction ID.<\/span>\r\nlet<\/span> eventLatencies<\/span> = {};\r\n\r\nconst<\/span> observer<\/span> = new<\/span> PerformanceObserver<\/span>((list<\/span>) => {\r\n list.getEntries<\/span>().forEach<\/span>((entry<\/span>) => {\r\n if<\/span> (entry.interactionId<\/span> > 0) {\r\n const<\/span> interactionId<\/span> = entry.interactionId<\/span>;\r\n if<\/span> (!eventLatencies[interactionId]) {\r\n eventLatencies[interactionId] = [];\r\n }\r\n eventLatencies[interactionId].push<\/span>(entry.duration<\/span>);\r\n }\r\n });\r\n});\r\n\r\nobserver.observe<\/span>({ type<\/span>: \"event\"<\/span>, buffered<\/span>: true<\/span> });\r\n\r\n\/\/ Log events with maximum event duration for a user interaction<\/span>\r\nObject<\/span>.entries<\/span>(eventLatencies).forEach<\/span>(([k<\/span>, v<\/span>]) => {\r\n console<\/span>.log<\/span>(Math<\/span>.max<\/span>(...v));\r\n});\r\n<\/code><\/pre>\n