La missione dell'Economic Times per correggere l'INP

La riduzione di 30 volte la metrica TBT e la migrazione a Next.js hanno aiutato The Ecomonic Times a ridurre l'INP quasi quattro volte, con una diminuzione del 50% della frequenza di rimbalzo e un aumento del 43% delle visualizzazioni di pagina.

Daya Ram Yadav
Daya Ram Yadav
Saurabh Rajpal
Saurabh Rajpal

Interaction to Next Paint (INP) è una metrica che valuta l'adattabilità di un sito web all'input degli utenti. Una buona reattività indica che una pagina risponde rapidamente alle interazioni degli utenti. Più basso è l'INP di una pagina, migliore sarà la sua risposta alle interazioni degli utenti.

I valori INP validi sono pari o inferiori a 200 millisecondi, i valori scarsi sono superiori a 500 millisecondi e qualsiasi elemento intermedio deve essere migliorato.

L'inizio indistinto

Quando Google ha inizialmente introdotto l'INP come metrica sperimentale con il potenziale di evolversi in una delle metriche di Segnali web essenziali, il team di Economic Times ha accettato la sfida per risolverlo prima che diventasse un'unica, poiché fornire un'esperienza utente di livello mondiale è fondamentale per i nostri valori aziendali fondamentali.

L'INP è stata una delle metriche più difficili da risolvere finora. All'inizio, non era chiaro come misurare l'INP in modo efficace. A rendere la situazione più difficile è stata la mancanza di supporto da parte della community, inclusa la maggior parte dei fornitori di servizi di monitoraggio degli utenti reali (RUM) che non lo supportava ancora. Tuttavia, avevamo strumenti Google RUM come il Report sull'esperienza utente di Chrome (CrUX), la libreria JavaScript web-vitals e altri che lo supportavano, che ci hanno dato un'idea della nostra posizione mentre stavamo valutando il percorso. Il nostro INP era vicino a 1000 millisecondi a livello di origine quando abbiamo iniziato.

Un aspetto emerso durante la correzione dell'INP nel campo è stato il fatto che una delle metriche del lab da scegliere come target potrebbe essere il Tempo di blocco totale (TBT). TBT era già ben documentato e supportato dalla community. Tuttavia, nonostante avessimo già raggiunto le soglie per i Segnali web essenziali, non stavamo andando bene sul fronte TBT, dato che erano più di 3 secondi quando abbiamo iniziato.

Che cos'è TBT e quali misure abbiamo adottato per migliorarlo?

"TBT" è una metrica di lab che misura la reattività di una pagina web all'input dell'utente durante il caricamento. Qualsiasi attività che richiede più di 50 millisecondi è considerata un'attività lunga, mentre il tempo dopo la soglia di 50 millisecondi è noto come tempo di blocco.

Il TBT viene calcolato sommando il tempo di blocco di tutte le attività lunghe durante il caricamento pagina. Ad esempio, se durante il caricamento ci sono due attività lunghe, il tempo di blocco viene determinato come segue:

  • L'attività A richiede 80 millisecondi (30 millisecondi in più di 50 millisecondi).
  • L'attività B richiede 100 millisecondi (50 millisecondi in più di 50 millisecondi).

Il TBT della pagina sarà 80 millisecondi (30 + 50). Più basso è il TBT, meglio è. Inoltre, TBT correla bene con INP.

Ecco un breve confronto di laboratorio del nostro TBT prima e dopo aver seguito i passaggi per migliorarlo:

Un'immagine composita di attività lunghe durante l'avvio, come mostrato nel riquadro delle prestazioni di Chrome DevTools, e un report sulle metriche delle pagine. Il thread principale è bloccato durante il caricamento della pagina per 3260 millisecondi.
Il thread principale durante l'avvio prima di ottimizzare TBT. Il TBT è 3260 millisecondi.
Un'immagine composita di attività lunghe durante l'avvio, come mostrato nel riquadro delle prestazioni di Chrome DevTools, e un report sulle metriche delle pagine. Il thread principale è bloccato durante il caricamento pagina per 120 millisecondi.
Il thread principale durante l'avvio dopo l'ottimizzazione di TBT. Il TBT è di 120 millisecondi.

Riduci al minimo il lavoro del thread principale

Il thread principale del browser gestisce tutto, dall'analisi del codice HTML alla creazione del DOM, all'analisi del CSS e all'applicazione degli stili, oltre alla valutazione e all'esecuzione di JavaScript. Il thread principale gestisce anche le interazioni degli utenti, ovvero clic, tocco e pressione dei tasti. Se il thread principale è impegnato in altre attività, potrebbe non rispondere in modo efficiente agli input utente e portare a un'esperienza utente scadente.

Questa è stata l'attività più difficile per noi, dato che disponiamo dei nostri algoritmi per rilevare l'identità dell'utente per la pubblicazione di annunci in base allo stato dell'abbonamento e script di terze parti per test A/B, analisi e altro ancora.

All'inizio abbiamo adottato piccoli passaggi, come ridurre la priorità del caricamento degli asset aziendali meno importanti. In secondo luogo, abbiamo utilizzato requestIdleCallback per le attività non critiche, il che può contribuire a ridurre il tempo da verificare.

if ('requestIdleCallback' in window) {
  this.requestIdleCallbackId = requestIdleCallback(fetchMarketsData.bind(this), {timeout: 3000});
} else {
  fetchMarketsData(); // Fallback in case requestIdleCallback is not supported
}

Ti consigliamo di specificare un timeout quando utilizzi requestIdleCallback poiché garantisce che, se il tempo specificato sia trascorso e il callback non sia già stato chiamato, il callback viene eseguito immediatamente dopo il timeout.

