Ottimizzazione dell'interattività delle pagine dei dettagli dei prodotti per una riduzione del 90% del FID potenziale massimo in Lighthouse e un miglioramento del 9% del FID nel Report sull'esperienza utente di Chrome.
Mercado Libre è il più grande ecosistema di e-commerce e pagamenti in America Latina. È presente in 18 paesi ed è leader di mercato in Brasile, Messico e Argentina (in base ai visitatori unici e alle visualizzazioni di pagina).
Il rendimento web è stato un punto di forza dell'azienda per molto tempo, ma di recente è stato formato un team per monitorare il rendimento e applicare le ottimizzazioni alle varie parti del sito.
Questo articolo riassume il lavoro svolto da Guille Paz, Pablo Carminatti e Oleh Burkhay del team di architettura frontend di Mercado Libre per ottimizzare uno dei Core Web Vitals: First Input Delay (FID) e il relativo proxy di laboratorio, Total Blocking Time (TBT).
90%
Riduzione dell'RPI potenziale massimo in Lighthouse
9%
Più utenti che percepiscono l'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.
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 gli elaboratori di eventi in risposta a quell'interazione. Un sito che esegue codice JavaScript costoso probabilmente avrà diverse attività lunghe, che finiranno per influire negativamente sul FID.
Per offrire una buona esperienza utente, i siti dovrebbero fare in modo che il valore First Input Delay sia inferiore a 100
millisecondi:
Sebbene il sito di Mercado Libre avesse un buon rendimento nella maggior parte delle sezioni, nel Chrome User Experience Report è stato rilevato che le pagine dei dettagli dei prodotti avevano un FID scarso. Sulla base di queste informazioni, ha deciso di concentrare i propri sforzi sul miglioramento dell'interattività delle pagine dei prodotti del sito.
Queste pagine consentono all'utente di eseguire interazioni complesse, quindi l'obiettivo era ottimizzare l'interattività senza interferire con funzionalità importanti.
Misurare l'interattività delle pagine dei dettagli del prodotto
Il FID richiede un utente reale e pertanto non può essere misurato in laboratorio. Tuttavia, la metrica Total Blocking Time (TBT) è misurabile in laboratorio, ha una buona correlazione con il FID sul campo e rileva anche i problemi che influiscono sull'interattività.
Nella traccia seguente, ad esempio, mentre il tempo totale impiegato per l'esecuzione delle attività sul thread principale è di 560 ms, solo 345 ms di questo tempo sono considerati tempo di blocco totale (la somma delle parti di ogni attività che superano i 50 ms):
Mercado Libre ha utilizzato il TBT come metrica proxy in laboratorio per misurare e migliorare l'interattività delle pagine dei dettagli dei prodotti nel mondo reale.
Ecco l'approccio generale adottato:
- Utilizza WebPageTest per determinare esattamente quali script tengono occupato il thread principale su un dispositivo reale.
- Utilizza Lighthouse per determinare l'impatto delle modifiche al First Input Delay potenziale max (FID potenziale max).
Utilizzare WebPageTest per visualizzare le attività lunghe
WebPageTest (WPT) è uno strumento per il rendimento web che consente di eseguire test su dispositivi reali in diverse località in tutto il mondo.
Mercado Libre ha utilizzato WPT per riprodurre l'esperienza dei propri utenti scegliendo un tipo di dispositivo e una località simili a quelli degli utenti reali. Nello specifico, ha scelto un dispositivo Moto 4G e Dulles, Virginia, perché voleva approssimare l'esperienza degli utenti di Mercado Libre in Messico. Osservando la visualizzazione del thread principale di WPT, Mercado Libre ha rilevato che erano presenti diverse attività lunghe consecutive che bloccavano il thread principale per 2 secondi:
Analizzando la struttura a cascata corrispondente, ha scoperto che gran parte di questi due secondi proveniva dal modulo di analisi. Il bundle principale dell'applicazione era di grandi dimensioni (950 KB) e richiedeva molto tempo per l'analisi, la compilazione e l'esecuzione.
Utilizzare Lighthouse per determinare il RPI potenziale massimo
Lighthouse non ti consente di scegliere tra dispositivi e località diversi, ma è uno strumento molto utile per diagnosticare i siti e ottenere consigli sul rendimento.
Quando ha eseguito Lighthouse sulle pagine dei dettagli dei prodotti, Mercado Libre ha riscontrato che l'FID massimo potenziale era l'unica metrica contrassegnata in rosso, con un valore di 1710 ms.
In base a questo, Mercado Libre si è prefissato l'obiettivo di migliorare il proprio punteggio FID massimo potenziale in uno strumento di laboratorio come Lighthouse e WebPageTest, supponendo che questi miglioramenti influiscano sui suoi utenti reali e, di conseguenza, vengano visualizzati in strumenti di monitoraggio degli utenti reali come il Report sull'esperienza utente di Chrome.
Ottimizzare le attività lunghe
Prima iterazione
In base alla traccia del thread principale, Mercado Libre si è prefissato l'obiettivo di ottimizzare i due moduli che eseguivano codice costoso.
Ha iniziato a ottimizzare il rendimento del modulo di monitoraggio interno. Questo modulo conteneva un'attività che richiedeva molta CPU, ma non era fondamentale per il funzionamento del modulo e quindi poteva essere rimossa in sicurezza. Ciò ha comportato una riduzione del 2% di JavaScript per l'intero sito.
Dopodiché ha iniziato a lavorare al miglioramento delle dimensioni generali del bundle:
Mercado Libre ha utilizzato webpack-bundle-analyzer per rilevare opportunità di ottimizzazione:
- Inizialmente era richiesto il modulo Lodash completo. È stato sostituito con un require per metodo per caricare solo un sottoinsieme di Lodash anziché l'intera libreria e utilizzato in combinazione con lodash-webpack-plugin per ridurre ulteriormente Lodash.
Inoltre, ha applicato le seguenti ottimizzazioni di Babel:
- Utilizza @babel/plugin-transform-runtime per riutilizzare gli aiuti di Babel in tutto il codice e ridurre notevolmente le dimensioni del bundle.
- Utilizzo di babel-plugin-search-and-replace per sostituire i token al momento della compilazione, in modo da rimuovere un file di configurazione di grandi dimensioni all'interno del bundle principale.
- Aggiunta di babel-plugin-transform-react-remove-prop-types per risparmiare qualche byte in più rimuovendo i tipi di prop.
A seguito di queste ottimizzazioni, le dimensioni del bundle sono state ridotte di circa il 16%.
Misurare l'impatto
Le modifiche hanno ridotto le attività lunghe consecutive di Mercado Libre da due secondi a un secondo:
Lighthouse ha mostrato una riduzione del 57% del First Input Delay potenziale max:
Seconda iterazione
Il team ha continuato a esaminare le attività lunghe per trovare ulteriori miglioramenti.
In base a queste informazioni, ha deciso di implementare le seguenti modifiche:
- Continua a ridurre le dimensioni del bundle principale per ottimizzare i tempi di compilazione e analisi (ad es. rimuovendo le dipendenze duplicate nei diversi moduli).
- Applica la suddivisione del codice a livello di componente per suddividere il codice JavaScript in blocchi più piccoli e consentire un caricamento più intelligente dei diversi componenti.
- Ritarda l'idratazione dei componenti per consentire un utilizzo più intelligente del thread principale. Questa tecnica è comunemente nota come idratazione parziale.
Misurare l'impatto
La traccia WebPageTest risultante ha mostrato parti di esecuzione JS ancora più piccole:
Inoltre, il tempo RPI potenziale massimo in Lighthouse è stato ridotto di un ulteriore 60%:
Visualizzare l'avanzamento per gli utenti reali
Sebbene gli strumenti di test di laboratorio come WebPageTest e Lighthouse siano ottimi per eseguire l'iterazione delle soluzioni durante lo sviluppo, l'obiettivo principale è migliorare l'esperienza per gli utenti reali.
Il Report sull'esperienza utente di Chrome fornisce metriche sull'esperienza utente relative al modo in cui gli utenti reali di Chrome trovano le destinazioni più frequenti sul web. I dati del report possono essere ottenuti eseguendo query in BigQuery, PageSpeedInsights o nell'API CrUX.
La dashboard CrUX è un modo semplice per visualizzare l'avanzamento delle metriche principali:
Passaggi successivi
Il rendimento del web non è mai un'attività completata e Mercado Libre comprende il valore che queste ottimizzazioni apportano ai propri utenti. Mentre continuano ad applicare diverse ottimizzazioni al sito, tra cui il prefetching nelle pagine delle schede di prodotto, le ottimizzazioni delle immagini e altre, continuano ad aggiungere miglioramenti alle pagine delle schede di prodotto per ridurre ulteriormente il tempo di blocco totale (TBT) e, per estensione, il FID. Queste ottimizzazioni includono:
- Iterazione sulla soluzione di suddivisione del codice.
- Miglioramento dell'esecuzione degli script di terze parti.
- Miglioramenti continui al bundling degli asset a livello di bundler (webpack).
Mercado Libre ha una visione olistica del rendimento, quindi, pur continuando a ottimizzare l'interattività sul sito, ha anche iniziato a valutare le opportunità di miglioramento per le altre due attuali metriche Core Web Vitals: LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift).