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 su Interaction to Next Paint (INP). INP misura il tempo totale dall'interazione dell'utente al successivo aggiornamento visivo. L'input delay è la prima delle tre fasi che compongono l'INP, seguita dal tempo di elaborazione e dal presentation delay. Se sei nuovo all'INP, leggi prima la nostra guida su come identificare e correggere i problemi di INP.

CONSIGLIO INP: nella maggior parte dei casi l'input delay si verifica durante le fasi iniziali di caricamento della pagina web. È in questo momento che il browser è più impegnato nell'analisi e nell'esecuzione degli script.

Cos'è l'input delay?

L'input delay si riferisce al tempo necessario al browser per iniziare a elaborare un callback dell'evento dopo che un utente interagisce con una pagina web (ad esempio, cliccando un pulsante o premendo un tasto). Sebbene ci sia sempre un certo input delay (anche i browser hanno bisogno di tempo per programmare i callback), un input delay eccessivo si verifica quando il browser è impegnato a eseguire altre attività programmate e non può programmare immediatamente i callback richiesti dall'interazione.

Durante l'input delay, l'utente ha già eseguito la sua azione (clic, tocco o pressione di tasto) ma il browser non ha ancora iniziato a eseguire il gestore dell'evento associato. L'utente non vede alcuna risposta. Questo è diverso dal tempo di elaborazione, in cui il gestore dell'evento è 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 thread principale congestionato.

Input delay e INP

L'Interaction to Next Paint (INP) può essere suddiviso in 3 sotto-parti: "Input Delay", "Tempo di elaborazione" e "Presentation Delay".

Potresti notare che ci sono somiglianze nei nomi tra l'Input Delay e la vecchia Core Web Vital "First Input Delay" (FID). Interaction to Next Paint ha sostituito FID come Core Web Vital a marzo 2024. Il First Input Delay misurava solo il tempo tra la prima interazione e il callback dell'evento. Anche se FID è stato ritirato, l'input delay è ancora importante perché è alla base di ogni misurazione di 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 tempo di elaborazione), l'input delay viene spesso trascurato. È vero, l'input delay non è di solito la parte più grande dell'INP, ma se ottimizziamo l'input delay spesso ottimizzeremo tutte le interazioni INP contemporaneamente. Ridurre l'input delay migliora ogni interazione sulla pagina, non solo la peggiore.

In CoreDash raccogliamo milioni di dati Core Web Vitals ogni ora. Sulla base di questi dati, l'input delay rappresenta circa il 18% dell'Interaction to Next Paint. Questo è meno del tempo di elaborazione o del presentation delay, ma l'input delay è spesso la fase più facile da ridurre perché la causa principale è quasi sempre "troppo JavaScript in esecuzione nel momento sbagliato".

Cause dell'input delay

L'input delay si verifica quando il thread principale è impegnato nell'esecuzione di altre attività. Queste attività possono provenire da:

1. Attività iniziali. Gli script normali, differiti e asincroni accodati all'inizio creeranno attività iniziali. Queste sono la fonte più comune di input delay perché vengono eseguiti durante la finestra critica di avvio quando gli utenti hanno più probabilità di interagire con la pagina.
2. Attività programmate. Alcune attività non vengono eseguite all'inizio del caricamento della pagina ma potrebbero essere programmate per dopo il caricamento. Queste attività possono anche interferire con l'INP e causare un input delay. Ad esempio, script che vengono eseguiti dopo l'evento window.onload o script che vengono ritardati dai cosiddetti plugin di ottimizzazione. Scopri di più su quando usare async vs defer per JavaScript.
3. Attività ricorrenti. Attività ricorrenti tramite setInterval() che richiedono un tempo relativamente lungo per l'esecuzione e coincidono con l'INP.
4. Callback sovrapposti. I callback sovrapposti sono una causa comune di input delay. Più callback programmati ravvicinati possono creare una coda, ritardando l'elaborazione dell'interazione successiva. Ad esempio, un gestore mouseover che si attiva appena prima di un gestore click può ritardare l'elaborazione del clic per la durata dell'attività del mouseover.

Minimizzare l'input delay

1. Suddividi le attività lunghe iniziali in più attività più piccole. Durante le attività lunghe il browser non può rispondere all'input dell'utente, mentre dopo ogni attività breve il browser può rispondere all'input dell'utente. Suddividi le attività lunghe con scheduler.yield() o avvolgendo ogni funzione in un timeout di 0 con setTimeout(callback, 0).
2. Gestisci gli elementi interattivi. Considera di non presentare elementi interattivi (come una barra di ricerca) prima che il codice JavaScript che li controlla sia completamente caricato. Questo impedirà i clic anticipati su elementi che non sono pronti a riceverli. Per ottimizzare la UX per questo pattern potresti dare priorità al caricamento del JavaScript necessario o nascondere/disabilitare temporaneamente l'elemento fino a quando non è funzionale.
3. Esecuzione di script durante il tempo di inattività. Programma gli script non critici per l'esecuzione 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. Usa i web worker per eseguire JavaScript fuori dal thread principale del browser. I web worker permettono agli script di essere eseguiti fuori dal thread principale. Questo impedirà al thread principale di bloccarsi e causare problemi di input delay nell'INP.
5. Controlla se ci sono input in sospeso durante le attività ricorrenti. Prima di eseguire un insieme di attività programmate, controlla se ci sono input in sospeso prima di avviare le attività. Se c'è qualche input in sospeso, cedi il controllo al thread principale prima.
6. Rimuovi il codice non necessario. Controlla regolarmente i tuoi script e rimuovi qualsiasi codice non necessario o anche 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 differire JavaScript per tecniche pratiche.