Riduci al minimo il tempo di valutazione degli script

Inoltre, abbiamo caricato le librerie di terze parti con caricamento lento utilizzando i componenti caricabili. Abbiamo anche rimosso il codice JavaScript e il CSS inutilizzati profilando la pagina con lo strumento di copertura in Chrome DevTools. Ci ha aiutato a identificare le aree in cui la scossa degli alberi era necessaria per spedire meno codice durante il caricamento della pagina e, di conseguenza, ridurre le dimensioni iniziali del bundle dell'applicazione.

Uno screenshot dello strumento di copertura in Chrome DevTools. In questo caso, lo strumento mostra le parti inutilizzate dei file JavaScript e CSS durante il caricamento pagina.

Riduci dimensioni DOM

Secondo Lighthouse, le dimensioni dei DOM di grandi dimensioni aumentano l'utilizzo della memoria, causano ricalcoli di stile più lunghi e producono costosi ricalcoli del layout.

Uno screenshot del controllo delle dimensioni del DOM in Lighthouse. Il numero di elementi DOM segnalati è di 2706.

Abbiamo ridotto il numero di nodi DOM in due modi:

  • Innanzitutto, abbiamo visualizzato le voci di menu su richiesta dell'utente (al clic). Ha diminuito le dimensioni del DOM di circa 1200 nodi.
  • Secondo, abbiamo caricato widget meno importanti tramite caricamento lento.

Grazie a tutti questi sforzi, abbiamo ridotto significativamente la TBT e la nostra INP è stata di conseguenza ridotta di quasi il 50%:

Uno screenshot del controllo INP in CrUX. L'INP della pagina è di 539 millisecondi, superando la soglia relativa ai valori "scarso".

A questo punto, abbiamo quasi esaurito le facili vittorie per ridurre ulteriormente il TBT (e l'INP per delega), ma sapevamo di avere molto margine di miglioramento. È stato allora che abbiamo deciso di eseguire l'upgrade del nostro boilerplate personalizzato all'ultima versione di React insieme a Next.js per migliorare l'utilizzo degli hook ed evitare inutili operazioni di rendering dei componenti.

A causa di aggiornamenti più frequenti e di un traffico relativamente minore rispetto alle altre parti del sito web, abbiamo iniziato a eseguire la migrazione delle nostre pagine degli argomenti a Next.js. Abbiamo anche utilizzato PartyTown per ridurre il carico di lavoro aggiuntivo sui thread principali per i web worker, insieme a tecniche come requestIdleCallBack per rimandare attività non fondamentali.

In che modo il miglioramento dell'INP ha aiutato The Economic Times?

TBT e INP attuali sull'origine

Al momento della pubblicazione di questo post, il TBT per la nostra origine era di 120 millisecondi, in calo rispetto ai 3260 millisecondi quando abbiamo iniziato i nostri sforzi di ottimizzazione. Allo stesso modo, l'INP della nostra origine era 257 millisecondi dopo i nostri sforzi di ottimizzazione, in meno da oltre 1000 millisecondi.

Uno screenshot del controllo INP in CrUX. L'INP della pagina è di 257 millisecondi, che rientra nelle soglie "Richiede miglioramenti".

Tendenza INP CrUX

Il traffico ricevuto sulle pagine degli argomenti rappresenta una parte significativamente inferiore del traffico complessivo. Era quindi un luogo ideale per la sperimentazione. I risultati di CrUX e quelli aziendali sono stati molto incoraggianti e ci hanno portato a espandere i nostri sforzi in tutto il sito web per ottenere ulteriori vantaggi.

Uno screenshot delle distribuzioni INP visualizzate in CrUX in un periodo di quattro mesi, a partire da luglio 2022 fino a ottobre 2022. I valori all'interno delle soglie "Scadente" e "Richiede miglioramenti" sono leggermente diminuiti, mentre i valori all'interno della soglia "Buono" sono aumentati.

Analisi TBT mPulse di Akamai

Utilizziamo Akamai mPulse come soluzione RUM, che misura TBT sul campo. Abbiamo osservato una diminuzione costante della metrica TBT, che corrisponde chiaramente ai risultati dei nostri sforzi per ridurre l'INP. Come puoi vedere nello screenshot di seguito, i valori TBT alla fine sono scesi da circa 5 secondi a circa 200 millisecondi nel campo.

Uno screenshot di un grafico in Akamai mPulse, che mostra un calo dei dati TBT in circa un mese.

Risultato aziendale

Nel complesso, i nostri sforzi per ridurre il TBT di 30 volte, insieme alla migrazione a Next.js, ci hanno aiutato a ridurre l'INP quasi di 4 volte, il che si è tradotto in una diminuzione del 50% della frequenza di rimbalzo e un aumento del 43% delle visualizzazioni di pagina sulle pagine degli argomenti.

Uno screenshot di Google Analytics che confronta le visualizzazioni di pagina e la frequenza di rimbalzo. Grazie alle ottimizzazioni apportate a INP sul sito web The Economic Times, sono state registrate una diminuzione del 50% della frequenza di rimbalzo e un aumento del 43% delle visualizzazioni di pagina.

Conclusione

Per riassumere, INP ha ampiamente aiutato a determinare i problemi di prestazioni di runtime su parti del sito web dell'Economic Times. Ha dimostrato di essere una delle metriche più efficaci per avere un impatto positivo sui risultati aziendali. Date le cifre estremamente incoraggianti che abbiamo riscontrato come risultato di questo impegno, siamo motivati a estendere i nostri sforzi di ottimizzazione ad altre aree del nostro sito web e a ottenere ulteriori vantaggi.