Come migliorare l'interazione con Next Paint (INP)

L'interazione con Next Paint (INP) non è più sperimentale.

A partire da marzo 2024, Google si impegna a promuovere INP come nuova metrica Core Web Vital per la reattività, sostituendo First Input Delay.

E mentre potresti pensare che la gestione del punteggio INP del tuo sito sia un'attività che puoi rimandare, vorremmo dissentire.

Google ha già iniziato a segnalare problemi di INP in Search Console e a inviare e-mail a siti Web che non raggiungono la soglia per una buona reattività:

In altre parole, il momento perfetto per iniziare a ottimizzare il tuo sito per l'imminente metrica di reattività è adesso. E nelle righe seguenti imparerai esattamente come.

• Panoramica sull'interazione con Next Paint
• Comprensione della latenza di interazione
• Perché il tuo sito fallisce INP
• Come identificare le interazioni lente
• Come ottimizzare INP

Continuare a leggere.

Interazione con Next Paint: panoramica

Prima di approfondire le varie tecniche di ottimizzazione, ecco un breve riepilogo di ciò che misura INP.

INP valuta la reattività complessiva di una pagina alle interazioni dell'utente osservando la latenza di tutte le interazioni qualificanti durante la visita di un utente a una pagina. Il valore INP finale è l'interazione più lunga osservata.

Le interazioni che giocano un ruolo nei calcoli di INP sono:

• Cliccando con il mouse;
• Toccando un dispositivo con touchscreen;
• Premendo un tasto su una tastiera fisica o digitale.

Analogamente agli altri Core Web Vitals, il tuo punteggio INP può trovarsi in una delle tre soglie:

• Buono : 0-200 ms
• Ha bisogno di miglioramenti : 200-500 ms
• Scarso : >500ms

Per garantire il raggiungimento di questo obiettivo per la maggior parte dei tuoi utenti, si consiglia di valutare il 75° percentile dei caricamenti delle pagine, segmentato tra dispositivi mobili e desktop.

Se vuoi saperne di più o rispolverare le tue conoscenze sull'INP, leggi il nostro articolo sulla prossima metrica di reattività.

Comprensione della latenza di interazione

Se vuoi che il tuo punteggio INP passi da scarso a buono, devi comprendere la latenza dell'interazione.

Quindi cos'è esattamente la latenza di interazione?

La latenza dell'interazione si riferisce al ritardo o all'intervallo sperimentato tra l'input o l'azione di un utente e la risposta o l'output risultante sullo schermo. È un fattore cruciale nel determinare la reattività del tuo sito e le prestazioni percepite.

Tre componenti principali contribuiscono alla latenza dell'interazione:

Ritardo di ingresso

Il ritardo di input si riferisce al tempo che intercorre tra il momento in cui un utente inizia a interagire con la pagina e l'inizio dell'esecuzione delle azioni associate o dei callback degli eventi. Comprende i ritardi fisici o tecnici causati dal dispositivo di input (ad es. tastiera, mouse, touchscreen) ei meccanismi di elaborazione dell'input del sistema.

tempo di elaborazione

Una volta ricevuto l'input dell'utente, il sistema deve elaborarlo per determinare la risposta o l'azione appropriata. Il tempo di elaborazione si riferisce alla durata necessaria al sistema per analizzare e interpretare i dati di input, eseguire i calcoli o le operazioni necessarie e generare l'output o la risposta.

Ritardo di presentazione

Dopo che il sistema ha generato l'output o la risposta, in genere c'è un ritardo prima che venga presentato all'utente. Il ritardo di presentazione comprende il tempo impiegato dal sistema per aggiornare il display, eseguire il rendering della grafica o delle interfacce utente e consegnare l'output all'interfaccia utente o al dispositivo di output.

Se hai bisogno di maggiori informazioni, puoi controllare la presentazione di Jeremy Wagner a JSConf Korea 2022:

