Interazione con la pittura successiva: cos'è e come farlo?

Ti è mai capitato di avere un sito web o un'app lenta e che non risponde?

Forse hai fatto clic su un pulsante e ci è voluto molto tempo prima che qualcosa apparisse sullo schermo. È un’esperienza frustrante, vero?

Questo è esattamente ciò di cui parla "Interaction to Next Paint" (INP).

L'interazione con Next Paint (INP) è una metrica emergente che Google utilizza per valutare la rapidità con cui il tuo sito web risponde agli input degli utenti. Il 12 marzo 2024 è diventato uno dei criteri Core Web Vitals che incidono sul posizionamento di Google.

Perché è importante?

Nell’era digitale di oggi, le persone si aspettano che le cose accadano all’istante. Se un sito web o un'app non risponde rapidamente alle tue azioni, probabilmente diventerai insoddisfatto e abbandonerai l'attività. Nessuno ha tempo per le app lente al giorno d'oggi!

L'ottimizzazione dell'INP è fondamentale per offrire un'esperienza utente fluida e piacevole che mantenga gli utenti coinvolti e soddisfatti. Più basso è l'INP, maggiore sarà la prestazione percepita del tuo sito web o della tua app.

Esaminiamo l'INP in modo approfondito ed esploriamo come misurarlo per migliorare il punteggio esistente.

Cos'è l'interazione con Next Paint (INP)?

Interaction to Next Paint (INP) è una metrica delle prestazioni web che conta il tempo che intercorre tra un'interazione dell'utente (come un clic, un tocco o uno scorrimento) e la volta successiva in cui i pixel vengono dipinti sullo schermo come risultato di tale interazione.

In termini semplici, INP misura la velocità con cui una pagina Web o un'applicazione risponde visibilmente all'interazione dell'utente. Un numero INP più basso indica un'esperienza più reattiva, mentre un valore INP più alto indica un notevole ritardo tra l'azione dell'utente e l'aggiornamento visivo sullo schermo.

Per la maggior parte delle interazioni dell'utente, il valore INP suggerito è inferiore a 200 millisecondi (ms). Un valore INP superiore a 300 ms è considerato scarso e verrà considerato lento dagli utenti

Interazione con Next Paint come elemento vitale del Web principale

L'interazione con Next Paint è stata introdotta come una delle tre metriche Google Core Web Vitals il 12 marzo 2024. Ha sostituito la precedente metrica First Input Delay.

Come metrica Core Web Vitals, una scarsa interazione con Next Paint può influenzare il posizionamento nelle ricerche di Google.

In che modo l'interazione con la vernice successiva differisce dal primo ritardo di input?

INP è la misura successiva del First Input Delay (FID). Entrambi sono parametri di reattività.

FID e INP variano in due modi:

• FID misura solo il primo ritardo di elaborazione, mentre INP misura l'intero periodo di tempo tra l'input dell'utente e l'aggiornamento dell'interfaccia utente.
• Il FID conta semplicemente l'interazione iniziale dell'utente su una pagina, mentre l'INP considera (approssimativamente) la latenza maggiore.

Il primo ritardo di input stima il tempo impiegato dal browser per iniziare a elaborare l'input dell'utente. Il tempo effettivo impiegato per rispondere agli eventi o modificare l'interfaccia utente non è incluso.

Come suggerisce il nome, FID analizza solo l'interazione iniziale dell'utente con il sito web. Questo contatto iniziale potrebbe non riflettere accuratamente l'esperienza complessiva dell'utente, in particolare per i siti che rimangono aperti per un periodo prolungato, come le applicazioni a pagina singola.

L'interazione con Next Paint in genere valuta la peggiore latenza di input sulla pagina. Tuttavia, se si verificano molti incontri con gli utenti, i valori anomali verranno scartati e Google valuterà il 98° percentile per il ritardo dell'interazione.

Pertanto, se l’INP di una pagina è di 250 millisecondi, il 2% delle interazioni dell’utente ha avuto una latenza maggiore.

Come funziona l'interazione con Next Paint (INP)?

INP è una metrica di reattività che si concentra sul tempo trascorso tra le interazioni dell'utente. Misura la velocità con cui un elemento di una pagina web risponde quando viene eseguita un'azione specifica su di esso.

Ecco come funziona INP:

• Un utente interagisce con una pagina web facendo clic su un pulsante.
• Il browser richiede nuovi contenuti dal server web.
• Il server web fornisce nuovi contenuti al browser.
• Il browser visualizza il nuovo contenuto nella pagina.
• Il browser calcola il tempo necessario per creare il nuovo contenuto e lo segnala come punteggio INP.

Una valutazione INP bassa indica che la pagina è estremamente reattiva all'input dell'utente. Nell'ambito dei Core Web Vitals, INP è significativo per i seguenti motivi:

• Migliorata l'esperienza dell'utente:Un punteggio INP elevato indica che i visitatori devono attendere molto tempo affinché la pagina Web risponda alle loro attività, il che può essere fastidioso.

