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.
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.
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:
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.
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.
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%:
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.
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.
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.
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.
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.