La comprensione e l'ottimizzazione della latenza dell'interazione possono fornire un'esperienza utente senza interruzioni e correggere i punteggi INP.

Ma prima, diamo un'occhiata ai principali colpevoli dell'elevata latenza di interazione e dei punteggi INP negativi...

Problema di Core Web Vitals INP rilevato sul tuo sito web: cosa potrebbe causarlo?

Sebbene INP sia etichettato come in sospeso,ciò non significa che dovresti entrare nel processo di ottimizzazione senza una strategia.

La prima cosa che devi fare è imparare quali sono i principali colpevoli di INP, in modo da poterli gestire in modo efficace.

Ecco i motivi principali del messaggio di errore"Problema INP: più lungo di 200 ms":

Compiti lunghi

Tutto ciò che fa un browser è considerato un compito. Ciò include il rendering, l'analisi dell'HTML, l'esecuzione di JavaScript e tutto ciò su cui potresti avere o meno il controllo.

Il thread principale è dove il browser esegue la maggior parte del lavoro necessario per visualizzare una pagina. E mentre potrebbero esserci dozzine di attività che devono essere eseguite,il thread principale può elaborare solo un'attività alla volta.

Ma questa è solo metà del problema.

L'altra metà è chese un'attività richiede più di 50 millisecondi per essere eseguita, viene classificata comeattività lunga. 

Considerando che il thread principale può gestire un'attività alla volta, più lunga è l'attività, più a lungo il browser sarà bloccato nell'elaborarla.

In altre parole, se l'utente sta tentando di interagire con la pagina durante l'esecuzione di un'attività lunga, il browser subirà un ritardo nel soddisfare la richiesta.

Il risultato è: latenza di interazione e punteggio INP inferiore.

DOM di grandi dimensioni

Un altro motivo per il fallimento dell'INP è avere una dimensione DOM di grandi dimensioni.

Il Document Object Model (DOM) è una parte inseparabile di ogni pagina web. Il DOM è una rappresentazione di un documento HTML strutturato come un albero. Ogni ramo dell'albero termina in un nodo e ogni nodo contiene oggetti. I nodi possono rappresentare diverse parti del documento, come elementi, stringhe di testo o commenti.

Il DOM in sé non è un problema, ma le sue dimensioni potrebbero esserlo. Una dimensione DOM di grandi dimensioni influisce sulla capacità di un browser di eseguire il rendering di una pagina in modo rapido ed efficiente.

Più grande è il DOM, maggiore è l'utilizzo di risorse per visualizzare inizialmente la pagina e apportare i successivi aggiornamenti durante il ciclo di vita della pagina.

In poche parole:

Se desideri che una pagina risponda rapidamente alle interazioni dell'utente, assicurati che il tuo DOM includa solo gli elementi necessari.

Ti starai chiedendo cosa significhi "necessario". Secondo Lighthouse, la dimensione del DOM di una pagina è eccessiva quandosupera i 1.400 nodi .

Quindi assicurati di rimanere entro questo limite. In caso contrario, potresti visualizzare il seguente errore nel rapporto PageSpeed ​​Insights:

Rendering lato client di HTML

Per capire perché il rendering del sito client potrebbe causare punteggi INP scarsi, dobbiamo spiegare in che modo differisce dal rendering dell'HTML lato server.

Il tradizionale caricamento della pagina prevede che il browser riceva HTML dal server ad ogni navigazione. Quello che succede in background quando una persona decide di caricare una pagina è:

1. Il browser invia una richiesta di navigazione per l'URL fornito.
2. Il server risponde con HTML in blocchi.

La chiave qui è "in pezzi".

Quando il browser riceve il primo blocco di codice HTML, può iniziare ad analizzarlo. Ma come sappiamo, l'analisi dell'HTML è un'attività gestita dal thread principale.

Tuttavia, dopo l'elaborazione di ciascun blocco, il browser interrompe l'analisi e consente l'esecuzione di altre attività. Ciò impedisce attività lunghe che potrebbero rallentare il browser.