• SEO (Ottimizzazione per i motori di ricerca):INP e altri Core Web Vitals fanno parte dei segnali di esperienza sulla pagina di Google, che influenzano il posizionamento di un sito Web nelle pagine dei risultati di ricerca. Ciò sottolinea l'importanza dell'INPMetrica SEO.

• Abbassa la frequenza di rimbalzo:Tempi di caricamento lenti potrebbero indurre i clienti ad abbandonare la pagina, riducendo i profitti della tua azienda.

Come viene misurato l'INP?

INP monitora il tempo che trascorre tra l'input dell'utente, come clic e sequenze di tasti, e il successivo aggiornamento dell'interfaccia utente. Questo ritardo ha tre componenti:

UN. Ritardo di ingresso

In attesa di operazioni in background sul sito Web per impedire l'esecuzione del gestore eventi.

B. Tempo di elaborazione

Esecuzione di gestori di eventi in JavaScript.

C. Ritardo presentazione

Gestire altre operazioni in sospeso, ricalcolare il layout della pagina e dipingere il contenuto della pagina. Gli INP sono misurati in millisecondi (ms). Un buon benchmark è inferiore a 200 ms e qualsiasi valore compreso tra questo e 500 ms è considerato necessitante di miglioramento. Una latenza di 500 ms o superiore è considerata scarsa.

Diverse variabili possono influenzare un valore INP, tra cui la dimensione e la complessità di una pagina web, nonché il numero di file JavaScript e CSS caricati.

Puoi utilizzare molti strumenti per valutare l'interazione con Next Paint, come ad esempio:

• Test di velocità del sito web di DebugBear
• Google Page Speed ​​Insights
• La nostra estensione Chrome per la velocità del sito
• Debug INP
• Console di ricerca di Google
• La libreria Web Vitals

Gli strumenti di test della velocità del sito web possono aiutarti a determinare il valore INP di un sito web. Questo tipo di applicazione può fornire informazioni sul rendimento dei parametri Core Web Vitals e offrire indicazioni su come ottimizzarli.

Google PageSpeed ​​Insights è uno strumento popolare per analizzare INP eprestazioni del sito web. Valuterà un sito e fornirà raccomandazioni sulle migliori pratiche da applicare. Puoi anche esaminare la velocità di caricamento del tuo sito web su dispositivi mobili e desktop.

PageSpeed ​​Insights presenta due tipi di risultati. La parte superiore mostra le metriche Core Web Vitals di un sito dal rapporto Chrome UX, una raccolta di metriche sulle prestazioni del mondo reale degli utenti di Chrome.

I valori mostrati nel rapporto seguente provengono da un'impostazione di laboratorio controllata che utilizza Google Lighthouse. Questi dati possono essere utilizzati per testare nuove funzionalità prima che vengano pubblicate.

Se i dati INP del sito non sono disponibili, esamina il relativo tempo di blocco totale (TBT). Questa metrica valuta una nuova forma di reattività. Si concentra sul tempo per cui un sito Web non può rispondere all'interazione dell'utente durante il caricamento.

Verso la fine, ci sono idee su come migliorare le metriche Core Web Vitals, come segue:

Come ottimizzare l'interazione con Next Paint (INP)?

Pertanto, per ottimizzare l'INP, è necessario semplificare e dare priorità il più possibile all'elenco delle cose da fare per il thread principale. Ecco alcune strategie e modi principali per ottimizzare i valori Interaction to Next Paint (INP) e aumentare la reattività:

UN. Migliora le prestazioni JavaScript

JavaScriptè un componente chiave di molti siti Web. Offre molti elementi interattivi; tuttavia, può anche rallentare la velocità del sito.

Quando viene eseguito JavaScript, viene eseguito sul thread principale, che è responsabile del rendering di una pagina web. Se il codice è inefficiente, potrebbe causare l'interruzione del thread e impedire al sito Web di rispondere all'input dell'utente.

Per migliorare la reattività, ottimizza il tuo JavaScript. Puoi raggiungere questo obiettivo:

• Minimizzazione dei file JavaScriptriduce la quantità di JavaScript, permettendogli di caricarne di piùvelocemente.

• Abilita la compressione GZip.Un altro modo comune per comprimere file e dati del sito Web.

• Utilizzando un framework JavaScript.Questo strumento può aiutarti a organizzare il tuo codice JavaScript e renderlo più efficiente. AngularJS e jQuery sono esempi ben noti.

• Utilizzando CDN.Questa tecnologia, nota come rete per la distribuzione di contenuti, distribuirà i tuoi file JavaScript da server situati vicino al tuo pubblico di destinazione, con tempi di caricamento più rapidi.

JavaScript inefficiente può bloccare il thread principale, causando ritardi nel rendering. La suddivisione del codice, il caricamento lento, l'uso di web work ed evitare operazioni di lunga durata sul thread principale sono tutte opzioni per ridurre il ritardo di JavaScript.

B. Utilizzare i Web Worker

I Web Worker sono un servizio che consente a JavaScript di essere eseguito indipendentemente dal thread principale. Sono utili per eseguire attività complicate in background.

