INP Input Delay: cause, diagnosi e soluzioni

Problemi di Interaction to Next Paint (INP) causati dall'input delay

Questa pagina fa parte della nostra serie sull'Interaction to Next Paint (INP). L'INP misura il tempo totale da un'interazione dell'utente al successivo aggiornamento visivo. L'input delay è la prima delle tre fasi che compongono l'INP, seguita dal processing time e dal presentation delay. Se non hai familiarità con l'INP, leggi prima la nostra guida su come identificare e risolvere i problemi di INP.

In questo articolo ci concentriamo sull'input delay: quali sono le sue cause, come influisce sull'Interaction to Next Paint e come ridurre al minimo gli input delay per migliorare i tuoi punteggi INP.

SUGGERIMENTO INP: la maggior parte delle volte l'input delay si verifica durante le prime fasi di caricamento della pagina web. È in questo momento che il browser è più occupato ad analizzare ed eseguire gli script.

Cos'è l'input delay?

L'input delay si riferisce al tempo impiegato dal browser per iniziare a elaborare una callback di evento dopo che un utente interagisce con una pagina web (ad esempio, facendo clic su un pulsante o premendo un tasto). Anche se c'è sempre un certo input delay (perfino i browser hanno bisogno di tempo per programmare le callback), un input delay eccessivo si verifica quando il browser è occupato a eseguire altre task programmate e non può programmare immediatamente le callback richieste dall'interazione.

Durante l'input delay, l'utente ha già eseguito la sua azione (clic, tocco o pressione di un tasto) ma il browser non ha ancora iniziato a eseguire il gestore di eventi associato. L'utente non vede alcuna risposta. Questo è diverso dal processing time, in cui il gestore di eventi è attivamente in esecuzione, e dal presentation delay, in cui il browser sta renderizzando l'aggiornamento visivo. L'input delay è puro tempo di attesa causato da un main thread congestionato.

L'input delay e l'INP

L'Interaction to Next Paint (INP) può essere suddiviso in 3 parti: "Input Delay", "Processing Time" e "Presentation Delay".

Potresti notare che ci sono somiglianze nei nomi tra l'Input Delay e il precedente Core Web Vital "First Input Delay" (FID). L'Interaction to Next Paint ha sostituito il FID come Core Web Vital nel marzo 2024. Il First Input Delay misurava solo il tempo tra la prima interazione e la callback dell'evento. Anche se il FID è stato ritirato, l'input delay gioca ancora un ruolo importante nel migliorare la reattività del web perché l'input delay è alla base di ogni misurazione dell'Interaction to Next Paint.

L'importanza dell'input delay

Poiché molti sviluppatori pensano a migliorare l'INP in termini di ottimizzazione delle funzioni di callback (ottimizzazione del processing time), l'input delay viene spesso trascurato. Certo, l'input delay non è di solito la parte più grande dell'INP, ma se ottimizziamo l'input delay spesso ottimizzeremo tutte le interazioni INP in una volta sola. Ridurre l'input delay migliora ogni interazione sulla pagina, non solo la peggiore.

Su CoreDash raccogliamo milioni di data point sui Core Web Vitals ogni ora. In base a questi dati, l'input delay rappresenta circa il 18% dell'Interaction to Next Paint. Sebbene non sia tanto quanto il presentation delay o il processing time, è comunque una porzione significativa. Ancora più importante, l'input delay è spesso la fase più facile da ridurre perché la causa principale è quasi sempre "troppo JavaScript in esecuzione nel momento sbagliato".

Le cause dell'input delay

L'input delay si verifica quando il main thread è occupato a eseguire altre task. Queste task possono provenire da:

1. Task iniziali (Early tasks). Gli script normali, deferred e async che vengono accodati all'inizio creeranno task iniziali. Queste sono la fonte più comune di input delay perché vengono eseguite durante la finestra critica di avvio, quando gli utenti hanno maggiori probabilità di interagire con la pagina.
2. Task programmate. Alcune task non vengono eseguite all'inizio del caricamento della pagina ma potrebbero essere programmate per dopo che la pagina è stata caricata. Anche queste task possono interferire con l'INP e causare un input delay. Ad esempio, gli script che vengono eseguiti dopo l'evento window.onload o gli script che vengono ritardati dai cosiddetti plugin di ottimizzazione. Scopri di più su quando usare async o defer per JavaScript.
3. Task ripetitive. Task ricorrenti tramite setInterval() che impiegano un tempo relativamente lungo per essere eseguite e si verificano in concomitanza con l'INP.
4. Callback sovrapposte. Le callback sovrapposte sono una causa comune di input delay. Più callback programmate vicine tra loro possono creare una coda, ritardando l'elaborazione della interazione successiva. Ad esempio, un gestore mouseover che si attiva appena prima di un gestore click può spingere l'elaborazione del clic indietro per la durata della task del mouseover.