Invece, può avviare il rendering delle parti della pagina che sono già state analizzate, in modo che l'utente veda prima una pagina parzialmente caricata. Può anche gestire qualsiasi interazione dell'utente che si verifica durante il caricamento iniziale della pagina.

In altre parole:

Questo approccio si traduce in un migliore punteggio Interaction to Next Paint (INP) per la pagina.

Al contrario, se il tuo sito web utilizza il pattern SPA (single page application), che crea dinamicamente ampie parti di HTML/DOM sul client con JavaScript, puoi aspettarti effetti negativi sul tuo punteggio INP.

Nel rendering lato client, il server invia al client una piccola parte di codice HTML di base. Quindi il client si occupa di compilare il contenuto principale della pagina utilizzando i dati che recupera dal server.

Tutte le navigazioni future sono gestite da JavaScript, recuperando nuovo HTML dal server e aggiornando dinamicamente la pagina senza ricaricarla completamente. Sfortunatamente, quando si tratta di attività JavaScript sul lato client, non vengono automaticamente raggruppate.

Questo può portare a lunghe attività che bloccano il thread principale, influenzando potenzialmente il punteggio Interaction to Next Paint della tua pagina. Pertanto, il rendering lato client può danneggiare il caricamento e l'interattività della tua pagina.

Se hai bisogno di ulteriori informazioni sui pro e contro del rendering lato server rispetto a quello lato client, guarda questo video:

Ora che conosci alcuni dei principali colpevoli, procediamo con la misurazione del tuo punteggio INP e l'identificazione delle interazioni lente.

Come identificare le interazioni lente utilizzando i dati sul campo ed eseguirne il debug in laboratorio

Il prossimo passo nel percorso di ottimizzazione INP è misurare le prestazioni del tuo sito e identificare eventuali interazioni lente.

Simile al First Input Delay, l'INP viene misurato al meglio sul campo, esaminando come gli utenti reali sperimentano il tuo sito web.

Il processo di test ottimale sarebbe simile a questo:

1. Raccogli dati sul campo per INP
2. Identificare le azioni esatte responsabili dell'INP
3. Usa gli strumenti di laboratorio per capire perché queste interazioni sono lente

Abbiamo detto ottimaleperché, in alcuni casi, il tuo sito potrebbe non avere dati sul campo (noti anche come dati RUM (Real User Monitoring)). Tuttavia, questo non significa che dovresti rinunciare a ottimizzare il tuo punteggio INP. Devi adottare un approccio diverso e sfruttare gli strumenti di laboratorio disponibili.

Diamo un'occhiata a entrambi gli scenari e spieghiamo come acquisire la maggior parte dei dati sul campo e di laboratorio.

Campo dati

Idealmente, vorrai disporre di dati sul campo quando inizi a migliorare la reattività del tuo sito. Affidarsi ai dati RUM ti fa risparmiare un sacco di tempo per capire quali interazioni devono essere ottimizzate.

Inoltre, gli strumenti basati su laboratorio possono simulare determinate interazioni ma non possono replicare completamente le esperienze degli utenti del mondo reale.

Quando raccogli i dati del campo INP, ti consigliamo di acquisire quanto segue per dare un contesto al motivo per cui le interazioni sono state lente:

• Il valore INP: la distribuzione di questi valori determinerà se la pagina soddisfa le soglie INP.
• La stringa del selettore dell'elemento responsabile dell'INP della pagina – La sola conoscenza del valore INP di una pagina non è sufficiente.Vuoi sapere quali elementi sono responsabili delle interazioni.
• Lo stato di caricamento della pagina per l'interazione che è l'INP della pagina: capire se si verifica un'interazione durante il caricamento della pagina o successivamente aiuta a determinare se è necessario ottimizzare il thread principale o se l'interazione stessa è lenta, indipendentemente dal caricamento iniziale della pagina.
• L'ora di inizio dell'interazione: assicurarsi di registrare l'ora di inizio dell'interazione in quanto consente di sapere quando si è verificata l'interazione nella sequenza temporale delle prestazioni.
• Il tipo di evento - Conoscere il tipo di evento di interazione - pressione del tasto clic, altri eventi idonei - consente di individuare quale callback dell'evento nell'interazione ha richiesto più tempo per essere eseguito.