Supponiamo che tu abbia un sito Web WordPress caricato con foto, video e dati. I webworker potrebbero spostare queste costose operazioni JavaScript su un thread in background, impedendo lo stallo dell'interfaccia.

Un altro modo per evitare che il thread principale si blocchi è dividere i lavori JavaScript di grandi dimensioni in lavori più piccoli.

C. Suddividere compiti lunghi

La suddivisione di attività di grandi dimensioni consente al browser Web di gestirle in parti più piccole alla volta. Di conseguenza, il thread principale è libero di svolgere compiti più importanti.

Come saprai, le attività lunghe bloccano il thread principale, impedendo al browser di eseguire eventi di interazione. Amigliorare la reattività del tuo sito, riduci lo sforzo sul thread principale e prova a suddividere operazioni di grandi dimensioni.

Suddividendo le attività di grandi dimensioni in parti più piccole, il thread principale può eseguire altri compiti e rispondere più rapidamente alle interazioni dell'utente.

Inoltre, suddividere le attività lunghe aiuta a ridurre al minimo l'effetto "jank", in cui le animazioni e le transizioni sul sito Web diventano a scatti o balbettano a causaa un thread principale sovraccarico. Garantendo che ogni attività venga completata in un periodo di tempo più breve, il sito Web può fornire all'utente un'esperienza visiva più fluida.

D. Dare priorità alla disponibilità dell'input

La disponibilità dell'input si riferisce alla capacità di una pagina Web di rispondere all'interazione dell'utente. Quando non lo è, in genere significa che il thread principale del browser è occupato da altri compiti.

Ecco come dare priorità alla disponibilità dell'input e potenziare INP:

1. JavaScript non critico verrà rinviato

Alcuni JavaScript non sono richiesti per il caricamento iniziale della pagina e possono essere eseguiti dopo ilprincipale contenuto. Ciò consente al thread principale di dare priorità alle interazioni dell'utente e aumentare la reattività complessiva della pagina.

2. Limitazione

Questa strategia determina la frequenza con cui viene eseguita una funzione. Ad esempio, mentre un utente scorre verso il basso, lo stesso codice potrebbe essere eseguito centinaia di volte al secondo. La limitazione gli consente di essere eseguito solo una volta al millisecondo circa, indipendentemente dal numero di volte in cui l'evento viene attivato.

3. Antirimbalzo

Ciò impedisce la nuova esecuzione di una funzione fino a quando non è trascorso un certo periodo. Ad esempio, quando gli utenti ridimensionano la finestra del browser, questo evento può avviare la stessa procedura più volte. Il debouncing può essere utilizzato per rinviare l'esecuzione finché l'utente non interrompe il ridimensionamento per un periodo predeterminato.

4. Ascoltatori di eventi che non partecipano attivamente

I listener di eventi sono costrutti informatici che rilevano determinati eventi, come lo scorrimento e il tocco. Rendendoli passivi si indica al browser di saltare l'attesa del completamento di una funzione specifica e di procedere invece con altre attività.

e. Fornisci feedback immediato

Alcune attività, come il completamento di un modulo con diversi input di dati, possono comportare notevoli ritardi nella risposta.

È qui che entra in gioco il feedback immediato. Questa strategia fornisce ai clienti un’indicazione visibile che il sito web ha ricevuto e sta elaborando la loro richiesta.

Gli utenti non resteranno a chiedersi se il sito Web ha registrato il loro input se ricevono un feedback rapido. Può dare l'impressione di prestazioni più veloci, anche se in realtà non riduce i tempi di elaborazione.

Dai un'occhiata a questi esempi di segnali di feedback rapidi:

1. Indicatori di carico

Visualizza uno spinner o una barra di avanzamento quando un processo è in esecuzione, soprattutto quando si presentano dati o si passa a una nuova pagina.

2. Messaggi pop-up di conferma

È una buona idea visualizzare un messaggio che conferma che un'operazione, come l'aggiunta di un articolo al carrello, è stata completata con successo.

3. Convalida del campo modulo

Ad esempio, se un utente inserisce un indirizzo e-mail formato in modo errato, viene visualizzato immediatamente un avviso di errore anziché attendere l'invio del modulo.

Conclusione

Alla fine della giornata, presentando unottima esperienza utentesul web si riduce a una cosa: reattività. La velocità con cui il tuo sito web o la tua app risponde agli eventi dell'utente, come clic, tocchi e navigazione, può determinare se si tratta di un'esperienza piacevole o frustrantemente lenta.

Ecco perché è così importante ottimizzare il tempo di interazione rapida con Next Paint (INP). INP monitora i minuti importanti che intercorrono tra il momento in cui qualcuno interagisce con il tuo sito Web e il momento in cui riceve la conferma visiva sul proprio schermo. Più basso è l'INP, più tutto sembra veloce e reattivo.

Quindi vai avanti e sblocca la potenza dell'INP ottimizzato!

Scopri la rapida reattività che distingue i siti web medi da quelli che appaiono lussuosamente veloci e fluidi. Da questo dipendono la soddisfazione dei tuoi utenti e il successo delle tue esperienze digitali.

Domande frequenti