Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion files/en-us/glossary/interaction_to_next_paint/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ 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.

## See also

- [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)
2 changes: 1 addition & 1 deletion files/en-us/web/api/navigation_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/performance/eventcounts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
5 changes: 2 additions & 3 deletions files/en-us/web/api/performance/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
46 changes: 46 additions & 0 deletions files/en-us/web/api/performance/interactioncount/index.md
Original file line number Diff line number Diff line change
@@ -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)")}}