È stata ottimizzata l'interattività delle pagine dei dettagli del prodotto con una riduzione del 90% del valore FID potenziale massimo in Lighthouse e un miglioramento del 9% del valore FID nel report sull'esperienza utente di Chrome.
Mercado Libre è il più grande ecosistema di e-commerce e pagamenti dell'America Latina. È presente in 18 paesi ed è leader di mercato in Brasile, Messico e Argentina (sulla base di visitatori unici e visualizzazioni di pagina).
Il rendimento sul web è una priorità da molto tempo. Di recente, l'azienda ha formato un team che si occupava di monitorare le prestazioni e applicare le ottimizzazioni in diverse parti del sito.
Questo articolo riassume il lavoro svolto da Guille Paz, Pablo Carminatti e Oleh Burkhay del team dedicato all'architettura frontend di Mercado Libre per ottimizzare uno dei Segnali web essenziali: First Input Delay (FID), e il relativo proxy di lab, Total Block Time (TBT).
Il 90%
Riduzione del potenziale FID massimo in Lighthouse
9%
Un numero maggiore di utenti percepisce il FID come "Veloce" in CrUX
Attività lunghe, First Input Delay e tempo di blocco totale
L'esecuzione di codice JavaScript costoso può comportare attività lunghe, ovvero quelle che vengono eseguite per più di 50 ms nel thread principale del browser.
Il valore FID (First Input Delay) misura il tempo che intercorre tra la prima interazione di un utente con una pagina (ad es. quando fa clic su un link) e il momento in cui il browser è effettivamente in grado di iniziare a elaborare i gestori di eventi in risposta a questa interazione. Un sito che esegue codice JavaScript costoso avrà probabilmente diverse attività lunghe, che potrebbero avere un impatto negativo sul FID.
Per offrire una buona esperienza utente, i siti devono fare in modo che il ritardo di primo input sia inferiore a 100 millisecondi:
Sebbene il sito di Mercado Libre avesse buone prestazioni nella maggior parte delle sezioni, nel report sull'esperienza utente di Chrome l'azienda ha rilevato che le pagine dei dettagli dei prodotti avevano un FID scadente. Sulla base di queste informazioni, ha deciso di concentrare i propri sforzi sul miglioramento dell'interattività delle pagine dei prodotti nel sito.
Queste pagine consentono all'utente di eseguire interazioni complesse, per cui l'obiettivo era l'ottimizzazione dell'interattività, senza interferire con funzionalità preziose.
Misurare l'interattività delle pagine dei dettagli dei prodotti
Il valore FID richiede un utente reale, pertanto non può essere misurato in laboratorio. Tuttavia, la metrica Tempo di blocco totale (TBT) è misurabile in lab, è ben correlata con il FID sul campo e acquisisce anche i problemi che influiscono sull'interattività.
Nella traccia seguente, ad esempio, mentre il tempo totale trascorso per l'esecuzione delle attività sul thread principale è pari a 560 ms, solo 345 ms di quel periodo sono considerati tempo di blocco totale (la somma delle parti di ogni attività che supera i 50 ms):
Mercado Libre ha utilizzato TBT come metrica proxy nel lab per misurare e migliorare l'interattività delle pagine dei dettagli dei prodotti nel mondo reale.
Ecco l'approccio generale che hanno adottato:
- Utilizza WebPageTest per determinare esattamente quali script tengono occupato il thread principale su un dispositivo reale.
- Usa Lighthouse per determinare l'impatto delle modifiche in Max Potential First Input Delay (Max Potential FID).
Usa WebPageTest per visualizzare attività lunghe
WebPageTest (WPT) è uno strumento per le prestazioni web che consente di eseguire test su dispositivi reali in diverse località del mondo.
Mercado Libre ha utilizzato WPT per riprodurre l'esperienza degli utenti scegliendo un tipo di dispositivo e una posizione simili a quelli degli utenti reali. In particolare, ha scelto un dispositivo Moto 4G e Dulles, Virginia, perché volevano avvicinarsi all'esperienza degli utenti di Mercado Libre in Messico. Osservando la visualizzazione thread principale di WPT, Mercado Libre ha rilevato che c'erano diverse attività lunghe consecutive che bloccavano il thread principale per due secondi:
Analizzando la struttura a cascata corrispondente, hanno scoperto che una parte considerevole di questi due secondi proveniva dal modulo di analisi. Le dimensioni principali del bundle dell'applicazione erano ampie (950 kB) e l'analisi, la compilazione e l'esecuzione richiedevano molto tempo.
Usa Lighthouse per determinare il valore FID massimo potenziale
Lighthouse non consente di scegliere tra diversi dispositivi e posizioni, ma è uno strumento molto utile per diagnosticare i siti e ottenere consigli sul rendimento.
Durante l'esecuzione di Lighthouse sulle pagine dei dettagli del prodotto, Mercado Libre ha rilevato che il FID massimo potenziale era l'unica metrica contrassegnata in rosso, con un valore di 1710 ms.
Sulla base di questi dati, Mercado Libre ha fissato l'obiettivo di migliorare il punteggio FID massimo in uno strumento di laboratorio come Lighthouse e WebPageTest, supponendo che questi miglioramenti influirebbero sugli utenti reali e, pertanto, verranno visualizzati in strumenti di monitoraggio degli utenti reali come il report sull'esperienza utente di Chrome.
Ottimizza le attività lunghe
Prima iterazione
In base all'analisi del thread principale, Mercado Libre ha impostato l'obiettivo di ottimizzare i due moduli che eseguivano codice costoso.
Ha iniziato a ottimizzare le prestazioni del modulo di monitoraggio interno. Questo modulo conteneva un'attività ad alta intensità di CPU che non era fondamentale per il funzionamento del modulo, quindi potrebbe essere rimosso in sicurezza. Ciò ha portato a una riduzione del 2% di JavaScript per l'intero sito.
Dopodiché, l'azienda ha iniziato a lavorare sul miglioramento delle dimensioni generali del bundle:
Mercado Libre ha utilizzato webpack-bundle-analyzer per rilevare le opportunità di ottimizzazione:
- Inizialmente richiedevano il modulo Lodash completo. Questo è stato sostituito con un requisito per metodo di caricamento solo di un sottoinsieme di Lodash anziché dell'intera libreria e utilizzato in combinazione con lodash-webpack-plugin per ridurre ulteriormente Lodash.
Hanno anche applicato le seguenti ottimizzazioni di Babel:
- Utilizzare @babel/plugin-transform-runtime per riutilizzare gli aiutanti di Babel nell'intero codice e ridurre notevolmente le dimensioni del bundle.
- Utilizzo di babel-plugin-search-and-replace per sostituire i token in fase di compilazione, rimuovendo un file di configurazione di grandi dimensioni all'interno del bundle principale.
- Aggiungi babel-plugin-transform-react-remove-prop-types per risparmiare qualche byte in più rimuovendo i tipi di oggetti Pro.
Grazie a queste ottimizzazioni, le dimensioni del bundle si sono ridotte di circa il 16%.
Misura l'impatto
In seguito a queste modifiche, le attività lunghe consecutive di Mercado Libre da due secondi a un secondo sono:
Lighthouse ha mostrato una riduzione del 57% del valore Max Potential First Input Delay:
Seconda iterazione
Il team ha continuato ad analizzare a fondo attività lunghe per trovare miglioramenti successivi.
Sulla base di queste informazioni, l'azienda ha deciso di implementare le seguenti modifiche:
- Continua a ridurre le dimensioni del bundle principale per ottimizzare i tempi di compilazione e analisi (ad esempio rimuovendo le dipendenze duplicate nei diversi moduli).
- Applica la suddivisione del codice a livello di componente per suddividere JavaScript in parti più piccole e consentire un caricamento più intelligente dei diversi componenti.
- Rimanda l'idratazione dei componenti per utilizzare in modo più intelligente il thread principale. Questa tecnica è comunemente nota come idratazione parziale.
Misura l'impatto
L'analisi WebPageTest risultante ha mostrato blocchi ancora più piccoli di esecuzione JS:
Inoltre, il tempo FID potenziale massimo in Lighthouse è stato ridotto di un ulteriore 60%:
Visualizza i progressi degli utenti reali
Sebbene strumenti di test di laboratorio come WebPageTest e Lighthouse siano ottimi per l'iterazione delle soluzioni durante lo sviluppo, il vero obiettivo è migliorare l'esperienza degli utenti reali.
Il Report sull'esperienza utente di Chrome fornisce metriche relative all'esperienza utente relative all'esperienza degli utenti di Chrome reali per le destinazioni più frequenti sul web. I dati del report possono essere ottenuti eseguendo query in BigQuery, PageSpeedInsights o l'API CrUX.
La dashboard di CrUX è un modo semplice per visualizzare l'avanzamento delle metriche principali:
Passaggi successivi
Il rendimento sul web non è mai un'attività terminata e Mercado Libre comprende il valore che queste ottimizzazioni apportano agli utenti. Continuando ad applicare diverse ottimizzazioni al sito, tra cui il precaricamento nelle pagine delle schede del prodotto, le ottimizzazioni delle immagini e altro ancora, continuano ad aggiungere miglioramenti alle pagine delle schede di prodotto per ridurre il tempo di blocco totale (TBT), nonché tramite FID proxy e molto altro. Queste ottimizzazioni includono:
- iterazione della soluzione di suddivisione del codice.
- Miglioramento dell'esecuzione di script di terze parti.
- Miglioramenti costanti nel raggruppamento degli asset a livello di bundle (webpack).
Mercado Libre ha una visione olistica delle prestazioni e, pur continuando a ottimizzare l'interattività nel sito, ha anche iniziato a valutare le opportunità di miglioramento degli altri due attuali Segnali web essenziali: LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift) ancora di più.