Come migliorare il punteggio INP di un sito web? La risposta breve è: bisogna ridurre il lavoro del main thread che ritarda il prossimo aggiornamento visivo dopo un clic, un tap o un’interazione da tastiera dell’utente. In pratica, occorre spezzare le attività JavaScript troppo lunghe, eliminare gli script inutili, alleggerire gli event listener, ottimizzare le risorse che bloccano il rendering, tenere sotto controllo il codice di terze parti e misurare tutto con dati reali degli utenti. Un buon punteggio INP è pari o inferiore a 200 ms; tra 200 e 500 ms richiede ottimizzazioni, mentre oltre 500 ms viene considerato scarso.
INP, cioè Interaction to Next Paint, è una delle metriche Core Web Vitals più importanti per SEO e user experience nel 2026. Google non valuta più soltanto quanto velocemente si apre una pagina, ma anche quanto il sito rimane fluido e reattivo dopo il caricamento, quando l’utente prova davvero a usarlo. Un filtro prodotto che si apre in ritardo, un pulsante “Aggiungi al carrello” che sembra bloccato, un menu mobile che risponde dopo mezzo secondo o un campo form che scatta mentre si digita sono segnali tipici di problemi INP.
In questa guida vedremo come misurare l’INP, come individuare i colli di bottiglia tecnici che peggiorano il punteggio e quali interventi concreti può applicare uno sviluppatore, un proprietario di sito o un amministratore WordPress. Parleremo anche dell’impatto indiretto di hosting, CDN e connessioni sicure sulle performance, con esempi pratici. Se vuoi partire da un’infrastruttura orientata alla velocità, puoi valutare Pacchetti di web hosting e, per progetti basati su WordPress, le soluzioni Hosting WordPress.
Che cos’è l’INP e perché è importante?
L’INP misura la reattività complessiva delle interazioni utente su una pagina. L’utente clicca un pulsante, cambia tab, apre un menu, scrive in un campo form o tocca un elemento da smartphone. Il browser deve elaborare l’interazione, eseguire JavaScript, calcolare stili e layout e infine mostrare sullo schermo un nuovo stato visivo. Il tempo che passa tra l’interazione e questo aggiornamento visibile è ciò che viene valutato dalla metrica INP.
Negli anni precedenti era molto citato il First Input Delay, cioè FID; tuttavia FID si concentrava solo sul ritardo della prima interazione. INP, invece, osserva in modo più completo le interazioni durante l’intero ciclo di vita della pagina. Per questo rappresenta meglio l’esperienza reale su e-commerce, blog, pannelli SaaS, siti aziendali, aree riservate e piattaforme con funzionalità interattive.
Le soglie consigliate da Google sono le seguenti:
| Valore INP | Stato | Significato | Priorità |
|---|---|---|---|
| 0-200 ms | Buono | Le interazioni risultano fluide per l’utente | Mantenimento e monitoraggio |
| 200-500 ms | Da migliorare | Alcuni clic e tap vengono percepiti con ritardo | Media-alta |
| 500 ms e oltre | Scarso | Il sito sembra bloccarsi o rispondere lentamente | Urgente |
L’INP non è importante solo per la SEO, ma anche per il tasso di conversione. Per esempio, su una pagina categoria mobile in cui il pulsante dei filtri si apre dopo 700 ms, l’utente può pensare che il comando non abbia funzionato, premere più volte lo stesso pulsante o abbandonare la pagina. Al contrario, interfacce che rispondono in 150-180 ms trasmettono una sensazione di affidabilità, rapidità e professionalità.
Come misurare il punteggio INP?
Prima di ottimizzare l’INP è necessario misurarlo nel modo corretto. Gli strumenti di laboratorio sono utili per individuare possibili problemi, ma i dati reali degli utenti riflettono dispositivi, connessioni, browser e condizioni d’uso del mondo reale. L’approccio migliore consiste quindi nell’unire entrambe le fonti: test controllati e dati raccolti sul campo.
1. Fai un controllo rapido con PageSpeed Insights
PageSpeed Insights mostra il valore INP reale quando sono disponibili dati del Chrome User Experience Report. Analizza separatamente risultati mobile e desktop. Dai priorità soprattutto al mobile: sugli smartphone meno potenti il main thread si satura molto più facilmente. Se l’INP della pagina supera i 200 ms, annota le opportunità e le diagnosi indicate nello strumento, perché spesso suggeriscono script pesanti, attività lunghe o risorse che rallentano l’interazione.
2. Monitora il report Core Web Vitals in Search Console
Il report Core Web Vitals di Google Search Console elenca i problemi raggruppandoli per insiemi di URL. Questo è utile perché non ti limita alla singola pagina, ma ti permette di capire se un intero template è problematico. Se, per esempio, tutte le schede prodotto hanno un INP scarso, la causa potrebbe essere il tema, lo script del carrello, un plugin recensioni o il codice che gestisce le varianti prodotto.
3. Usa il pannello Performance di Chrome DevTools
Il pannello Performance di Chrome DevTools mostra quali funzioni JavaScript vengono eseguite al momento del clic e quali attività superano i 50 ms, diventando long task. Registra, per esempio, l’apertura di un menu e osserva i blocchi viola, gialli e verdi sul main thread. Esecuzioni JavaScript prolungate, ricalcoli di stile ripetuti e operazioni di layout pesanti sono segnali critici per l’INP.
4. Implementa il monitoraggio degli utenti reali
Nei progetti con traffico significativo è molto utile usare una soluzione RUM, cioè Real User Monitoring. Con la libreria Web Vitals puoi raccogliere dati INP e analizzarli per URL, tipo di dispositivo, browser, Paese e target dell’interazione. I dati potrebbero rivelare, per esempio, che solo sugli utenti Android il clic sul menu mobile arriva a 620 ms. Questa informazione permette di fare interventi chirurgici, invece di ottimizzazioni generiche e meno efficaci.
Le cause più comuni di un cattivo punteggio INP
La maggior parte dei problemi INP non dipende direttamente dalla risposta del server, ma dal fatto che il browser deve svolgere troppo lavoro proprio nel momento in cui l’utente interagisce. Detto questo, infrastruttura, consegna dei file, cache e dipendenze di terze parti possono aumentare indirettamente il carico e peggiorare l’esperienza.
File JavaScript troppo pesanti
Nei siti moderni tema, slider, live chat, pubblicità, analytics, test A/B, mappe e componenti social caricano spesso molti file JavaScript. Questi file non vengono soltanto scaricati: il browser deve analizzarli, compilarli ed eseguirli. Se questo processo occupa il main thread, il sito risponderà in ritardo ai clic e ai tap dell’utente.
Attività lunghe
Le operazioni sul main thread che durano più di 50 ms vengono considerate long task. Una singola attività da 300 ms può bloccare l’elaborazione del clic dell’utente. Per esempio, uno script che al clic su un filtro ricalcola lato client tutti i 1000 prodotti di una categoria può facilmente portare l’INP oltre 500 ms.
DOM complesso e operazioni di layout costose
Un numero eccessivo di nodi HTML, componenti molto annidati, cambi di stile frequenti e il cosiddetto layout thrashing, cioè l’alternanza ripetuta di letture e scritture sul layout, compromettono l’INP. Mega menu, pagine elenco prodotto e single page application lunghe sono particolarmente esposti a questo rischio.
Script di terze parti
Reti pubblicitarie, pixel di tracciamento, strumenti di heatmap, widget di assistenza live ed embed social eseguono codice che non controlli direttamente. Se questo codice usa il main thread durante un’interazione, anche un’interfaccia sviluppata bene può sembrare lenta e poco reattiva.
Plugin e temi WordPress sovraccarichi
Nei siti WordPress ogni plugin può aggiungere i propri file CSS e JS. Se lo script di un plugin per moduli di contatto, necessario solo nella pagina contatti, viene caricato su tutto il sito, genera peso inutile. Allo stesso modo page builder, slider e plugin pop-up possono peggiorare sensibilmente l’INP, soprattutto su mobile.
Come migliorare il punteggio INP? Piano operativo passo passo
La risposta pratica alla domanda “come migliorare il punteggio INP” è: misura, isola, riduci, suddividi e misura di nuovo. I passaggi seguenti seguono l’ordine di priorità che i team tecnici applicano nei progetti reali, dove ogni intervento deve produrre un beneficio verificabile.
1. Trova l’interazione più problematica
Per prima cosa identifica quale interazione genera un INP scarso. È il menu mobile, il pulsante aggiungi al carrello, il pannello filtri, la barra di ricerca o l’invio del form? Mentre registri con DevTools Performance, ripeti più volte l’azione interessata. All’interno della registrazione, nella sezione Event Timing o Interaction, osserva il target del clic e la durata complessiva.
Esempio concreto: in un e-commerce, il pulsante filtro di una categoria generava un INP di 740 ms. L’analisi ha mostrato che al clic venivano renderizzate di nuovo tutte le card prodotto e aggiornati contemporaneamente 1800 nodi DOM. Spostando il pannello filtri in un componente separato e rimandando l’aggiornamento della lista, l’INP è sceso a circa 190 ms.
2. Riduci la dimensione dei bundle JavaScript
Rimuovere codice inutilizzato è uno degli interventi più efficaci per migliorare l’INP. Usa un bundle analyzer per capire quali librerie aumentano il peso dei file. Invece di importare un’intera libreria, carica solo i moduli necessari. Per esempio, al posto di una libreria date molto pesante, puoi valutare alternative più leggere o l’API nativa Intl del browser.
- Disattiva le funzionalità del tema che non usi.
- Non caricare slider, gallerie e animazioni nelle pagine in cui non servono.
- Usa strumenti di build moderni che supportano il tree shaking.
- Non inviare al frontend codice pensato solo per il pannello di amministrazione.
- Servi i vecchi polyfill soltanto ai browser che ne hanno davvero bisogno.
3. Spezza le attività lunghe in blocchi più piccoli
Per poter rispondere alle interazioni dell’utente, il main thread del browser deve liberarsi con una certa regolarità. Invece di eseguire un grande calcolo in un’unica volta, suddividilo in parti più piccole. setTimeout, scheduler.postTask, requestIdleCallback o le funzionalità di scheduling dei framework possono aiutare. L’obiettivo è sostituire un’unica attività da 300 ms con operazioni più brevi da 20-40 ms.
Se, per esempio, devi filtrare e ridisegnare una tabella da 5000 righe, aggiorna prima le 50 righe visibili all’utente e gestisci il resto con virtualizzazione o attività in background. Così il risultato del clic appare subito, mentre il lavoro rimanente non blocca l’esperienza.
4. Semplifica gli event listener
Eseguire funzioni pesanti a ogni click, input, scroll o keydown danneggia l’INP. È particolarmente sbagliato inviare una richiesta API o ricalcolare un’intera lista a ogni tasto premuto in un campo di ricerca. Usa debounce e throttle per ridurre la frequenza delle operazioni.
- Applica un debounce di circa 300 ms nella barra di ricerca.
- Per gli eventi di scroll preferisci passive listener.
- Usa event delegation invece di aggiungere listener a centinaia di elementi singoli.
- Dopo il clic, mostra prima un feedback visivo e avvia il lavoro pesante subito dopo.
5. Dai all’utente un feedback visivo immediato
Poiché l’INP è legato al next paint, è importante produrre anche una piccola variazione visiva subito dopo l’interazione. Lo stato attivo di un pulsante, un indicatore di caricamento, uno skeleton o il primo frame di apertura di un pannello fanno capire all’utente che il sistema ha recepito il comando. Invece di aspettare una risposta API pesante e aggiornare tutta l’interfaccia in una volta, progetta feedback rapido e aggiornamenti progressivi.
6. Riduci il costo di rendering e layout
Non solo JavaScript: anche CSS e layout incidono sull’INP. Dopo un clic, modificare dimensioni, posizione e stile di molti elementi può diventare costoso. Nelle animazioni CSS, usare transform e opacity al posto di width, height, top e left è spesso molto più performante. Per liste lunghe, applica la virtualizzazione: non mantenere nel DOM centinaia di card che l’utente non vede.
Evita il layout thrashing. In altre parole, non creare cicli in cui prima leggi la larghezza di un elemento, poi scrivi uno stile, poi leggi di nuovo e così via. Raggruppa le letture e le scritture. Questa semplice disciplina può far risparmiare decine di millisecondi nelle pagine complesse.
7. Controlla il codice di terze parti
Per ogni script esterno chiediti: questo codice contribuisce davvero alla conversione o all’esperienza dell’utente? Se il contributo è basso, rimuovilo, posticipalo o caricalo solo nelle pagine in cui serve. Mantenere la live chat nella pagina di checkout può avere senso; eseguirla al primo caricamento di ogni articolo del blog, invece, potrebbe essere superfluo. Quando possibile, carica script pubblicitari e analytics con defer o async e impedisci che si mettano davanti alle interazioni critiche.
8. Usa Web Worker per spostare i calcoli pesanti
Se filtri prodotto, elaborazioni di grandi JSON, crittografia, trasformazioni dati o calcoli complessi bloccano il main thread, valuta l’uso di Web Worker. Il Worker esegue questi lavori in background, mentre il main thread può continuare a rispondere agli input dell’utente. Non tutto deve essere spostato in un Worker, ma per operazioni CPU intensive superiori a 100 ms il beneficio può essere notevole.
9. Ottimizza il costo di framework e hydration
In stack come React, Vue, Angular, Next.js o Nuxt, il costo di hydration dopo il primo caricamento può incidere sull’INP. Invece di rendere interattiva tutta la pagina, valuta approcci come island architecture, partial hydration o server components. Lascia statici i contenuti che non richiedono interazione. Componenti come modali, area commenti o blocchi di raccomandazioni possono essere caricati solo quando l’utente ne ha bisogno.
10. Riduci il peso dei plugin nei siti WordPress
Se usi WordPress, crea un inventario dei plugin in ottica INP. Elimina i plugin duplicati che fanno la stessa cosa. Controlla se plugin di form, gallerie, slider e pop-up caricano file su tutte le pagine. Con plugin di performance che supportano l’asset unload puoi disattivare CSS e JS inutili a livello di singola pagina.
Esempio pratico: in un sito WordPress aziendale, l’INP della home page su mobile era di 560 ms. Rimuovendo il plugin slider e ricostruendo l’hero con HTML/CSS leggero, ritardando lo script pop-up di 5 secondi e caricando il JS del form contatti solo nella pagina contatti, l’INP mobile è sceso a 210 ms; con ulteriori piccoli aggiustamenti è arrivato a 175 ms.
In che modo hosting e infrastruttura influenzano l’INP?
L’INP è principalmente una metrica di reattività lato client: il fattore decisivo è il carico sul main thread nel browser. Tuttavia l’infrastruttura hosting non è affatto irrilevante. Una risposta server rapida, una cache configurata bene, una versione PHP moderna, supporto HTTP/2 o HTTP/3, CDN e compressione consentono di consegnare i file in modo più veloce e ordinato. Questo aiuta soprattutto durante il caricamento iniziale, quando il browser deve preparare le risorse prima di rendere la pagina pienamente interattiva.
Un’infrastruttura scadente può causare TTFB elevato, risorse che arrivano tardi, cache incoerente e carico server instabile, peggiorando l’esperienza complessiva. Un sito WordPress senza cache che esegue pesanti operazioni PHP e database a ogni richiesta diventerà interattivo più tardi. Per questo il lavoro sull’INP non va considerato completamente separato dall’ottimizzazione di LCP e TTFB.
- Usa cache lato server.
- Scegli PHP 8.x e versioni aggiornate del database.
- Distribuisci i file statici tramite CDN.
- Attiva la compressione Brotli o Gzip.
- Mantieni aggiornata la configurazione SSL/TLS; per una connessione sicura consulta la pagina certificato SSL.
- Se stai lanciando un nuovo progetto o sito di brand, usa lo strumento Verifica del dominio per scegliere il dominio giusto.
Tabella delle priorità per ottimizzare l’INP
La tabella seguente riassume quali interventi conviene applicare e in quali situazioni su un sito web tipico. Ogni progetto può reagire in modo diverso: dopo ogni modifica misura di nuovo con PageSpeed Insights, Search Console e dati reali degli utenti.
| Problema | Sintomo | Soluzione | Impatto atteso |
|---|---|---|---|
| JavaScript pesante | I clic rispondono in ritardo | Code splitting, rimozione del codice inutilizzato, defer | Alto |
| Attività lunghe | In DevTools compaiono blocchi oltre 50 ms | Suddivisione delle attività, API di scheduling | Alto |
| Script di terze parti | Analytics, pubblicità o chat occupano il main thread | Ritardo, caricamento per pagina, rimozione | Medio-alto |
| DOM complesso | Menu, filtri o aggiornamenti liste sono lenti | Semplificazione del DOM, virtualizzazione liste | Medio-alto |
| Troppi plugin WordPress | CSS/JS inutili vengono caricati su ogni pagina | Pulizia plugin, asset unload | Medio |
| Infrastruttura debole | Le risorse arrivano tardi, la cache è instabile | Hosting di qualità, CDN, cache | Indiretto ma importante |
Checklist tecnica per sviluppatori
Il miglioramento dell’INP dovrebbe diventare una checklist condivisa nel team. Altrimenti, un intervento di velocizzazione una tantum può essere annullato dopo pochi mesi da nuovi plugin, codici campagna, widget marketing o modifiche di design.
- Per ogni template critico va definito un obiettivo INP mobile sotto 200 ms.
- Nei processi di pull request va controllato l’aumento della dimensione dei bundle.
- Prima di aggiungere un nuovo script di terze parti bisogna testarne l’impatto sulle performance.
- Con DevTools Performance vanno misurate almeno le interazioni di menu mobile, ricerca, form e acquisto.
- Le attività lunghe dovrebbero essere portate sotto 50 ms; se non è possibile, vanno suddivise.
- Nelle animazioni vanno preferiti transform e opacity.
- Per liste grandi bisogna usare pagination, infinite scroll o virtualization.
- I dati RUM devono essere riportati mensilmente e gli avvisi di Search Console vanno monitorati.
Errori frequenti nell’ottimizzazione INP
Installare solo un plugin di cache
La cache è importante, ma non è la soluzione universale a un cattivo INP. Può consegnare la pagina più velocemente, ma non corregge automaticamente JavaScript pesante eseguito dopo il clic dell’utente. Per questo la cache va sempre affiancata a un lavoro reale sul codice e sugli asset.
Guardare il punteggio di laboratorio e dimenticare gli utenti reali
I test Lighthouse sono utili, ma da soli non bastano. Gli utenti reali navigano con dispositivi, reti e browser diversi. In particolare, gli smartphone Android di fascia bassa fanno emergere problemi INP che spesso non si vedono nei test desktop.
Rimandare tutti gli script a caso
Le tecniche defer e delay vanno applicate con attenzione. Una configurazione errata può rompere menu, carrello, form o flusso di pagamento. Gli script delle interazioni critiche vanno protetti, mentre codice superfluo e di terze parti può essere posticipato in modo controllato.
Concentrarsi sulle immagini e trascurare l’interazione
Comprimere le immagini è fondamentale per LCP, ma non risolve sempre l’INP. Se il problema è il codice che gira dopo un clic, l’ottimizzazione visuale da sola non sarà sufficiente. I Core Web Vitals vanno affrontati in modo integrato.
Strategia SEO 2026 orientata all’INP
Nella SEO del 2026, performance tecnica, qualità dei contenuti e infrastruttura affidabile vanno considerate insieme. Le AI Overviews di Google e le esperienze di ricerca evolute tendono a valorizzare le pagine che offrono agli utenti risposte rapide, complete e soddisfacenti. Per questo l’ottimizzazione INP non è solo un compito da sviluppatori, ma una responsabilità condivisa tra team SEO, UX, contenuti e infrastruttura.
In un articolo del blog, l’indice dei contenuti, i filtri categoria o il form commenti devono funzionare rapidamente; in un e-commerce, la selezione della taglia, il cambio variante e l’aggiunta al carrello devono dare una risposta immediata. Nei siti aziendali, il modulo preventivo, il menu mobile e i pulsanti di contatto non devono avere ritardi percepibili. Se l’utente sente il sito veloce, rimane più a lungo, visita più pagine e aumenta la probabilità di conversione.
Con Hostragons puoi costruire una base solida per la SEO tecnica scegliendo hosting orientato alle performance, tecnologie server aggiornate e un’infrastruttura sicura. Gestire dominio, hosting e sicurezza da un unico punto riduce il carico operativo e permette al tuo team di concentrarsi di più su user experience e qualità dei contenuti. Per soluzioni correlate puoi consultare Hosting Aziendale, server VPS e certificato SSL.
Conclusione
Migliorare il punteggio INP significa, in sostanza, evitare che il browser debba svolgere lavoro inutile proprio nel momento in cui l’utente interagisce. Parti dai dati reali per individuare le interazioni più lente; poi riduci il peso JavaScript, spezza le attività lunghe, semplifica gli event listener, abbassa il costo di rendering e tieni sotto controllo il codice di terze parti. Hosting, cache, CDN e configurazioni di sicurezza aggiornate completano il quadro fornendo una base tecnica più stabile.
Se vuoi rendere il tuo sito più veloce, affidabile e piacevole da usare, inizia da una misurazione semplice: controlla l’INP mobile della tua pagina più importante e applica i primi tre passaggi di questa guida. Sul fronte infrastrutturale, puoi valutare le soluzioni Hostragons e confrontare con calma il piano hosting più adatto alle tue esigenze.
Domande frequenti
Quale dovrebbe essere un buon punteggio INP?
Un buon punteggio INP è pari o inferiore a 200 ms. Tra 200 e 500 ms indica un’area da migliorare, mentre oltre 500 ms segnala un’esperienza utente scarsa. I dati mobile degli utenti reali dovrebbero avere priorità nell’analisi.
Qual è la differenza tra INP e FID?
FID misura solo il ritardo della prima interazione dell’utente, mentre INP valuta la qualità della risposta delle interazioni durante l’intero ciclo di vita della pagina. Per questo INP rappresenta in modo più completo l’esperienza reale.
Perché l’INP è spesso scarso nei siti WordPress?
Di solito dipende da troppi plugin, temi pesanti, CSS/JS inutili caricati su tutte le pagine, slider, script pop-up e codice di terze parti. Pulizia dei plugin, disattivazione degli asset pagina per pagina e uso di un tema leggero possono portare miglioramenti importanti.
Cambiare hosting migliora il punteggio INP?
L’hosting da solo non corregge JavaScript pesante o attività lunghe, ma un server veloce, buona cache, CDN, PHP aggiornato e consegna stabile delle risorse supportano l’ottimizzazione INP. L’effetto è quindi indiretto, ma può essere molto rilevante soprattutto nei siti WordPress.
Quanto tempo serve per vedere i risultati dell’ottimizzazione INP?
Dopo correzioni al codice e ai plugin, i risultati possono comparire subito nei test di laboratorio. Nei dati reali di Search Console e Chrome, invece, l’effetto richiede spesso alcune settimane, perché è necessario raccogliere un volume sufficiente di dati utente.