Performance Theoretical 3 - INP

Understanding INP (Interaction to Next Paint)

INP measures the responsiveness of a page to user interactions. A good INP score should be under 200ms.

Demo 1: Simple Interaction

This button responds immediately - good INP example

Demo 2: Poor INP Example

This button intentionally blocks for 300ms - poor INP example

How to Measure INP:

Open Chrome DevTools (F12)
Go to Performance tab
Start recording
Click the buttons above
Stop recording and analyze the interaction traces

Common INP Issues:

Heavy JavaScript execution
Layout thrashing
Long task blocking
Complex event handlers