Ele.me è la più grande azienda di ordinazione e consegna di cibo della Cina continentale. Conta 260 milioni di utenti registrati da oltre 200 città in tutta la Cina e conta oltre 1, 3 milioni di schede di ristoranti. Con il 99% dei suoi utenti che ordinano cibo da dispositivo mobile, Ele.me ha deciso di migliorare l'esperienza sul web mobile rendendola più veloce e affidabile nelle connessioni instabili, affidandosi al modello tecnico di base di un'app multipagina per soddisfare le proprie esigenze operative.
- Il tempo di caricamento è diminuito dell'11,6% su tutte le pagine prememorizzate nella cache
- Il tempo di caricamento è diminuito in media del 6,35% su tutte le pagine.
- Il tempo di interazione costante è sceso a 4,93 secondi su una rete 3G al primo caricamento
Dopo il lancio della PWA ele.me, i nostri tempi di caricamento sono diminuiti significativamente, trasformando la nostra esperienza sul web mobile in uno dei siti di prenotazione di cibo più veloci in Cina.
Spencer Yang, Product Manager della PWA Ele.me
Scegliere tra app su più pagine e app a pagina singola
In un'app a più pagine (MPA), ogni route a cui accede un utente attiva una richiesta completa della pagina, insieme agli script e agli stili associati necessari, al server. A differenza di un modello di app a pagina singola (SPA), in cui ogni navigazione del percorso attiva un recupero solo per i contenuti e i dati pertinenti a tale route e la UI viene quindi creata mediante il codice JavaScript in esecuzione sull'app client.
La crescita esplosiva di Ele.me negli ultimi anni ha portato alla crescita di unità aziendali distinte all'interno dell'azienda, ciascuna incaricata della gestione del micro-servizio nel dominio principale https://ele.me. Il team Ele.me ha concluso che il disaccoppiamento di questi singoli servizi è gestito al meglio da un modello di app a più pagine (MPA), in cui ogni team è in esecuzione e gestisce il proprio servizio.
Applicazione della legge PRPL a un MPA
Il pattern PRPL (risorse critiche precarica, route iniziale render, route restanti pre-memorizzazione nella cache, percorsi rimanenti caricamento lento) fornisce agli sviluppatori web una serie di guide per guidare la struttura di una PWA, con particolare attenzione ai tempi rapidi di interattività e alla massimizzazione della memorizzazione nella cache per ridurre i round trip della rete. Sebbene il PRPL sia stato ben testato sulle APS, era meno chiaro come sarebbe stato effettivamente applicato a una MPA. Ele.me ha deciso di adottare la mentalità PRPL quando ha pensato a una ristrutturazione della propria MPA come PWA. A questo scopo, si assicurano che, quando un utente accede a una pagina, di precaricare le risorse fondamentali per tale pagina includendo <link rel="preload"> come necessario o visualizzando questi script a un livello sufficientemente superficiale da consentire al preloader del browser di svolgere le proprie operazioni senza bisogno di ulteriori suggerimenti. Inoltre, migliorano progressivamente la loro PWA installando un service worker ogni volta che è supportato dal browser, che poi utilizza per recuperare e pre-memorizzare nella cache altre route di navigazione di primo livello in modo che l'utente ottenga un'esperienza di caricamento e rendering più veloce quando fa clic sulla PWA. Ogni pagina in un MPA corrisponde al proprio percorso, pertanto accelerare il rendering della route iniziale equivale a implementare le best practice per ottimizzare il percorso di rendering critico per ogni route. Con queste modifiche, il tempo di caricamento complessivo
è diminuito in media del 6,35% su tutte le pagine.
Presentazione degli scheletri di transizione il prima possibile
Ele.me ha voluto applicare l'idea degli scheletri di schermate all'UX, un modo per garantire che ogni volta che l'utente tocca un pulsante o un link, la pagina reagisca il prima possibile trasferendo l'utente alla nuova pagina e caricandone i contenuti man mano che diventano disponibili. Questo è anche il fattore chiave per migliorare le prestazioni percepite della PWA. Tuttavia, poiché ogni pagina in un MPA corrisponde al proprio percorso iniziale, ogni navigazione richiede di ripetere ogni volta tutte le operazioni di caricamento, analisi e valutazione necessarie.
Per ovviare a questo, Ele.me ha creato la bozza di schermata come un reale componente dell'interfaccia utente, quindi ha utilizzato lo stack di rendering lato server di Vue.js per creare e quindi eseguire il pre-rendering dei componenti Vue in stringhe prima di inserirli nei modelli HTML. Ciò consente loro di visualizzare direttamente lo schema dello schermo e di ottenere una transizione più fluida durante la navigazione tra le pagine.
|
|
Memorizzazione nella cache delle risorse condivise con il service worker
Mentre un utente naviga nella PWA, vengono caricate diverse route e caricarle ripetutamente dalla rete sarebbe uno spreco. Per affrontare questo problema, Ele.me ha analizzato le route critiche più importanti per gli utenti, ha creato un plug-in webpack per raccoglierne le dipendenze, quindi ha pre-memorizzato nella cache queste route durante l'installazione di un service worker sul browser client dell'utente. Queste route critiche includono JavaScript, CSS e immagini che formano la tipica shell dell'interfaccia utente della PWA.
Le route considerate importanti, ma non critiche, vengono memorizzate nella cache in modo incrementale dal service worker in fase di runtime mentre l'utente continua a navigare nella PWA. Ciò consente a Ele.me di fornire la PWA agli utenti direttamente dalla cache in tutte le condizioni della rete. Il risultato: il tempo di caricamento è diminuito dell'11,6% su tutte le pagine prememorizzate nella cache.