Ridurre al minimo l'input delay

1. Suddividere le task iniziali lunghe in più task più piccole. Durante le task lunghe il browser non può rispondere agli input dell'utente, mentre dopo ogni task breve il browser può rispondere agli input dell'utente. Suddividi le task lunghe con scheduler.yield() o avvolgendo ogni funzione in un timeout di 0 con setTimeout(callback, 0).
2. Gestire gli elementi interattivi. Valuta di non presentare elementi interattivi (come una barra di ricerca) prima che il codice JavaScript che li controlla sia completamente caricato. Questo preverrà clic precoci su elementi che non sono pronti a ricevere clic. Per ottimizzare la UX per questo pattern potresti dare priorità al caricamento del JavaScript necessario o nascondere/disabilitare temporaneamente l'elemento finché non è funzionale.
3. Esecuzione di script nel tempo di inattività (Idle time). Programma l'esecuzione degli script non critici durante i periodi di inattività del browser con requestIdleCallback(). Questa funzione viene eseguita quando il browser è inattivo e non ha bisogno di elaborare l'input dell'utente.
4. Usare i web worker per eseguire JavaScript fuori dal main thread del browser. I web worker consentono agli script di essere eseguiti fuori dal main thread. Questo impedirà al main thread di bloccarsi e causare problemi di input delay per l'INP.
5. Controllare la presenza di input in attesa durante le task ripetitive. Prima di eseguire un insieme di task programmate, controlla se ci sono input in attesa prima di iniziare le task. Se c'è qualche input in attesa, cedi (yield) il controllo al main thread per primo.
6. Rimuovere il codice non necessario. Controlla regolarmente i tuoi script e rimuovi qualsiasi codice non necessario o persino interi script, perché ogni riga di codice può potenzialmente causare un input delay che influisce sull'Interaction to Next Paint. Consulta la nostra guida su 14 metodi per deferire JavaScript per tecniche pratiche.

Suddividere le task con scheduler.yield()

L'API scheduler.yield() è il modo consigliato per suddividere le task lunghe. A differenza di setTimeout(callback, 0), che posiziona la continuazione in fondo alla coda delle task, scheduler.yield() preserva la priorità della task. Questo significa che il browser riprenderà il tuo codice il prima possibile dopo aver gestito eventuali input dell'utente in attesa. Ecco una funzione helper riutilizzabile:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  // Fallback for browsers without scheduler.yield()
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

// Example: break up a long initialization sequence
async function initializeApp() {
  loadCriticalFeatures();
  await yieldToMain();  // Let the browser handle any pending input

  loadSecondaryFeatures();
  await yieldToMain();

  loadAnalytics();
  await yieldToMain();

  loadNonEssentialWidgets();
}

Prioritizzare le task con scheduler.postTask()

Mentre scheduler.yield() suddivide le task, scheduler.postTask() ti offre un controllo granulare sulla priorità delle task. L'API accetta tre livelli di priorità: "user-blocking" per le task critiche che richiedono la massima priorità, "user-visible" per le task a priorità media e "background" per le task a priorità più bassa che dovrebbero essere eseguite durante il tempo di inattività.

Usando postTask() puoi assicurarti che il lavoro non essenziale non blocchi le interazioni dell'utente. Ecco un esempio pratico che programma il lavoro di analisi a priorità background mantenendo gli aggiornamenti della UI alla massima priorità:

// High priority: UI feedback runs first
scheduler.postTask(() => {
  showLoadingSpinner();
}, { priority: 'user-blocking' });

// Medium priority: fetch data
scheduler.postTask(async () => {
  const data = await fetchSearchResults(query);
  renderResults(data);
}, { priority: 'user-visible' });

// Low priority: analytics can wait
scheduler.postTask(() => {
  trackSearchEvent(query);
  sendToAnalytics('search', { query });
}, { priority: 'background' });

Controlla la tabella di supporto dei browser per scheduler.postTask() prima di usarlo in produzione. Per i browser che non supportano l'API, usa come ripiego requestIdleCallback() per le task in background e queueMicrotask() per le task ad alta priorità.

Implicazioni pratiche

Affrontiamo la domanda più importante: "Cosa significa tutto questo per il mio sito?" Di seguito sono riportati consigli specifici per i siti WordPress e React/Next.js.

WordPress

WordPress, a causa della sua architettura basata sui plugin, è spesso dotato di un tema e di un gran numero di plugin. Sia i plugin che i temi si affidano spesso a JavaScript per le loro funzionalità. Poiché questi plugin e temi sono gestiti da sviluppatori di terze parti, non hai alcun controllo sui contenuti. Questo significa che non puoi modificare i file e ottimizzare il "codice errato". Anche se gli script si comportano bene oggi, non c'è garanzia che lo faranno dopo il prossimo aggiornamento.