Suddividere le attività con scheduler.yield()

L'API scheduler.yield() è il modo consigliato per suddividere le attività lunghe. A differenza di setTimeout(callback, 0), che posiziona la continuazione in fondo alla coda delle attività, scheduler.yield() preserva la priorità dell'attività. Questo significa che il browser riprenderà il tuo codice il prima possibile dopo aver gestito qualsiasi input utente in sospeso. 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();
}

Per saperne di più su come funziona scheduler.yield() internamente, consulta il blog di Chrome Developers.

Prioritizzare le attività con scheduler.postTask()

Mentre scheduler.yield() suddivide le attività, scheduler.postTask() ti offre un controllo dettagliato sulla priorità delle attività. L'API accetta tre livelli di priorità: "user-blocking" per le attività critiche che richiedono la massima priorità, "user-visible" per le attività a priorità media, e "background" per le attività 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 dell'interfaccia 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 compatibilità dei browser per scheduler.postTask() prima di usarlo in produzione. Per i browser che non supportano l'API, usa requestIdleCallback() come fallback per le attività in background e queueMicrotask() per le attività ad alta priorità.

Implicazioni pratiche

Cosa significa questo per il tuo sito? Ecco raccomandazioni specifiche per WordPress e React/Next.js.

WordPress

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

Per minimizzare l'input delay e ottimizzare l'Interaction to Next Paint (INP) su WordPress, segui questi passaggi:

• Evita di usare plugin quando possibile. Sebbene i plugin siano un modo semplice per aggiungere funzionalità, spesso aggiungono script alla pagina. Quegli script causeranno un input delay che impatta l'INP. Per ogni plugin, chiediti: posso ottenere la stessa funzionalità con codice personalizzato o una soluzione lato server?
• Scegli temi leggeri. Molti temi WordPress "offrono tutto". Sebbene possa sembrare un'ottima idea, significa che probabilmente sono pieni di funzionalità non utilizzate ma che occupano prezioso tempo di CPU.
• Evita i page builder. I page builder come Elementor o WPBakery ti offrono un'interfaccia visiva e user-friendly per costruire layout. Sfortunatamente, spesso si affidano a script pesanti per presentare quel layout ai visitatori.
• Carica 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 figlio e deregistra gli 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' );

• Controlla il tuo Tag Manager. I container di Google Tag Manager spesso accumulano tag nel tempo. Ogni tag che si attiva durante il caricamento della pagina aggiunge un'attività al thread principale. Rimuovi i tag inutilizzati, imposta trigger appropriati (ad esempio, attiva i tag di marketing solo sulle pagine di conversione), e usa i report di timing integrati del Tag Manager per identificare i tag lenti.
• Ritarda gli script di terze parti non essenziali. Widget di chat, strumenti di feedback ed embed di social media non devono essere caricati immediatamente. Usa requestIdleCallback() o un trigger basato sullo scroll per caricarli solo quando l'utente potrebbe averne bisogno. Per strategie dettagliate, leggi la nostra guida su 14 metodi per differire 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 DOM virtuale 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.

• Usa i server component (React Server Components nel Next.js App Router). I server component vengono renderizzati sul server e non inviano JavaScript al client, il che riduce direttamente la quantità di codice che compete per il tempo del thread principale.
• Carica 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 async vs defer JavaScript per i principi sottostanti.
• Implementa un pattern idle-until-urgent. Questo pattern dà priorità alle interazioni dell'utente rispetto alle attività in background usando requestIdleCallback() per l'inizializzazione non critica mantenendo un fallback sincrono che si attiva quando il componente è effettivamente necessario.
• Carica i componenti in modo lazy. Carica in modo lazy i componenti che non sono immediatamente necessari usando React.lazy() o dynamic() di Next.js con { ssr: false } per i componenti solo client.
• Usa Suspense per i componenti interattivi. Avvolgi i componenti interattivi in confini <Suspense> così che il resto della pagina possa renderizzarsi e diventare interattivo mentre i componenti pesanti si caricano in background. Questo impedisce a un singolo componente lento di bloccare l'elaborazione dell'input su tutta la pagina.
• Usa le transizioni React per gli aggiornamenti non urgenti. Avvolgi gli aggiornamenti di stato non critici in startTransition() così React può interromperli se l'utente esegue una nuova interazione. Questo mantiene l'interfaccia reattiva anche quando sono in corso grandi re-render.

Esplora le altre fasi dell'INP

Per tenere sotto controllo il tuo INP, affronta anche le altre due fasi:

• Tempo di elaborazione: Ottimizza il codice del gestore dell'evento che viene eseguito durante l'interazione. Nella maggior parte delle pagine, è qui che la maggior parte del tuo sforzo di ottimizzazione dà i suoi frutti.
• Presentation Delay: Riduci il lavoro di renderizzazione e painting che segue l'elaborazione dell'evento. Nelle pagine complesse con DOM grandi, questa è spesso la fase più lunga.

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