Se ti stai chiedendo:

Come faccio a catturare tutte queste cose?

Non preoccuparti. Tutti i dati sono esposti nella libreria JavaScript web-vitals. Puoi controllare la guida passo-passo di Google su come sfruttare la libreria web-vital e persino su come trasmettere i dati INP direttamente a Google Analytics.

Inoltre, anche se stai già raccogliendo dati con un provider RUM di terze parti, valuta la possibilità di confrontarli con i dati di Chrome UX Report (CrUX), poiché esistono differenze nelle metodologie utilizzate.

Dati di laboratorio

I dati sul campo sono la fonte più affidabile per la misurazione. Tuttavia, come abbiamo detto, non è sempre disponibile.

Ma non c'è bisogno di preoccuparsi perché puoi ancora misurare e identificare le interazioni per migliorare con l'aiuto dei dati di laboratorio.

Puoi utilizzare Lighthouse o PageSpeed ​​Insights per eseguire alcuni test delle prestazioni. La metrica da tenere d'occhio è il Total Blocking Time (TBT).

TBT è una metrica che valuta la reattività della pagina durante il caricamento e si correla molto bene con INP. Un punteggio TBT scarso è un segnale che ci sono interazioni che potrebbero essere lente durante il caricamento della pagina.

Ecco come riprodurre l'interazione lenta con gli strumenti di laboratorio:

• Utilizza l'estensione Web Vitals per Chrome

L'estensione Web Vitals per Chrome è uno dei modi più semplici per misurare la latenza di interazione del tuo sito. Ecco cosa devi fare per recuperare informazioni utili:

1. In Chrome, fai clic sull'icona delle estensioni a destra della barra degli indirizzi.
2. Individua l'estensione Web Vitals nel menu a discesa.
3. Fare clic sull'icona a destra per aprire le impostazioni dell'estensione.
4. Fare clic su Opzioni.
5. Abilita la casella di controllo Registrazione console nella schermata risultante, quindi fai clic su Salva.

Infine, apri la console di Chrome DevTools e inizia il test. Riceverai utili log della console che ti forniranno informazioni diagnostiche dettagliate per l'interazione.

• Registra una traccia con Chrome DevTools

Per ottenere ulteriori informazioni sul motivo per cui l'interazione è lenta, puoi utilizzare il profiler delle prestazioni in Chrome DevTools. Basta fare quanto segue:

1. Apri Chrome DevTools e vai al pannello Prestazioni.
2. Fare clic sul pulsante Registra in alto a sinistra del pannello per avviare il tracciamento.
   
   
   
3. Eseguire l'interazione desiderata.
4. Fare di nuovo clic sul pulsante Registra per interrompere il tracciamento.

Per identificare rapidamente i problemi di prestazioni, controlla il riepilogo delle attività nella parte superiore del profiler quando il profilo viene popolato. Cerca le barre rosse nel riepilogo delle attività, che indicano istanze di attività lunghe durante la registrazione. Queste barre rosse ti aiutano a individuare le aree problematiche e a focalizzare la tua indagine.

• Usa i tempi di Lighthouse

La modalità timespan di Lighthouse è l'alternativa meno intimidatoria al profiler delle prestazioni di DevTools. Ecco come usarlo:

