# INP and long tasks: why the page stops answering

A long task over 50 ms blocks every interaction. Three loads under mobile emulation gave one task of 513 ms: how to find it and split it.

> Page: https://ui.eneawork.it/blog/inp-long-tasks
> Markdown: https://ui.eneawork.it/blog/inp-long-tasks.md

*2026-11-01*

Un long task è un blocco del main thread che supera i 50 ms: se ne trovi uno da 513 ms, ogni tocco durante quel blocco aspetta. L'INP misura quanto aspetta, con la soglia buona a 200 ms.

INP e long task misurati su tre carichi di https://ui.eneawork.it/ con Chrome 155 headless, viewport 390×844 e CPU rallentata 4 volte, il 1 novembre 2026: da 1 a 2 long task per carico, il più lungo 513 ms e un TBT tra 400 e 508 ms. Con la soglia INP a 200 ms, un task da 513 ms rende lenta ogni interazione che arriva durante il caricamento. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Definizione e soglie: web.dev, CC BY 4.0.

## Le tre fasi di un'interazione

Conta la somma delle tre fasi. Durante il caricamento il ritardo di input è spesso la parte più grande, e nessuna ottimizzazione dell'handler lo tocca.

## Trovare i long task

new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(Math.round(entry.duration), "ms at", Math.round(entry.startTime)); } }).observe({ type: "longtask", buffered: true });

Lo snippet si incolla nella console del browser e la pagina va ricaricata: con buffered tornano anche i task emessi prima dell'osservatore. Il tipo longtask è esposto da Chrome ed Edge; Safari e Firefox non lo restituiscono, quindi lì conviene la traccia del pannello Performance.

## Come si spezza

## Il limite da dichiarare

Il TBT di laboratorio non è l'INP: somma il tempo bloccato durante il caricamento e non dice nulla sulla latenza di un tocco reale. Un sito con TBT alto può avere INP buono se nessuno interagisce mentre carica; per l'INP reale contano i dati di campo, come quelli che il beacon in client/src/rum.ts raccoglie.

## Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, 1.556 blocchi e il record testimonials with marquee: un marquee che anima sempre tiene occupato il main thread anche quando è fuori schermo. Per la metrica leggi INP: cosa misura, per il quadro completo cosa sono i Core Web Vitals, per il confronto misurato librerie React 2026.

## FAQ

### Quanto deve durare un task per essere un long task?

Oltre 50 ms di main thread occupato. La soglia è una convenzione degli strumenti di misura, non un limite del browser.

### TBT e INP sono la stessa cosa?

No. Il TBT somma il tempo bloccato durante il caricamento in laboratorio, l'INP misura la latenza della risposta a un input reale. Il primo spiega, il secondo decide.

### Un long task da 513 ms quanto alza l'INP?

Alza a circa 513 ms l'attesa di ogni input che arriva durante il blocco. L'INP finale è il 75° percentile delle interazioni, non il valore peggiore.

### Come si spezza un task lungo?

Dividi il lavoro in blocchi sotto i 50 ms e cedi il controllo tra un blocco e l'altro con scheduler.yield(). Rimanda con import() dinamico ciò che non serve al primo paint.

### Perché il mio INP è buono in Lighthouse?

Lighthouse non misura INP, riporta il TBT. La reattività reale si legge con dati di campo o con una traccia delle interazioni.