INP: cosa misura e come si migliora

INP misura il tempo tra un tocco e il frame che mostra la risposta: sotto 200 ms è buono. Non è il ritardo del primo input, e per questo ha sostituito FID il 12 marzo 2024.

Le tre parti della latenza

La latenza di un'interazione si divide in input delay, processing duration e presentation delay. L'input delay arriva dal main thread occupato quando l'utente tocca, il processing è il tuo handler, la presentation è il frame che il browser deve dipingere dopo.

Leggere INP dal campo

curl -s -H "x-admin-token: $ADMIN_TOKEN" "https://ui.eneawork.it/api/rum/summary?days=30" | jq '.metrics.INP, .devices.mobile.INP'

L'endpoint restituisce conteggio, p75 e soglia per metrica, più la stessa lettura separata per device. Richiede ADMIN_TOKEN sul server: senza token risponde 503, con un token sbagliato 401.

Misurare una singola interazione

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.interactionId) continue;
    console.log(entry.name, Math.round(entry.duration), entry.target);
  }
}).observe({ type: "event", durationThreshold: 40, buffered: true });

La soglia minima di durationThreshold è 16 ms e 40 taglia il rumore. Gli eventi senza interactionId, come lo scroll o il movimento del mouse, non sono interazioni e restano fuori dal conteggio.

Tre correzioni che spostano il p75

• Cedi il main thread dopo 50 ms di lavoro: await scheduler.yield() dove esiste, setTimeout(…, 0) come ripiego.
• Riduci il JavaScript che parte al caricamento: ogni kilobyte di entry code è lavoro prima che un tocco possa essere gestito.
• Non idratare interi alberi interattivi: carica il comportamento quando il componente entra nella viewport.

La limitazione da dichiarare

INP è una metrica per visita, non per pagina: una visita lunga pesa quanto una breve e il p75 aggregato nasconde la route lenta. Le nostre 66 letture includono sessioni automatiche, quindi non sostituiscono il Chrome UX Report: leggile per route e per device prima di dichiarare un passaggio.

Dove continuare

Nel catalogo: componenti interattivi, image accordion e blocchi dashboard. Le guide: un import che aumenta il bundle e cosa sono i Core Web Vitals; l'articolo gemello su LCP e il confronto misurato librerie React 2026.