Per ridurre al minimo l'input delay e ottimizzare l'Interaction to Next Paint (INP) su WordPress, procedi nel seguente modo:

• Evitare di usare i plugin quando possibile. Anche se i plugin sono un modo semplice per aggiungere funzionalità, spesso aggiungono script alla pagina. Tali script causeranno un input delay che influisce sull'INP. Per ogni plugin, chiediti: posso ottenere la stessa funzionalità con del codice personalizzato o una soluzione server-side?
• Scegliere temi leggeri. Molti temi WordPress "offrono tutto". Anche se sembra un'ottima idea, significa che sono probabilmente pieni di funzionalità che non vengono utilizzate ma che occupano prezioso tempo della CPU.
• Evitare i page builder. I page builder come Elementor o WPBakery ti offrono un'interfaccia visiva facile da usare per creare layout. Sfortunatamente, si affidano spesso a script pesanti per presentare quel layout ai visitatori.
• Caricare gli script solo quando sono necessari. WordPress ha la tendenza a caricare tutti gli script su tutte le pagine. Per risolvere questo problema, crea un tema child e annulla la registrazione degli script non necessari per tipo di pagina:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) {
    // Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

• Controllare il tuo Tag Manager. I contenitori di Google Tag Manager accumulano spesso tag nel tempo. Ogni tag che si attiva durante il caricamento della pagina aggiunge una task al main thread. Rimuovi i tag inutilizzati, imposta attivatori appropriati (ad esempio, attiva i tag di marketing solo sulle pagine di conversione) e usa i report sulle tempistiche integrati nel Tag Manager per identificare i tag lenti.
• Ritardare gli script di terze parti non essenziali. I widget di chat, gli strumenti di feedback e gli embed dei social media non devono essere caricati immediatamente. Usa requestIdleCallback() o un trigger basato sullo scorrimento per caricarli solo quando l'utente ne avrà probabilmente bisogno. Per strategie dettagliate, leggi la nostra guida su 14 metodi per deferire JavaScript.

React / Next.js

I siti React e Next.js sono alimentati principalmente da JavaScript. L'esecuzione degli script di avvio, l'idratazione dei componenti e l'elaborazione del virtual DOM richiedono tutti tempo e possono causare input delay per l'Interaction to Next Paint (INP). La buona notizia è che sia React che Next.js forniscono strumenti per gestire questo in modo efficace.

• Usare i server component (React Server Components nel Next.js App Router). I server component vengono renderizzati sul server e inviano zero JavaScript al client, il che riduce direttamente la quantità di codice che compete per il tempo del main thread.
• Caricare gli script di terze parti con la strategia corretta. In Next.js, usa il componente next/script con strategy="afterInteractive" per gli script necessari dopo l'idratazione, o strategy="lazyOnload" per gli script che possono essere caricati durante il tempo di inattività del browser. Consulta la nostra guida su async vs defer JavaScript per i principi alla base.
• Implementare un pattern idle-until-urgent. Questo pattern dà priorità alle interazioni dell'utente rispetto alle task in background utilizzando requestIdleCallback() per l'inizializzazione non critica, mantenendo al contempo un fallback sincrono che si attiva quando il componente è effettivamente necessario.
• Caricamento pigro (Lazy load) dei componenti. Carica in modo pigro i componenti che non sono immediatamente necessari utilizzando React.lazy() o dynamic() di Next.js con { ssr: false } per i componenti solo client.
• Usare Suspense per i componenti interattivi. Avvolgi i componenti interattivi nei confini di <Suspense> in modo che il resto della pagina possa essere renderizzato e diventare interattivo mentre i componenti pesanti vengono caricati in background. Questo impedisce a un singolo componente lento di bloccare l'elaborazione dell'input in tutta la pagina.
• Usare le React transitions per gli aggiornamenti non urgenti. Avvolgi gli aggiornamenti di stato non critici in startTransition() in modo che React possa interromperli se l'utente esegue una nuova interazione. Questo mantiene la UI reattiva anche quando sono in corso grandi ri-rendering.

Esplora le altre fasi dell'INP

L'input delay è solo una parte dell'Interaction to Next Paint. Per ottimizzare completamente i tuoi punteggi INP, dovresti affrontare anche le altre due fasi:

• Processing Time: Ottimizza l'esecuzione del gestore di eventi che rappresenta circa il 40% del tempo totale dell'INP.
• Presentation Delay: Riduci il lavoro di rendering e painting che rappresenta circa il 42% del tempo totale dell'INP.

Per un flusso di lavoro diagnostico completo, consulta la nostra guida su come trovare e risolvere i problemi di INP e torna alla pagina hub dell'INP per la panoramica completa.