Ottimizzazione del rendimento dei siti e delle app di eBay per un'esperienza utente più rapida.
La velocità è stata un'iniziativa a livello di azienda per eBay nel 2019, con molti team determinati a rendere il sito e le app il più veloci possibile per gli utenti. Infatti, per ogni miglioramento di 100 millisecondi nel tempo di caricamento delle pagine di ricerca, eBay ha registrato un aumento dello 0,5% per il numero di azioni "Aggiungi al carrello".
100ms
Miglioramento del tempo di caricamento
0,5%
Aumento del conteggio di "Aggiungi al carrello"
Grazie all'adozione dei budget di rendimento (derivati da un studi di benchmarking con il Report sull'esperienza utente di Chrome) e all'attenzione alle metriche sul rendimento incentrate sull'utente, eBay è riuscita a apportare miglioramenti significativi alla velocità del sito.
…e i dati del Report sull'esperienza utente di Chrome mostrano anche questi miglioramenti.
C'è ancora molto da fare, ma ecco cosa ha appreso eBay finora.
"Tagli" alle prestazioni web
I miglioramenti apportati da eBay sono stati possibili grazie alla riduzione o ai "tagli" (in termini di dimensioni e tempo) di varie entità che fanno parte del percorso di un utente. Questo post tratta argomenti pertinenti per la community degli sviluppatori web in generale, anziché argomenti specifici di eBay.
Riduci il payload in tutte le risorse di testo
Un modo per velocizzare i siti è semplicemente caricare meno codice. eBay ha ridotto i payload di testo eliminando tutti i byte inutilizzati e non necessari delle risposte JavaScript, CSS, HTML e JSON fornite agli utenti. In precedenza, con ogni nuova funzionalità, eBay continuava ad aumentare il payload delle risposte, senza ripulire gli elementi inutilizzati. Nel tempo, questo ha costituito un collo di bottiglia per le prestazioni. I team di solito procrastinavano questa attività di pulizia, ma rimarresti stupito da quanto eBay ha risparmiato.
Per "taglio" si intendono i byte sprecati nel payload della risposta.
Ottimizzazione del percorso critico per i contenuti nella parte visibile della pagina
Non tutti i pixel sullo schermo sono ugualmente importanti. I contenuti above-the-fold sono più critici di quelli below-the-fold. Le app web e per iOS/Android/computer lo sanno, ma che dire dei servizi? L'architettura di servizio di eBay ha un livello chiamato Experience Services con cui comunicano i frontend (app e server web specifici della piattaforma). Questo livello è progettato specificamente per essere basato su visualizzazioni o dispositivi, anziché su entità come articolo, utente o ordine. eBay ha poi introdotto il concetto di percorso critico per Experience Services. Quando arriva una richiesta a questi servizi, questi si impegnano a recuperare immediatamente i dati per i contenuti in primo piano, chiamando in parallelo altri servizi a monte. Una volta pronti, i dati vengono svuotati immediatamente. I dati sotto la piega vengono inviati in un secondo momento o caricati in modo lazy. Il risultato: gli utenti possono vedere più rapidamente i contenuti della parte visibile della pagina.
Per "taglio" si intende il tempo impiegato dai servizi per mostrare contenuti pertinenti.
Ottimizzazioni delle immagini
Le immagini sono uno dei fattori che contribuiscono maggiormente al bloated. Anche piccole ottimizzazioni possono fare molto. eBay ha eseguito due ottimizzazioni per le immagini.
Innanzitutto, eBay ha standardizzato il formato immagine WebP per i risultati di ricerca su tutte le piattaforme, inclusi iOS, Android e i browser supportati. La pagina dei risultati di ricerca è la pagina con più immagini di eBay e utilizzava già WebP, ma non in modo coerente.
In secondo luogo, anche se le immagini delle schede di eBay sono molto ottimizzate (in termini di dimensioni e formato), lo stesso rigore non è stato applicato alle immagini selezionate (ad esempio il modulo in alto nella home page). eBay ha molte immagini selezionate manualmente, che vengono caricate tramite vari strumenti. In precedenza, le ottimizzazioni erano a carico dell'utente che caricava le immagini, ma ora eBay applica le regole all'interno degli strumenti, quindi tutte le immagini caricate verranno ottimizzate di conseguenza.
Per "taglio" si intendono i byte delle immagini sprecati inviati agli utenti.
Precaricamento predittivo degli asset statici
Una sessione utente su eBay non è costituita da una sola pagina. Si tratta di un flusso. Ad esempio, il flusso può essere una navigazione dalla home page a una pagina di ricerca a una pagina di un articolo. Perché le pagine del flusso non si aiutano a vicenda? Questa è l'idea del prefetching predittivo, in cui una pagina esegue il prefetching degli asset statici richiesti per la pagina successiva probabile.
Con il pre-caricamento predittivo, quando un utente accede alla pagina prevista, gli asset sono già nella cache del browser. Questo viene fatto per gli asset CSS e JavaScript, in cui gli URL possono essere recuperati in anticipo. Tieni presente che questa opzione è utile solo per le prime navigazioni. Nelle navigazioni successive, le risorse statiche saranno già nella cache.
Il "taglio" qui è il tempo di rete per gli asset statici CSS e JavaScript alla prima navigazione.
Precaricamento dei risultati di ricerca principali
Quando un utente effettua ricerche su eBay, i dati di analisi di eBay suggeriscono che è molto probabile che l'utente acceda a un articolo tra i primi 10 risultati di ricerca. Ora eBay esegue il pre-caricamento degli articoli dalla ricerca e li tiene pronti per quando l'utente naviga. Il pre-caricamento avviene a due livelli.
Il primo livello avviene lato server, dove il servizio di articoli memorizza nella cache i 10 elementi principali nei risultati di ricerca. Quando l'utente visita uno di questi articoli, eBay ora risparmia tempo di elaborazione del server. La memorizzazione nella cache lato server viene sfruttata dalle app specifiche per la piattaforma ed è implementata a livello globale.
L'altro livello si verifica nella cache del browser, che è disponibile in Australia. Il precaricamento degli elementi era un'ottimizzazione avanzata a causa della natura dinamica degli elementi. Esistono anche molte sfumature: impressioni di pagina, capacità, articoli dell'asta e così via. Scopri di più nella presentazione del Meetup di LinkedIn sull'ingegneria del rendimento o continua a seguirci per un post dettagliato sul blog degli ingegneri di eBay sull'argomento.
Il "taglio" qui può essere il tempo di elaborazione del server o il tempo di rete, a seconda di dove viene memorizzata nella cache l'elemento.
Download anticipato delle immagini di ricerca
Nella pagina dei risultati di ricerca, quando viene eseguita una query a livello generale, si verificano due cose. Uno è il passaggio di recupero/classificazione, in cui vengono restituiti gli elementi più pertinenti corrispondenti alla query. Il secondo passaggio consiste nell'aumentare gli articoli richiamati con ulteriori informazioni relative al contesto dell'utente, come i costi di spedizione. Ora eBay invia immediatamente le prime 10 immagini degli articoli al browser in un chunk insieme all'intestazione, in modo che i download possano iniziare prima dell'arrivo del resto del markup. Di conseguenza, le immagini verranno visualizzate più velocemente. Questa modifica viene implementata a livello globale per la piattaforma web.
Il "taglio" qui è l'ora di inizio del download delle immagini dei risultati di ricerca.
Memorizzazione in una cache perimetrale per i dati di autocompletamento
Quando gli utenti digitano lettere nella casella di ricerca, vengono visualizzati i suggerimenti. Questi suggerimenti non cambiano per le combinazioni di lettere per almeno un giorno. Sono candidati ideali per essere memorizzati nella cache e pubblicati da una CDN (per un massimo di 24 ore), anziché inviare le richieste a un data center. I mercati internazionali traggono particolare vantaggio dalla memorizzazione nella cache CDN.
Tuttavia, c'era un problema. eBay aveva alcuni elementi di personalizzazione nel popup dei suggerimenti, che non possono essere memorizzati nella cache in modo efficiente. Fortunatamente, non si è trattato di un problema nelle app specifiche della piattaforma, in quanto l'interfaccia utente per la personalizzazione e i suggerimenti poteva essere separata. Per il web, nei mercati internazionali, la latenza era più importante del piccolo vantaggio della personalizzazione. Ora eBay offre suggerimenti automatici pubblicati da una cache CDN a livello globale per le app specifiche della piattaforma e per i mercati al di fuori degli Stati Uniti per eBay.com.
Il "taglio" qui è la latenza della rete e il tempo di elaborazione del server per i suggerimenti automatici.
Memorizzazione in una cache perimetrale per gli utenti della home page non riconosciuti
Per la piattaforma web, i contenuti della home page per gli utenti non riconosciuti sono gli stessi per una determinata regione. Si tratta di utenti che utilizzano eBay per la prima volta o che avviano una nuova sessione, quindi non è prevista alcuna personalizzazione. Sebbene le creatività della home page continuino a cambiare di frequente, c'è ancora spazio per la memorizzazione nella cache.
eBay ha deciso di memorizzare nella cache i contenuti degli utenti non riconosciuti (HTML) sulla propria rete di edge (PoPs) per un breve periodo. Ora gli utenti che visitano eBay per la prima volta possono visualizzare i contenuti della home page da un server vicino, anziché da un data center lontano. eBay sta ancora sperimentando questa funzionalità nei mercati internazionali, dove avrà un impatto maggiore.
Il "taglio" qui riguarda ancora la latenza della rete e il tempo di elaborazione del server per gli utenti non riconosciuti.
Ottimizzazioni per altre piattaforme
Miglioramenti all'analisi delle app per iOS/Android
Le app per iOS/Android comunicano con servizi di backend il cui formato di risposta è in genere JSON. Questi payload JSON possono essere di grandi dimensioni. Invece di analizzare l'intero JSON per visualizzare qualcosa sullo schermo, eBay ha introdotto un algoritmo di analisi efficiente che ottimizza i contenuti che devono essere visualizzati immediatamente.
Ora gli utenti possono visualizzare i contenuti più rapidamente. Inoltre, per l'app per Android, eBay inizia a inizializzare i controller della visualizzazione della ricerca non appena l'utente inizia a digitare nella casella di ricerca (iOS aveva già questa ottimizzazione). In precedenza, ciò accadeva solo dopo che gli utenti avevano premuto il pulsante di ricerca. Ora gli utenti possono accedere ai risultati di ricerca più rapidamente. Per "taglio" si intende il tempo impiegato dai dispositivi per visualizzare contenuti pertinenti.
Miglioramenti ai tempi di avvio delle app per Android
Questo vale per le ottimizzazioni del tempo di avvio a freddo per le app per Android. Quando un'app viene avviata a freddo, vengono eseguite molte operazioni di inizializzazione sia a livello di sistema operativo che di applicazione. La riduzione del tempo di inizializzazione a livello di applicazione consente agli utenti di vedere più rapidamente la schermata Home. eBay ha eseguito alcuni profili e ha notato che non tutte le inizializzazioni sono necessarie per visualizzare i contenuti e che alcune possono essere eseguite in modo lazy.
Ancora più importante, eBay ha rilevato una chiamata di analisi di terze parti che bloccava il rendering sullo schermo. La rimozione della chiamata di blocco e la sua esecuzione in modalità asincrona hanno ulteriormente ridotto i tempi di avvio a freddo. Il "taglio" qui è il tempo di avvio non necessario per le app per Android.
Conclusioni
Tutti i "tagli" al rendimento apportati da eBay hanno contribuito collettivamente a far avanzare la situazione e questo è avvenuto in un periodo di tempo. Le release sono state implementate gradualmente nel corso dell'anno, con ogni release che ha consentito di risparmiare decine di millisecondi, fino a raggiungere il punto in cui si trova ora eBay:
Il rendimento è una funzionalità e un vantaggio competitivo. Le esperienze ottimizzate generano un maggiore coinvolgimento degli utenti, un aumento delle conversioni e del ROI. Nel caso di eBay, queste ottimizzazioni variavano da quelle che richiedevano poco impegno a quelle avanzate.
Per saperne di più, consulta l'articolo Aumentare la velocità con mille tagli e tieni d'occhio gli articoli più dettagliati degli ingegneri di eBay sul loro lavoro per migliorare il rendimento nel prossimo futuro.