INP – Interaction to Next Paint: come migliorare la reattività del tuo sito

Troppo codice JavaScript che gira al click. Se il tuo framework carica 500KB di JS e l'utente clicca, il main thread si blocca per processare quel codice.

Soluzione: Code splitting, lazy loading, tree-shaking per rimuovere JS inutilizzato.

Il thread principale del browser è occupato (parsing, execution, layout). Quando l'utente clicca, il browser attende che il main thread sia libero prima di processare l'input. Questo crea un delay enorme.

Soluzione: Ridurre il carico del main thread, usare Web Workers per calcoli pesanti, rinviare le task non critiche.

Una singola task JavaScript che impiega più di 50ms blocca il main thread. Se ce ne sono più di una al click, il delay si accumula.

Soluzione: Frammentare le long task in piccoli chunk, usare setTimeout() o requestIdleCallback().

Se il tuo sito ha centinaia di event listener e ognuno fa un lavoro pesante, il click attiva più listener e ciascuno compete per il main thread.

Soluzione: Usare event delegation, debouncing, throttling.

Layout trashing: il tuo codice legge le proprietà del DOM (width, height) che causa un reflow, poi modifica il DOM, che causa un altro reflow. Migliaia di reflow = paint lento.

Soluzione: Batch le operazioni DOM, usa requestAnimationFrame(), evita di mescolare letture e scritture del DOM.

Se il click attiva una fetch al server e il server non risponde velocemente, INP ne soffre. Però il server non è il bottleneck principale per INP (è più per la performance percepita).

Soluzione: Ottimizza il backend, usa caching, fetch anticipato.

Accedi a pagespeed.web.dev, inserisci l'URL del tuo sito, e Google mostra l'INP della pagina di desktop e mobile.

Vantaggi: Ufficiale, gratuito, mostra anche suggerimenti di ottimizzazione, accesso ai dati del Chrome UX Report.

Limitazioni: Misura su un device generico; non riflette i tuoi utenti reali. PageSpeed Insights è un snapshot, non una metrica continuativa.

Google raccoglie i dati di performance reali dai browser Chrome degli utenti. Puoi accedervi tramite CrUX Dashboard o via BigQuery.

Vantaggi: Dati reali dai tuoi utenti, storico mensile, segmentato per device type e connection type.

Limitazioni: I dati sono pubblici (se il tuo sito ha sufficiente traffico), ci vuole circa un mese per apparire nel CrUX.

Integra la libreria web-vitals nel tuo sito (NPM: web-vitals). Misura INP lato client e invia i dati a Google Analytics o alla tua piattaforma di monitoring.

Codice di esempio:

import {onINP} from 'web-vitals';
onINP(metric => {
  console.log('INP:', metric.value, 'ms');
  // Invia a Google Analytics o al tuo monitoring
});

Vantaggi: Misura reale dal tuo sito, integrazione con GA4 disponibile.

Apri Chrome DevTools (F12), vai al tab "Performance". Clicca su un elemento, esegui un'azione, e Chrome registra la timeline di processing, rendering, e paint.

Vantaggi: Visione dettagliata di ogni singola operazione, debug preciso.

Limitazioni: È un tool di debug, non per monitoring continuativo.

Meno codice JavaScript = meno processamento al click. Azioni concrete:

• Code splitting: Carica solo il JS necessario per la pagina corrente. Rinvia il caricamento di script non critici.
• Tree-shaking: Rimuovi il codice JS non utilizzato durante il build.
• Minificazione: Riduci la dimensione del JS minificandolo.
• Upgrade delle dipendenze: Le librerie più vecchie hanno overhead maggiore. Aggiorna a versioni moderne ottimizzate.

Se hai calcoli pesanti (data processing, algoritmi), sposta il lavoro in un Web Worker. Il main thread rimane libero per processare l'input.

Se hai una task che impiega 200ms, dividila in chunk più piccoli (< 50ms):

// BAD: long task
for (let i = 0; i < 1000000; i++) {
  expensiveCalculation();
}

// GOOD: chunked
function processInChunks(data, chunkSize = 1000) {
  let i = 0;
  function processChunk() {
    for (let j = 0; j < chunkSize && i < data.length; j++, i++) {
      expensiveCalculation(data[i]);
    }
    if (i < data.length) {
      setTimeout(processChunk, 0); // Cede il main thread
    }
  }
  processChunk();
}

Non aggiungere un listener a cento elementi. Usa event delegation (un listener sul parent) e debounce gli event ricorrenti (scroll, resize, input):

// Debounce esempio
function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}

element.addEventListener('input', debounce(() => {
  performSearch();
}, 300));

Evita di alternare letture e scritture del DOM (layout thrashing):

// BAD: layout thrashing
for (const el of elements) {
  el.style.width = el.offsetWidth + 10 + 'px'; // Legge offset, causa reflow
}

// GOOD: batch
const widths = [];
for (const el of elements) {
  widths.push(el.offsetWidth); // Tutte le letture
}
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = (widths[i] + 10) + 'px'; // Tutte le scritture
}

Se sai che un click caricherà una risorsa (immagine, stylesheet, script), preload anticipatamente:

<link rel="preload" href="/important-script.js" as="script">
<link rel="prefetch" href="/next-page.html">

Non basta misurare una volta. Integra il monitoraggio INP in GA4 o in un servizio di monitoring. Crea un alert se INP degrada.

Ecco una checklist pratica e ordinata per migliorare l'INP:

• [ ] Misura l'INP attuale. Usa PageSpeed Insights, CrUX Dashboard, o Web Vitals JS. Baseline stabilita?
• [ ] Identifica le pagine con INP peggiore. Quali pagine hanno INP > 200ms? Sono homepage, product pages, checkout?
• [ ] Profilare con Chrome DevTools. Apri Performance tab, simula un'interazione reale (click, scroll), vedi dove il tempo viene speso.
• [ ] Riduci il carico JavaScript. Audit del JS con Lighthouse. Rimuovi dipendenze non usate. Code splitting su componenti pesanti.
• [ ] Identifica long task (> 50ms). Chrome DevTools > Performance mostra le long task. Sono dovute a JavaScript, rendering, o parsing?
• [ ] Frammentazione delle long task. Se è JavaScript, suddividilo in chunk. Usa setTimeout o requestIdleCallback.
• [ ] Abilita rendering ottimizzato. Profila il rendering: sei sicuro che il layout/paint sia necessario a ogni frame?
• [ ] Riduci il numero di event listener. Audit quanti listener hai. Usa event delegation.
• [ ] Debounce gli input ricorrenti. Se hai input/scroll listener che attivano funzioni pesanti, debounce con delay di 200-300ms.
• [ ] Web Workers per calcoli pesanti. Hai operazioni di data processing, encoding, calcoli complessi? Muovili in un Web Worker.
• [ ] Monitora INP in produzione. Integra Web Vitals JS in GA4. Crea un dashboard di monitoraggio INP nel tempo.
• [ ] Definisci un target e un SLA. Esempio: INP < 150ms per il 75° percentile. Comunica il target al team di sviluppo.
• [ ] Test su dispositivi reali e connessioni lente. Chrome DevTools CPU throttling: ridurre a 4x slowdown. Connessione: throttle a Fast 3G. Ripeti il profilamento.
• [ ] Revisione settimanale. Ogni settimana, controlla CrUX Dashboard. Se INP degrada, investigare il commit che l'ha causato.