{"id":19972,"date":"2022-07-25T09:53:18","date_gmt":"2022-07-25T07:53:18","guid":{"rendered":"https:\/\/www.serverplan.com\/blog\/?p=19972"},"modified":"2024-03-14T06:38:15","modified_gmt":"2024-03-14T05:38:15","slug":"interaction-to-next-paint","status":"publish","type":"post","link":"https:\/\/www.serverplan.com\/blog\/interaction-to-next-paint\/","title":{"rendered":"Cos’\u00e8 Interaction To Next Paint (INP) e perch\u00e9 sostituisce il First Input Delay?"},"content":{"rendered":"\n

Chi si occupa di ottimizzazione in termini di Core Web Vitals<\/a>, gli elementi decisivi di un sito web per quanto riguarda l’esperienza utente sulla pagina web, sa bene che le novit\u00e0 sono sempre dietro l’angolo. Come, ad esempio, l’Interaction To Next Paint (INP)<\/strong>. Ovvero una metrica centrale che ti consente di valuta la reattivit\u00e0 della risorsa, individuando la latenza delle interazioni durante l\u2019intero ciclo di vita della pagina web. <\/p>\n\n\n\n

\"Cos'\u00e8<\/figure>\n\n\n\n

Quindi possiamo dire questo: avere un INP basso vuol dire garantire una buona capacit\u00e0 di interazione<\/strong> della risorsa nella sua interezza, non solo in un’area specifica come potrebbe essere l’above the fold. Cos\u00ec come il cumulative layout shift<\/a>, anche l’INP riguarda l’intera esperienza.<\/p>\n\n\n\n

Cos’\u00e8 Interaction To Next Paint (INP)?<\/h2>\n\n\n\n

\n\n\n\n

Si tratta di una metrica inserita nei Core Web Vitals<\/strong> , e che sostituisce il First Input Delay (FID) come metrica, che misura l’interattivit\u00e0 dell’intera risorsa presa in esame. Quindi possiamo dire che questa metrica osserva la latenza di tutte le interazioni che un utente<\/strong> ha effettuato con la pagina. <\/p>\n\n\n\n

Il risultato sar\u00e0 un valore numerico che riassume la reattivit\u00e0 durante l’intero ciclo di vita della pagina: INP alto significa che non \u00e8 stata in grado di rispondere rapidamente a tutte le richieste in modo costante, continuo. Vale a dire fare clic con il mouse su un qualsiasi elemento della pagina internet, toccare un dispositivo<\/strong> con un touchscreen, premere un tasto su una tastiera fisica o su schermo per interagire.<\/p>\n\n\n\n

INP sostituisce il First Input Delay<\/h2>\n\n\n\n

Lo so cosa stai pensando: qual \u00e8 la differenza con il FID<\/strong>? Non stiamo parlando della stessa cosa? No perch\u00e9 l’INP considera tutte le interazioni della pagina, il First Input Delay<\/a> tiene conto solo della prima. Il FID misura solo il ritardo di input della prima interazione, non considera altro.<\/p>\n\n\n\n

Come il tempo necessario per eseguire gli eventi di una determinata sezione del sito o il ritardo nella presentazione del frame. In sintesi, l’INP \u00e8 una metrica superiore<\/strong> e pi\u00f9 precisa.Probabilmente, anche per questo motivo, nel Core Update di marzo 2024 Google ha deciso di sostituire il First Input Delay con l’Interaction To Next Paint. In questo video puoi avere un’idea di cosa significa bad UX a causa dell’INP.<\/p>\n\n\n\n

La notizia \u00e8 stata comunicata con un post di John Mueller su LinkedIn<\/a>. Dal 12 marzo 2024, il FID scomparir\u00e0 e l\u2019INP prender\u00e0 il suo posto come metrica Core Web Vitals. I rapporti per iniziare a misurare i nuovi punteggi<\/strong> dell’Interaction to the Next Paint sono disponibili sulle diverse piattaforme.<\/p>\n\n\n\n

Da leggere: come registrare il Google Page Experience su desktop<\/a><\/strong><\/p>\n\n\n\n

I concetti di reattivit\u00e0 e latenza<\/h2>\n\n\n\n

Aspetta, abbiamo parlato di reattivit\u00e0 e latenza: cosa significano questi concetti per l’ottimizzazione dei Core Web Vitas? Per capire l’Interaction To Next Paint (INP) <\/strong>bisogna focalizzarsi anche su alcuni aspetti di approfondimento correlati al tema principale. La latenza, ad esempio, \u00e8 costituita dalla durata dal momento in cui l’utente inizia l’interazione a quello in cui viene presentato il frame successivo <\/strong>con un feedback visivo.<\/p>\n\n\n

\n
\"I
Come funziona l’Interaction To Next Paint.<\/figcaption><\/figure>\n<\/div>\n\n\n

Ovvero una schermata o un messaggio che appare sulla pagina internet. Mentre con reattivit\u00e0 intendiamo i suddetti feedback presentati dal browser nel momento in cui l’utente effettua un’azione. Ad esempio, questo avviene quando si aggiunge a un bene al carrello<\/strong> della spesa online.<\/p>\n\n\n\n

Qual \u00e8 un buon Interaction To Next Paint<\/h2>\n\n\n\n

Chiaramente per riuscire a valutare al meglio questa metrica \u00e8 utile avere un parametro di riferimento. Qual \u00e8 un buon valore di Interaction To Next Paint? Tutto molto semplice secondo la risorsa ufficiale<\/a> di Google: un INP inferiore o pari a 200 millisecondi significa che la tua pagina ha una buona reattivit\u00e0, superiore a 200 e inferiore o pari a 500 significa che devi intervenire. Un INP superiore a 500 millisecondi <\/strong>vuol dire che hai dei problemi. <\/p>\n\n\n

\n
\"Qual<\/a><\/figure>\n<\/div>\n\n\n

Per registrare INP del tuo sito web o quello dei competitor puoi utilizzare un tool <\/strong>che conosci: il Pagespeed Insight<\/a>. Anche Lighthouse<\/a> e Estensione Web Vitals per Chrome consentono di ottenere il risultato. Google ha aggiunto i nuovi report INP a Search Console<\/a> a met\u00e0 dello scorso anno.<\/p>\n\n\n\n

Da leggere: cos’\u00e8 il Largest Contentful Paint<\/a><\/strong><\/p>\n\n\n\n

Come migliorare questo parametro?<\/h2>\n\n\n\n

Una delle correlazioni chiave \u00e8 con il Javascript. Per ottimizzare il parametro in questione conviene individuare e ridurre JS di terze parti<\/strong>, posticipare il codice che non deve essere caricato in anticipo, ridurre il codice non necessario, dare priorit\u00e0 agli elementi e alle funzionalit\u00e0 con cui molto probabilmente i tuoi utenti vorranno interagire con immediatamente. A tutto questo aggiungiamo sempre un buon hosting performante.<\/p>\n\n\n\n

Un hosting che unisce alla stabilit\u00e0 dei dischi SDD<\/strong> anche la velocit\u00e0 che puoi ottenere con specifiche tecniche particolari come la presenza di HTTP\/2<\/a> e HTTP Keep Alive<\/a>. E con la presenza di WordPress gestito e preinstallato, tutto \u00e8 gi\u00e0 pronto e ottimizzato. Basta un click per andare online.<\/p>\n\n\n\n

<\/div>

Hosting gestito: veloce, affidabile, performante<\/p>