Ottimizzazione delle prestazioni dei siti e delle app di eBay per un'esperienza utente più rapida.
La velocità è stata un'iniziativa a livello aziendale per eBay nel 2019, con molti team determinati a rendere il sito e le app il più veloce possibile per gli utenti. Infatti, per ogni miglioramento di 100 millisecondi nel tempo di caricamento della pagina di ricerca, eBay ha registrato un aumento dello 0,5% del conteggio "Aggiungi al carrello".
100ms
Miglioramento del tempo di caricamento
0,5%
Aumento del numero di "Aggiungi al carrello"
Attraverso l'adozione dei budget del rendimento (derivanti dopo uno studio sulla concorrenza con il Report sull'esperienza utente di Chrome) e l'attenzione alle principali metriche sulle prestazioni incentrate sull'utente, eBay è stata in grado di apportare miglioramenti significativi alla velocità del sito.
...e i dati del Report sull'esperienza utente di Chrome evidenziano anche questi miglioramenti.
C'è ancora molto lavoro da fare, ma ecco quello che ha appreso eBay finora.
Il rendimento web "interrompe"
I miglioramenti apportati da eBay sono stati possibili grazie alla riduzione o ai "tagli" (nelle dimensioni e nel tempo) di varie entità che prendono parte al percorso di un utente. Questo post tratta argomenti rilevanti per la community di sviluppatori web in generale, piuttosto che 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 riducendo 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 carico utile delle risposte, senza ripulire ciò che non veniva utilizzato. Con il passare del tempo, questo aspetto si è rivelato un collo di bottiglia. I team di solito posticipavano le attività di pulizia, ma saresti sorpreso dalla quantità di soldi risparmiati da eBay.
Il "taglio" qui è lo spreco di byte nel payload di risposta.
Ottimizzazione del percorso critico per i contenuti above the fold
Non tutti i pixel sullo schermo sono ugualmente importanti. I contenuti above the fold sono più importanti di quelli below the fold. Le app per iOS/Android/desktop e web ne sono consapevoli, ma per quanto riguarda i servizi? L'architettura dei servizi di eBay ha un livello chiamato Experience Services, con cui parlano i frontend (app e server web specifici della piattaforma). Questo livello è specificamente progettato per essere basato sulle visualizzazioni o sul dispositivo, anziché sulle entità, come l'articolo, l'utente o l'ordine. eBay ha poi introdotto il concetto di percorso critico per i servizi per l'esperienza. Quando arrivano una richiesta, questi servizi lavorano per recuperare immediatamente i dati relativi ai contenuti above the fold, chiamando altri servizi upstream in parallelo. Quando i dati sono pronti, vengono immediatamente svuotati. I dati below the fold vengono inviati in un blocco successivo o con caricamento lento. Il risultato è che gli utenti visualizzano i contenuti above the fold più velocemente.
Il "taglio" qui è il tempo impiegato dai servizi per visualizzare i contenuti pertinenti.
Ottimizzazioni delle immagini
Le immagini sono uno dei fattori più determinanti per il aumento delle pagine. Anche le piccole ottimizzazioni possono fare la differenza. eBay ha fatto due ottimizzazioni per le immagini:
Innanzitutto, eBay ha standardizzato il formato dell'immagine WebP per i risultati di ricerca su tutte le piattaforme, tra cui iOS, Android e i browser supportati. La pagina dei risultati di ricerca è la pagina con più immagini su eBay: l'utente stava già utilizzando WebP, ma non con uno schema coerente.
In secondo luogo, anche se le immagini delle schede di eBay sono molto ottimizzate (sia nelle dimensioni che nel formato), lo stesso rigore non valeva per le immagini selezionate (ad esempio il modulo superiore sulla home page). eBay ha molte immagini selezionate a mano, che vengono caricate tramite vari strumenti. In precedenza le ottimizzazioni erano di competenza dell'utente che carica video, ma ora eBay applica le regole all'interno degli strumenti, in modo che tutte le immagini caricate vengano ottimizzate in modo appropriato.
Il "taglia" qui è lo spreco di byte delle immagini inviati agli utenti.
Precaricamento predittivo degli asset statici
Una sessione utente su eBay non è solo una pagina. È un flusso. Ad esempio, il flusso può essere una navigazione dalla home page a una pagina di ricerca e alla pagina di un articolo. Allora perché le pagine nel flusso non si aiutano a vicenda? Questa è l'idea del precaricamento predittivo, in base al quale una pagina precarica gli asset statici richiesti per la probabile pagina successiva.
Con il precaricamento predittivo, quando un utente accede alla pagina prevista, gli asset sono già nella cache del browser. Questa operazione viene eseguita per gli asset CSS e JavaScript, dove gli URL possono essere recuperati in anticipo. Una cosa da notare è che questa funzionalità è utile solo per le prime navigazioni. Nelle navigazioni successive, gli asset statici saranno già nella cache.
Il "cut" è il tempo impiegato dalla rete per gli asset statici CSS e JavaScript nella prima navigazione.
Precaricamento dei risultati di ricerca principali
Quando un utente esegue una ricerca su eBay, i dati analitici di eBay suggeriscono che è molto probabile che l'utente possa accedere a un elemento tra i primi 10 risultati di ricerca. eBay ora precarica gli articoli dalla ricerca e li mantiene pronti per la navigazione. Il precaricamento avviene a due livelli.
Il primo livello si verifica sul lato server, in cui il servizio elementi memorizza nella cache i primi 10 elementi nei risultati di ricerca. Quando l'utente accede a uno di questi articoli, eBay fa risparmiare tempo all'elaborazione del server. La memorizzazione nella cache lato server viene sfruttata da app specifiche della piattaforma ed è implementata a livello globale.
L'altro livello si trova nella cache del browser, disponibile in Australia. Il precaricamento degli elementi era un'ottimizzazione avanzata dovuta alla natura dinamica degli elementi. Inoltre, presenta molte sfumature: impressioni sulla pagina, capacità, articoli di aste e così via. Puoi scoprire di più nella presentazione del Meetup Performance Engineering di LinkedIn oppure puoi rimanere sintonizzato per un post dettagliato del blog sull'argomento da parte degli ingegneri di eBay.
Il "taglia" qui può essere tempo di elaborazione del server o tempo di rete, a seconda di dove è memorizzato l'elemento nella cache.
Download delle immagini cercate
Nella pagina dei risultati di ricerca, quando viene eseguita una query ad alto livello, si verificano due cose. Uno è il passaggio di richiamo/ranking, in cui vengono restituiti gli elementi più rilevanti corrispondenti alla query. Il secondo passaggio consiste nell'aggiungere gli articoli richiamati con ulteriori informazioni correlate al contesto dell'utente, come i costi di spedizione. eBay ora invia immediatamente le prime 10 immagini degli articoli al browser in un blocco insieme all'intestazione, in modo che i download possano iniziare prima che arrivi il resto del markup. Di conseguenza, le immagini verranno visualizzate più velocemente. Questa modifica è stata implementata a livello globale per la piattaforma web.
Il "taglia" qui è l'ora di inizio del download per le immagini dei risultati di ricerca.
Memorizzazione in una cache perimetrale per i dati dei suggerimenti automatici
Quando gli utenti digitano lettere nella casella di ricerca, vengono visualizzati dei suggerimenti. Questi suggerimenti non cambiano per le combinazioni di lettere per almeno un giorno. Sono candidati ideali per la memorizzazione nella cache e la pubblicazione da una rete CDN (per un massimo di 24 ore), anziché per le richieste che arrivano fino a un data center. I mercati internazionali traggono vantaggio dalla memorizzazione nella cache CDN.
C'è stato un problema, però. Il popup dei suggerimenti di eBay ha alcuni elementi di personalizzazione che non possono essere memorizzati nella cache in modo efficiente. Fortunatamente, non si trattava di un problema nelle app specifiche della piattaforma, poiché l'interfaccia utente per la personalizzazione e i suggerimenti potevano essere separati. Per il web, nei mercati internazionali, la latenza era più importante del piccolo vantaggio della personalizzazione. Detto ciò, eBay ora offre suggerimenti automatici da una cache CDN a livello globale per app specifiche della piattaforma e mercati al di fuori degli Stati Uniti per eBay.com.
Il "taglia" qui è la latenza di 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 regione specifica. Si tratta di utenti che utilizzano eBay per la prima volta o avviano una nuova sessione, quindi nessuna personalizzazione. Sebbene le creatività della home page continuino a cambiare spesso, 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 perimetrale (PoPs) per un breve periodo di tempo. I nuovi utenti possono ora ricevere i contenuti della home page da un server nelle vicinanze, anziché da un data center lontano. eBay sta ancora sperimentando questa funzionalità nei mercati internazionali, dove avrà un impatto maggiore.
Il "taglio" qui è rappresentato sia dalla latenza di rete sia dal 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 i servizi di backend il cui formato di risposta è generalmente JSON. Questi payload JSON possono essere di grandi dimensioni. Anziché analizzare l'intero JSON per visualizzare i contenuti sullo schermo, eBay ha introdotto un efficiente algoritmo di analisi che ottimizza i contenuti che devono essere visualizzati immediatamente.
Ora gli utenti possono visualizzare i contenuti più velocemente. Inoltre, per l'app per Android, eBay inizia a inizializzare i controller di visualizzazione della ricerca non appena l'utente inizia a digitare nella casella di ricerca (iOS dispone già di questa ottimizzazione). In precedenza, questo accadeva solo dopo che gli utenti avevano premuto il pulsante di ricerca. Ora gli utenti possono raggiungere più velocemente i risultati di ricerca. Il "taglio" qui è il tempo impiegato dai dispositivi per visualizzare i contenuti pertinenti.
Miglioramenti del tempo di avvio dell'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, avviene molte inizializzazioni sia a livello di sistema operativo che di applicazione. La riduzione del tempo di inizializzazione a livello di applicazione consente agli utenti di visualizzare la schermata Home più rapidamente. eBay ha eseguito alcune operazioni di profilazione e ha notato che non tutte le inizializzazioni sono necessarie per visualizzare i contenuti e che alcune possono essere eseguite in modo pigro.
Ancora più importante, eBay ha osservato che c'era una chiamata di blocco dell'analisi di terze parti che ritardava il rendering sullo schermo. Rimuovere la chiamata di blocco e renderla asincrona ha ulteriormente contribuito ai tempi di avvio a freddo. Il "taglia" qui è il tempo di avvio superfluo per le app Android.
Conclusioni
Tutti i "riduzioni" in termini di rendimento messi insieme da eBay hanno contribuito a spostare l'ago della bilancia, e questo è successo in un certo periodo di tempo. Le release sono state progressivamente inserite nel corso dell'anno, riducendo ogni nuova pubblicazione di decine di millisecondi, raggiungendo infine il punto in cui eBay è ora:
Le prestazioni sono una funzionalità e un vantaggio competitivo. Le esperienze ottimizzate aumentano il coinvolgimento degli utenti, le conversioni e il ROI. Nel caso di eBay, queste ottimizzazioni variavano da operazioni poco impegnative ad altre più avanzate.
Consulta Velocità con mille tagli per saperne di più e cercare articoli più dettagliati degli ingegneri di eBay sul loro lavoro per le prestazioni nel prossimo futuro.