Ele.me est la plus grande entreprise de commande et de livraison de repas en Chine continentale. Il dessert 260 millions d'utilisateurs inscrits dans plus de 200 villes chinoises et possède plus de 1, 3 million de fiches de restaurants. 99% de ses utilisateurs commandent des repas sur mobile. Ele.me a donc décidé d'améliorer son expérience sur le Web mobile en la rendant plus rapide et plus fiable en cas de connexion instable, tout en s'appuyant sur le modèle technique de base d'une application multipage pour répondre à ses besoins opérationnels.
- Le temps de chargement a diminué de 11,6% sur toutes les pages en pré-cache
- Le temps de chargement a diminué en moyenne de 6,35% sur l'ensemble des pages.
- Le délai d'interaction cohérente est passé à 4,93 secondes sur un réseau 3G lors du premier chargement.
Depuis le lancement de la PWA ele.me, nos temps de chargement ont considérablement chuté, transformant notre expérience Web mobile en l'un des sites de réservation de repas les plus rapides de Chine.
Spencer Yang, responsable produit de la PWA Ele.me
Choisir entre une application multipage et une application monopage
Dans une application multipage (MPA), chaque itinéraire vers lequel un utilisateur accède déclenche une requête complète de la page, ainsi que les scripts et styles associés nécessaires, vers le serveur. Cela diffère du modèle d'application monopage (SPA), où chaque navigation sur l'itinéraire déclenche une récupération uniquement pour le contenu et les données correspondant à cet itinéraire. L'UI est ensuite construite avec du code JavaScript exécuté sur l'application cliente.
La croissance exponentielle d'Ele.me ces dernières années a entraîné la croissance de plusieurs unités commerciales au sein de l'entreprise, chacune responsable de la gestion de son micro-service dans le domaine principal https://ele.me. L'équipe Ele.me a conclu que le découplage de ces services individuels était mieux géré par un modèle d'application multipage (MPA), dans lequel chaque équipe exécute et gère son propre service.
Appliquer la PRPL à une MPA
Le modèle PRPL (précharger les ressources critiques, rendre l'itinéraire initial, pré-mettre en cache les routes restantes et chargement différé des routes restantes) fournit aux développeurs Web un ensemble de rails pour guider la structure d'une PWA, en mettant particulièrement l'accent sur la rapidité d'interactivité et la maximisation de la mise en cache afin de réduire les allers-retours sur le réseau. Bien que la PRPL ait été bien testée sur les applications monopages, il n'était pas facile de savoir comment l'appliquer réellement dans une MPA. Ele.me a décidé d'adopter une approche PRPL lorsqu'elle envisage de reconstruire sa MPA en tant que PWA. Pour ce faire, ils s'assurent que, lorsqu'un utilisateur accède à une page, il précharge les ressources critiques de cette page en incluant <link rel="preload"> si nécessaire, ou en affichant ces scripts de manière suffisamment superficielle pour que le préchargeur du navigateur puisse faire son travail sans avoir besoin d'indications supplémentaires. L'équipe améliore également progressivement leur PWA en installant un service worker lorsque celui-ci est pris en charge par le navigateur. Il l'utilise ensuite pour extraire et pré-mettre en cache d'autres itinéraires de navigation de premier niveau, afin que l'utilisateur bénéficie d'une expérience de chargement et d'affichage plus rapide lorsqu'il clique sur la PWA. Chaque page d'une MPA possède son propre itinéraire. Par conséquent, accélérer le rendu de l'itinéraire initial équivaut à mettre en œuvre les bonnes pratiques visant à optimiser le chemin de rendu critique pour chaque itinéraire. Avec ces modifications, le temps de chargement global a diminué de 6,35% en moyenne sur l'ensemble des pages.
Diffuser les écrans du squelette de transition dès que possible
Ele.me voulait appliquer le concept de squelette d'écran dans l'expérience utilisateur, qui permet de s'assurer que chaque fois que l'utilisateur appuie sur un bouton ou un lien, la page réagit dès que possible en le redirigeant vers la nouvelle page, puis en chargeant le contenu sur cette page à mesure que le contenu devient disponible. C'est également la clé pour améliorer les performances perçues de la PWA. Cependant, comme chaque page d'une MPA constitue son propre itinéraire initial, chaque navigation nécessite de répéter toutes les tâches de chargement, d'analyse et d'évaluation nécessaires à chaque fois.
Pour contourner ce problème, Ele.me a créé l'écran squelette en tant que composant d'interface utilisateur réel, puis utilisé la pile de rendu côté serveur de Vue.js pour créer et préafficher les composants Vue en chaînes avant de les injecter dans des modèles HTML. Cela leur permet d'afficher directement le squelette de l'écran et d'assurer une transition plus fluide entre les pages.
|
|
Mettre en cache des ressources partagées avec un service worker
Différentes routes sont chargées lorsqu'un utilisateur parcourt la PWA, et il serait inutile de charger ces routes à partir du réseau encore et encore. Pour résoudre ce problème, Ele.me a analysé les routes critiques qui intéressent le plus les utilisateurs, a créé un plug-in Webpack pour collecter les dépendances de ces routes critiques, puis a mis ces routes en cache en amont lorsqu'il installe un service worker sur le navigateur client de l'utilisateur. Ces routes critiques incluent le code JavaScript, CSS et les images qui forment l'interface utilisateur classique de la PWA.
Les routes considérées comme importantes, mais pas essentielles, sont mises en cache de manière incrémentielle par le service worker au moment de l'exécution, à mesure que l'utilisateur continue à naviguer dans la PWA. Cela permet à Ele.me de diffuser la PWA aux utilisateurs directement à partir du cache et ce, quelles que soient les conditions du réseau. Résultat: le temps de chargement a diminué de 11,6 % sur toutes les pages mises en pré-cache.