INP Sub-Metrics

What Are INP Sub-Metrics?

When your INP value is too high, the sub-metrics show you exactly where the problem lies: is heavy JavaScript blocking input (Input Delay), is processing taking too long (Processing Time), or is rendering stuttering (Presentation Delay)? Without this breakdown, you’re optimizing in the dark. This granular analysis saves you time and enables targeted improvements that directly affect your Core Web Vitals and rankings.

INP Sub-Metrics break down the Interaction to Next Paint (INP) — one of the three Core Web Vitals — into its three components: Input Delay, Processing Time, and Presentation Delay. This breakdown is critical for targeted optimization because each component has different causes and solutions.

Input Delay measures the time between the user interaction (click, typing) and the start of event handler execution. A high Input Delay indicates a blocked main thread — often caused by running JavaScript tasks. Processing Time is the duration of the actual event handler execution. Complex calculations, DOM manipulations, or synchronous API calls lengthen this phase. Presentation Delay finally measures the time from the end of processing to the next paint — that is, until the browser actually displays the visual changes on screen. Layout calculations and paint operations are the main causes here.

For optimization, first analyze which sub-metric accounts for the largest share of INP. With high Input Delay, code splitting and breaking up long tasks help. With high Processing Time, optimize your event handlers. With high Presentation Delay, reduce layout thrashing and use CSS containment. Modern architectures like Islands Architecture or Selective Hydration reduce all three components simultaneously.