Introduction : la performance web

L’optimisation des web performances Prestashop est un sujet central pour nos projets web. En effet, même si cela n’est pas le seul point à prendre en compte, un utilisateur est susceptible de quitter plus rapidement un site s’il n’est pas optimisé.

Tout d’abord, voici quelques chiffres qui nous montrent les différents enjeux de la performance web :

  • 75 % : sur un site internet trop lent, le taux d’abandon de panier peut augmenter de 75%
  • 80 % : c’est la part de navigation mobile chez certains de nos clients dans le retail.
  • 6.5 secondes : Il faut 6,5 s (médiane) aux pages web pour se charger entièrement sur desktop en novembre 2019 et 19,8 s sur mobile ! Soit 3 fois plus de temps …
  • 7% : Un retard d’une seconde dans la réponse à la page peut entraîner une réduction de 7% des conversions et 20% pour les mobiles
  • 79% : plus de 3/4 des acheteurs qui ont eu des problèmes de performance du site disent qu’ils ne reviendront pas sur le site pour acheter à nouveau
  • 53% : plus de la moitié des visiteurs abandonnent le site si le chargement est supérieur à 3 secondes

Lorsque l’on parle de performances mobile, il faut penser d’une part à l’optimisation du site web mais aussi à d’autres facteurs externes. Parmi ces facteurs, nous retrouvons par exemple les capacités techniques du smartphone ou encore la connexion mobile. En effet, la vitesse de chargement peut-être 2 à 5 fois supérieur selon le modèle de votre smartphone. Tout comme une connexion mobile sur un réseau 4G sera beaucoup plus instable qu’une connexion wifi.

C’est pourquoi l’agence Prestashop Axome met en place pour l’ensemble de ces projets web des optimisations techniques afin d’avoir un site web avec des performances optimales.

Optimisation technique réalisée par les équipes Axome

La qualité et les performances peuvent être améliorées techniquement selon 3 facteurs différents :

  • Le poids des images : Les visuels sont la cause n°1 de la vitesse de chargement d’un site web, il est primordial de les optimiser. La conception de nos thèmes et notre architecture serveur embarquent une suite d’outils pour les optimiser.
    • Redimensionnement : Les visuels sont redimensionnées à la volée, en fonction du support de destination, pour un affichage optimal sur desktop ou mobile.
    • Qualité : Quand vous publiez une image, celles ci sont optimisées par le CMS pour un chargement plus rapide.
  • Le code source des pages : Le code de vos pages est actuellement écrit en langage HTML. C’est pourquoi nous respectons les bonnes pratiques de structure et de normalisation. Nous limitons donc les boucles, les structures e, excès et simplifions des éléments comme le footer et méga menus.
  • Les ressources externes : un nombre d’appels externes important ralentit le temps de chargement de votre site web. Nous préconisons donc de ne pas intégrer en excès des solutions externes. De plus, lorsque vous avez des modules dont vous vous ne servez plus. Il est préférable de l’indiquer à nos équipes techniques afin de les désinstaller.

Ces 3 facteurs sont donc primordiaux pour nous et nos équipes techniques. C’est aussi un travail d’équipe avec l’ensemble de nos clients afin de les sensibiliser en leur fournissant au besoin des documentations sur les dimensions et formats des visuels à utiliser.

Comprendre les outils de mesure :

Afin de mesurer les web performances de nos sites web, nous utilisons deux outils distincts et très connus de tous. D’une part GTMetrix et d’autre part Google Page Speed Insights.

PageSpeed Insights

PageSpeed Insights transmet des rapports de performance d’une page, tant sur mobile que sur desktop. Cette analyse s’accompagne de recommandations. Le principal critère est la « vitesse » d’affichage, mais l’outil tient compte aussi de l’expérience utilisateur.

Google a défini un système de notation qui prend en compte de nombreux paramètres de la web-performance. Il faut prendre en compte que cet outil est plutôt “sévère” en terme de notation. Le système se décompose en 2 notations, d’une part le mobile et d’autre part le desktop.

Le système mobile; nous avons défini le score selon 3 niveaux :

  1. Un bon score : Entre 40 à 100
  2. Un score moyen : Entre 29 à 40
  3. Un mauvais score : Entre 0 et 20

Le système desktop; nous avons défini le score selon 3 niveaux :

  1. Un bon score : Entre 60 et 100
  2. Un score moyen : Entre 30 et 60
  3. Un mauvais score : Entre 0 et 30
Pagespeed Insight Axome

GTMetrix

C’est l’outil de référence au sein de notre agence web e-commerce en terme de mesure de la web performance. Cet outil nous permet notamment de mesurer les réponses serveurs, nous indiquer les différentes optimisations et les sources du possible ralentissement de votre site.

Nous allons vous présenter les 6 facteurs principaux que nous prenons en compte lorsque nous utilisons GTMetrix :

  1. Le TTFB : Il s’agit du temps que le navigateur doit attendre avant de recevoir son premier octet de données. Temps cible : < 0.5 secondes.
  2. Le Time to interactive : La page web commence réellement à s’afficher. Il s’agit de la vitesse de chargement perçue.
  3. Speed Index : Il mesure le rythme de remplissage du contenu au-dessus de la ligne de flottaison.
  4. Largest Contentful Paint : C’est le temps nécessaire au chargement du plus grand élément de contenu d’une page.
  5. First Contentful Paint : Il est déclenché lorsqu’un contenu est affiché. Il peut s’agir de texte, d’image, du canvas ou SVG.
  6. Total blocking Time : C’est le temps total pendant lequel une page est bloquée pour répondre aux entrées de l’utilisateur.
GtMetrix Axome Web performances

Case study : nos optimisation des web performances sur vetsecurite.com

Après avoir procéder à la modernisation de son image à grâce à son nouveau site e-commerce développé, Vet Sécurité s’est posé la question de l’optimisation des web performances Prestashop. L’équipe Axome à répondu présent et a proposé un plan de travail en 4 étapes :

  1. Analyse : Phase d’analyse des performances actuelle de votre boutique : test GT Metrix / PageSpeed insights
  2. Profiling : Phase de collecte des données actuelles de performance de votre site
  3. Indentification : Phase d’identification des points d’amélioration et actions à menées
  4. Actions : Etablir un plan d’action sur mesure afin d’améliorer vos performances

Concernant les actions menées, nous avons travaillé en parallèle sur l’optimisation des modules en back-end. Et sur l’optimisation du template en front avec l’utilisation de preconnect et de preload ou encore le chargement asynchrone des sous-menu.

L’ensemble des actions mises en place ont permis obtenir des résultats mesurables.

Quelques
chiffres

78%Résultat PageSpeed sur la HomePage mobile
912msonload time HomePage : gain de 32%
1,4sonload time pages catégories : gain de 53%
896msonload time pages produits : gain de 50%

Le témoignage d’Emmanuel Marot :

Axome, c’est une agence proche de ses clients et disponible, riche en conseil et créativité. Ils ont su développer notre site web de façon considérable, grâce à leur stratégie orientée e-commerce et les outils qu’ils nous ont mis à disposition. L’agence est un solide partenaire avec qui nous envisageons sereinement l’avenir.