Interaction to Next Paint (INP)

Què comprova aquesta auditoria

Llegeix l’INP de PageSpeed Insights. L’INP mesura la interacció més lenta al percentil 98 (clic, toc, pulsació) durant una sessió de pàgina, en mil·lisegons. Des del març de 2024, l’INP va substituir el First Input Delay (FID) com a tercer Core Web Vital.

Valor INP	Veredicte
≤ 200 ms	Bo
200–500 ms	Cal millorar
> 500 ms	Pobre

Per què importa

L’INP és la mètrica de rendiment més propera a “aquest lloc se sent ràpid?”. A diferència de l’LCP (que mesura la càrrega) o el CLS (que mesura l’estabilitat), l’INP mesura la interactivitat al llarg de tota la sessió, no només a la càrrega.

Un INP pobre gairebé sempre és un problema de JavaScript. El fil principal està ocupat executant els teus scripts, així que quan l’usuari clica, el handler del clic queda encolat darrere del que s’estigui executant i la pantalla s’endarrereix.

Com solucionar-ho

1. Troba les teves pitjors interaccions. A Chrome DevTools, obre la pestanya Performance, grava una sessió que inclogui la interacció lenta. Busca tasques llargues (>50 ms) just després de l’event de clic.

2. Trenca les tasques llargues. Qualsevol JavaScript síncron que s’executi durant més de 50 ms bloqueja l’input de l’usuari. Divideix-lo en trossos compatibles amb await:

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Els navegadors moderns també tenen scheduler.yield() (Chromium 129+) que és més net.

3. Difereix els scripts no crítics. Mou l’analítica, els anuncis, els snippets de tests A/B i els widgets de xat perquè carreguin després de la primera interacció (o fes servir requestIdleCallback).

4. Fes servir content-visibility: auto a les seccions fora de pantalla. El navegador es salta el layout i el paint per al contingut amagat fins que entra al viewport.

5. Alleugereix els re-renders de React/Vue/Svelte. Un assassí d’INP habitual: un handler de clic provoca una actualització d’estat que re-renderitza 500 components. Fes servir memoització (React.memo, useMemo), virtualització per a llistes llargues i slices d’estat granulars.

Preguntes freqüents

PageSpeed Insights mostra l’INP?

Sí, tant de laboratori com de camp. L’INP de camp ve del Chrome User Experience Report (CrUX) per a llocs amb prou tràfic; els llocs petits només mostren INP simulat de laboratori.

L’INP és el mateix que el FID?

No. El FID mesurava només el retard de la primera interacció. L’INP mesura el pitjor cas durant tota la sessió, incloent el temps d’execució del handler del clic i el següent paint. L’INP és aproximadament 5 vegades més difícil d’optimitzar que el FID.

El meu lloc és principalment estàtic. Per què l’INP és pobre?

Fins i tot un lloc estàtic sovint té scripts de tercers pesats (analítica, xat, banners de consentiment) acaparant el fil principal. Audita les teves etiquetes <script> i difereix tot el que no sigui crític per al primer paint.