1. Vai alla scheda Lighthouse in DevTools.
2. Nella sezione denominata Modalità, seleziona l'opzione Intervallo di tempo.
3. Selezionare il tipo di dispositivo desiderato nella sezione denominata Dispositivo.
4. Assicurati che almeno la casella di controllo denominata Prestazioni sia selezionata sotto l'etichetta Categorie.
5. Fare clic sul pulsante Avvia periodo di tempo.
   
   
   
6. Testare le interazioni desiderate sulla pagina.
7. Fare clic sul pulsante Fine intervallo di tempo e attendere che venga visualizzato il controllo
8. Una volta compilato l'audit, filtralo per INP.

Ti verrà presentato un elenco di audit falliti e superati. Quando fai clic su di essi, verrà visualizzato un menu a discesa e puoi vedere una ripartizione del tempo trascorso durante l'interazione diviso per ritardo di input, tempo di elaborazione e ritardo di presentazione.

Fonte: Google

Ora che sai su cosa lavorare, è il momento di rimboccarsi le maniche e iniziare a ottimizzare.

Come ottimizzare INP

Per garantire al tuo sito unbuonpunteggio INP, devi assicurarti che ogni evento di interazione si svolga il più velocemente possibile. Ecco come ottenerlo:

Ridurre il ritardo di ingresso

1. Evita i timer ricorrenti che sovraccaricano il thread principale

setTimeout e setInterval sono funzioni timer JavaScript comunemente utilizzate che possono contribuire al ritardo di input.

setTimeout pianifica l'esecuzione di una richiamata dopo un tempo specificato e, sebbene possa aiutare a evitare attività lunghe, dipende da quando si verifica il timeout e se coincide con le interazioni dell'utente.

setInterval , d'altra parte, pianifica una richiamata da eseguire ripetutamente a un intervallo specificato. Per questo motivo, è più probabile che interferisca con le interazioni dell'utente. La sua natura ricorrente aumenta il ritardo di input e può influenzare la reattività delle interazioni.

Se hai il controllo sui timer nel tuo codice, valutane la necessità e riduci il più possibile il loro carico di lavoro.

2. Evita compiti lunghi

Come già saprai, le attività lunghe bloccano il thread principale, impedendo al browser di eseguire gli eventi di interazione.

Per migliorare la reattività del tuo sito, è importante ridurre al minimo il carico di lavoro sul thread principale e prendere in considerazione l'interruzione di attività lunghe.

Suddividendo le attività lunghe in blocchi più piccoli, il thread principale ha l'opportunità di gestire altre attività e rispondere più rapidamente alle interazioni dell'utente.

Inoltre, interrompere le attività lunghe aiuta a evitare l'effetto "jank", in cui le animazioni e le transizioni sulla pagina diventano instabili o balbettano a causa del thread principale sopraffatto. Garantendo che ogni attività venga completata entro un lasso di tempo più breve, la pagina può mantenere un'esperienza visiva più fluida per l'utente.

3. Evitare la sovrapposizione delle interazioni

La sovrapposizione delle interazioni significa che dopo che un visitatore ha interagito con un elemento, effettua un'altra interazione con la pagina prima che l'interazione iniziale abbia avuto la possibilità di eseguire il rendering del fotogramma successivo.

Ad esempio, ciò può accadere quando gli utenti digitano nei campi del modulo, portando a numerose interazioni da tastiera in un breve lasso di tempo. Puoi ottimizzare il processo:

• Antirimbalzo degli input per limitare il numero di volte in cui viene eseguito un callback di un evento in un determinato periodo di tempo.
• Utilizzo di AbortController per annullare le richieste di recupero in uscita in modo che il thread principale non venga sovraccaricato di gestire le richiamate di recupero.
  

Ottimizza le richiamate degli eventi (tempo di elaborazione)

1. Prendi in considerazione la rimozione della richiamata non necessaria

La costosa richiamata dell'evento è davvero necessaria? In caso contrario, prendere in considerazione la rimozione completa del codice o, se ciò non è possibile, ritardarne l'esecuzione fino a un momento più opportuno.

