diff --git a/files/en-us/glossary/interaction_to_next_paint/index.md b/files/en-us/glossary/interaction_to_next_paint/index.md index 87fe90aa9142bac..87dce5f45bc45d6 100644 --- a/files/en-us/glossary/interaction_to_next_paint/index.md +++ b/files/en-us/glossary/interaction_to_next_paint/index.md @@ -14,7 +14,7 @@ INP was designed by Google as one of the [Core Web Vital](https://web.dev/articl INP measures the worst length of time (minus some outliers), in milliseconds, between the user interaction on a web page and the next frame presentation after that interaction is processed. Scrolling and zooming are not included in this metric. INP is calculated using the [Event Timing API](/en-US/docs/Web/API/PerformanceEventTiming). Asynchronous operations such as network fetches or file reads usually do not delay INP as painting can occur while such operations are handled. -All eligible interactions throughout the page lifetime are considered. For highly interactive pages of 50 or more interactions, the 98th percentile is used to exclude some extreme outliers that are not reflective of overall page responsiveness. +All eligible interactions throughout the page lifetime are considered. For highly interactive pages of 50 or more interactions, the 98th percentile is used to exclude extreme outliers that are not reflective of overall page responsiveness. The {{domxref("Performance.interactionCount")}} value can be used to query the interaction count to determine when a large number of interactions have happened on a page. The longer the delay, the worse the user experience. The [Long Animation Frames API](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing) can help identify causes of high INP. @@ -22,6 +22,7 @@ The longer the delay, the worse the user experience. The [Long Animation Frames - [Long animation frame timing](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing) - [PerformanceEventTiming](/en-US/docs/Web/API/PerformanceEventTiming) +- {{domxref("Performance.interactionCount")}} - [INP](https://web.dev/articles/inp) on web.dev (2023) - [Optimize Interaction to Next Paint](https://web.dev/articles/optimize-inp) on web.dev (2023) - [Interaction to Next Paint is officially a Core Web Vital](https://web.dev/blog/inp-cwv-launch) on web.dev (2024) diff --git a/files/en-us/web/api/navigation_api/index.md b/files/en-us/web/api/navigation_api/index.md index 259cfccde1d7de4..e1618f64acda039 100644 --- a/files/en-us/web/api/navigation_api/index.md +++ b/files/en-us/web/api/navigation_api/index.md @@ -24,7 +24,7 @@ The API is accessed via the {{domxref("Window.navigation")}} property, which ret The `navigation` interface has several associated events, the most notable being the {{domxref("Navigation/navigate_event", "navigate")}} event. This is fired when [any type of navigation](https://github.com/WICG/navigation-api#appendix-types-of-navigations) is initiated, meaning that you can control all page navigations from one central place, ideal for routing functionality in SPA frameworks. (This is not the case with the {{domxref("History API", "", "", "nocode")}}, where it is sometimes hard to detect and respond to all navigations.) The `navigate` event handler is passed a {{domxref("NavigateEvent")}} object, which contains detailed information including details around the navigation's destination, type, whether it contains `POST` form data or a download request, and more. -The `NavigationEvent` object also provides two methods: +The `NavigateEvent` object also provides two methods: - {{domxref("NavigateEvent.intercept", "intercept()")}} allows you to specify custom behavior for navigations, and can take the following as arguments: - Callback handler functions allowing you to specify what happens both _when_ the navigation is committed and _just before_ the navigation is committed. For example, you could load relevant new content into the UI based on the path of the URL navigated to, or redirect the browser to a sign-in page if the URL points to a restricted page and the user is not signed in. diff --git a/files/en-us/web/api/performance/eventcounts/index.md b/files/en-us/web/api/performance/eventcounts/index.md index e718ea74956e808..c1385a669e271ee 100644 --- a/files/en-us/web/api/performance/eventcounts/index.md +++ b/files/en-us/web/api/performance/eventcounts/index.md @@ -8,7 +8,7 @@ browser-compat: api.Performance.eventCounts {{APIRef("Performance API")}} -The read-only `performance.eventCounts` property is an {{domxref("EventCounts")}} map containing the number of events which have been dispatched per event type. +The read-only `performance.eventCounts` property is an {{domxref("EventCounts")}} map containing the number of events which have been dispatched per event type since the page was loaded. Not all event types are exposed. You can only get counts for event types supported by the {{domxref("PerformanceEventTiming")}} interface. diff --git a/files/en-us/web/api/performance/index.md b/files/en-us/web/api/performance/index.md index a199b3d53991c44..290d5e691780eed 100644 --- a/files/en-us/web/api/performance/index.md +++ b/files/en-us/web/api/performance/index.md @@ -19,13 +19,12 @@ _The `Performance` interface doesn't inherit any properties._ - {{domxref("Performance.eventCounts")}} {{ReadOnlyInline}} - : An {{domxref("EventCounts")}} map containing the number of events which have been dispatched per event type. - +- {{domxref("Performance.interactionCount")}} {{ReadOnlyInline}} + - : The number of real-user interactions that have occurred on the page, which is useful when calculating {{Glossary("Interaction_to_next_paint", "Interaction to Next Paint (INP)")}}. - {{domxref("Performance.navigation")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : A legacy {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in `timing`, including whether the page was a load or a refresh, how many redirections occurred, and so forth. - - {{domxref("Performance.timing")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : A legacy {{domxref("PerformanceTiming")}} object containing latency-related performance information. - - {{domxref("Performance.memory")}} {{ReadOnlyInline}} {{Non-standard_Inline}} {{Deprecated_Inline}} - : A _non-standard_ extension added in Chrome, this property provides an object with basic memory usage information. _You **should not use** this non-standard API._ - {{domxref("Performance.timeOrigin")}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/performance/interactioncount/index.md b/files/en-us/web/api/performance/interactioncount/index.md new file mode 100644 index 000000000000000..37c3237ce4c6009 --- /dev/null +++ b/files/en-us/web/api/performance/interactioncount/index.md @@ -0,0 +1,46 @@ +--- +title: "Performance: interactionCount property" +short-title: interactionCount +slug: Web/API/Performance/interactionCount +page-type: web-api-instance-property +browser-compat: api.Performance.interactionCount +--- + +{{APIRef("Performance API")}} + +The read-only `performance.interactionCount` property represents the number of real-user interactions that have occurred on the page since it was loaded. + +Only discrete interactions with an {{domxref("PerformanceEventTiming.interactionId", "interactionId")}} — such as clicks and key events — are counted. Other interactions, such as scroll interactions, are excluded. + +This is useful when calculating {{Glossary("Interaction_to_next_paint", "Interaction to Next Paint (INP)")}}, and in particular to exclude outliers for long-lived pages. INP takes the 98th percentile of interactions for a page and so excludes 1 in every 50 interactions as "outliers" that are not reflective of overall page responsiveness. + +## Value + +A number, which is initially `0`, and increments by `1` with each discrete interaction as measured by {{domxref("PerformanceEventTiming")}}, where an {{domxref("PerformanceEventTiming.interactionId")}} is assigned. + +## Examples + +### Checking the number of interactions to accurately calculate INP + +For pages with a large number of interactions, you can recalculate INP after +excluding 1 out of every 50 outliers using the following pattern: + +```js +if (performance.interactionCount >= 50) { + recalculateINP(); // Actual calculation is complex and is not shown here +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("PerformanceEventTiming")}} +- {{domxref("PerformanceEventTiming.interactionId")}} +- {{Glossary("Interaction_to_next_paint", "Interaction to Next Paint (INP)")}}