Cos'e INP
Interaction to Next Paint e diventato Core Web Vital ufficiale a marzo 2024, sostituendo FID. Misura la responsivita della pagina considerando tutte le interazioni utente nel ciclo di vita: click, tap, key press. Restituisce il valore peggiore (o quasi-peggiore con molte interazioni) anziche solo la prima come faceva FID.
Soglie INP
Buono: inferiore a 200 millisecondi. Da migliorare: 200-500ms. Scarso: oltre 500ms. Il valore riportato e calcolato sul 98esimo percentile delle interazioni dell'utente. Un singolo gesto lento puo affossare la metrica.
Cosa misura realmente
INP cattura l'intervallo dall'inizio dell'interazione utente al prossimo paint che riflette il risultato. Include input delay (main thread occupato), processing time (event handler), presentation delay (compositing). Tutta la pipeline browser-rendering e considerata.
Cause di INP elevato
JavaScript pesante che blocca main thread (long tasks oltre 50ms). Event handler costosi (calcoli, manipolazione DOM grandi). Third-party script (chat, analytics, ads) che competono per la CPU. Layout/style ricalcolo massiccio dopo modifiche DOM. React/Vue render sincroni di componenti complessi.
Come ottimizzare
Spezza long task con setTimeout, scheduler.yield(), requestIdleCallback. Usa Web Worker per calcoli pesanti. Debounce/throttle handler frequenti (scroll, resize, input). Memoizza calcoli costosi. Virtualizza liste lunghe (react-window, virtual-scroll). Riduci dimensione bundle con code splitting.
Strumenti per debug INP
Chrome DevTools Performance Insights identifica long tasks e INP candidate. PageSpeed Insights mostra INP nei field data. Web Vitals extension Chrome visualizza INP in tempo reale. Web-vitals library JS permette di tracciare INP nel tuo analytics. Performance API misura interaction:start, interaction:end.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.