2. Rinviare il lavoro non di rendering

Le attività lunghe possono essere interrotte cedendo al thread principale. Quando ti arrendi al thread principale, essenzialmente metti in pausa l'attività corrente e dividi il lavoro rimanente in un'attività separata. Ciò consente al renderer di gestire gli aggiornamenti dell'interfaccia utente che sono stati elaborati in precedenza nel callback dell'evento. Cedendo, consenti al renderer di eseguire le modifiche in sospeso e garantisci un aggiornamento dell'interfaccia utente fluido e tempestivo.

Ridurre al minimo il ritardo di presentazione

1. Riduci le dimensioni del DOM

Una grande dimensione del DOM è un modo infallibile per fallire la valutazione INP. Quindi, per garantire che ciò non accada, è necessario ridurre la dimensione del DOM o, per dirla in un altro modo, è necessario ridurre la profondità del DOM.

Obiettivo per una profondità DOM di non più di 1.400 nodi.

Puoi ottenerlo incorporando le seguenti tecniche:

• Evita plugin e temi mal codificati
• Riduci al minimo i nodi DOM basati su JavaScript
• Allontanati dai page builder che generano HTML gonfio
• Non copiare/incollare il testo nell'editor WYSIWYG
• Suddividi il tuo sito Web di una pagina in più pagine
• Non nascondere gli elementi indesiderati utilizzando display:none
• Evita di usare complicate dichiarazioni CSS e JavaScript
  

2. Evitare un lavoro eccessivo o non necessario nelle richiamate requestAnimationFrame

Il metodo requestAnimationFrame indica al browser che si desidera eseguire un'animazione e richiede che il browser chiami una funzione specificata per aggiornare un'animazione subito prima del successivo ridisegno.

Il callback requestAnimationFrame() fa parte della fase di rendering nel ciclo di eventi e deve terminare prima che il fotogramma successivo possa essere visualizzato. Se stai utilizzando requestAnimationFrame() per attività non correlate alle modifiche dell'interfaccia utente, è essenziale riconoscere che potresti causare un ritardo nel rendering del fotogramma successivo.

Quindi evita di usarli quando non sono necessari.

3. Rinviare le richiamate ResizeObserver

L'interfaccia ResizeObserver riporta le modifiche alle dimensioni del contenuto di un elemento o del riquadro di confine o del riquadro di delimitazione di un SVGElement.

I callback di ResizeObserver vengono eseguiti prima del rendering e possono potenzialmente posticipare la presentazione del frame successivo se comportano attività a uso intensivo di risorse. Analogamente ai callback degli eventi, è consigliabile rinviare qualsiasi logica non necessaria non richiesta per il frame immediatamente successivo.

Migliora l'INP con NitroPack

Sulla base di tutti i test che abbiamo eseguito negli ultimi due mesi e di tutta la documentazione che Google ha pubblicato su INP, potremmo dire che assomiglia molto a Largest Contentful Paint (LCP).

Un Core Web Vital multistrato che ha molte parti mobili.

Pertanto, da quando Google ha annunciato per la prima volta le nuove metriche di reattività, abbiamo iniziato a testare e lavorare su funzionalità che miglioreranno i punteggi INP dei nostri clienti.

E abbiamo visto alcuni risultati promettenti:

Con NitroPack, i nostri clienti sperimentano un miglioramento medio del 36% in INP.

E questo è successo tutto con il pilota automatico. Semplicemente installando NitroPack e grazie a funzionalità di ottimizzazione come:

• Riduci i CSS inutilizzati
• Rinvia il caricamento di JavaScript
• CDN integrato

Puoi anche aumentare i tuoi punteggi INP e Core Web Vitals senza scrivere una sola riga di codice. Installa NitroPack gratuitamente e sperimenta tu stesso i miglioramenti.

Risolvi i tuoi problemi INP e supera automaticamente Core Web Vitals. Ottieni subito NitroPack →