Créer un tableau de bord des performances Web et optimiser JavaScript, les ressources et la page d'accueil pour assurer la réussite de l'entreprise
Tokopedia est l'une des plus grandes entreprises d'e-commerce d'Indonésie. Avec plus de 2, 7 millions de réseaux marchands à l'échelle nationale, plus de 18 millions de fiches produit et plus de 50 millions de visiteurs mensuels, l'équipe Web savait qu'il était essentiel d'investir dans les performances Web. En développant une culture axée sur les performances, l'entreprise a augmenté ses taux de clics (CTR) de 35% et ses conversions de 8 %.
35%
d'augmentation du CTR
8%
d'augmentation du taux de conversion
4 s
d'amélioration de l'TTI
Mise en évidence de l'opportunité
L'équipe Web s'est entretenue avec l'équipe de direction de l'importance d'investir dans les performances Web pour améliorer l'expérience utilisateur et l'engagement. Elle a également mis en évidence l'impact des API et modèles avancés sur les performances.
L'approche qu'ils ont utilisée
JavaScript et optimisation des ressources
Le blocage de l'affichage ou la longue durée de JavaScript sont une cause fréquente de problèmes de performances. Pour y remédier, l'équipe a pris différentes mesures:
- Création d'une bibliothèque de contrôleurs de scripts pour charger de manière sélective des scripts tiers afin d'optimiser le chemin d'affichage critique.
- Remplacement des bibliothèques plus lourdes par des bibliothèques plus légères.
- Mise en œuvre de la scission du code et optimisation du contenu au-dessus de la ligne de flottaison.
- Mise en œuvre du chargement adaptatif, par exemple pour charger des images de haute qualité uniquement pour les appareils connectés à des réseaux rapides et pour utiliser des images de qualité inférieure pour les appareils connectés à des réseaux lents.
- Images chargées de manière différée dans la partie en dessous de la ligne de flottaison.
- Chargement différé du code JavaScript non critique.
Optimisation de la page d'accueil
L'équipe a utilisé Svelte pour créer une version allégée de la page d'accueil pour les nouveaux visiteurs, garantissant ainsi une expérience rapide sur le site Web. Cette version utilisait également un service worker pour mettre en cache les éléments non allégés en arrière-plan.
Budgétisation et suivi des performances
L'équipe a créé un tableau de bord de surveillance des performances à l'aide de Lighthouse et d'autres outils pour améliorer la qualité des pages Web:
- Mesure la qualité du réseau, la surveillance de l'infrastructure, les performances de l'interface et les performances des serveurs.
-
Utilise une combinaison d'API de plates-formes Web (telles que l'
API Resource Timing
et l'en-tête
Server-Timing), l' API PageSpeed Insights (PSI) et les données du rapport sur l'expérience utilisateur Chrome pour surveiller les métriques sur les champs et les ateliers. - Analyse des images de Lighthouse pour vous aider à identifier les opportunités d'optimisation des images.
- Applique un budget de lot pendant l'intégration continue (CI). L'exécution de la CI échoue si la taille du lot dépasse le budget.
En tant qu'entreprise d'e-commerce, l'acquisition d'utilisateurs est la clé de notre succès. Nous sommes conscients de l'importance du Web, et nous sommes donc déterminés à investir dans l'ensemble des outils et fonctionnalités qui offriront la meilleure expérience utilisateur possible.
Dendi Sunardi, responsable de l'ingénierie, plate-forme Web, Tokopedia
Consultez la page Études de cas Scale on Web pour découvrir d'autres témoignages en Inde et en Asie du Sud-Est.