Performance web : pourquoi c’est si important et comment l’optimiser

Si vous avez déjà une boutique en ligne, ou que vous pensez vous lancer dans l’aventure du e-commerce, vous avez sûrement déjà entendu parler de l’importance de la performance. Cela correspond, de manière générale, à la vitesse de chargement d’une page web. À cette notion de performance correspondent des indicateurs, et chaque année ou presque, de nouveaux termes techniques font leur apparition pour tâcher de quantifier la performance d’un site web : temps de chargement, et plus récemment Time to First Byte (TTFB) ou encore First Contentful Paint (FCP) pour ne citer que les principaux.

À première vue, ces termes techniques peuvent paraître légèrement barbares, mais rassurez-vous, ils ne sont pas si méchants et ne veulent que votre bien et celui de vos clients.

Pourquoi la performance est-elle si importante pour une boutique en ligne ? 

Si aujourd’hui personne n’est surpris par une page qui se charge rapidement, une page qui charge lentement en revanche ne se fera que trop remarquer, et on aura vite envie de la quitter avant même que le contenu soit affiché à l’écran. Dans les faits, la plupart des visiteurs d’un site quittent une page si elle ne charge pas complètement en moins de 3 secondes.

Dans le secteur très concurrentiel du e-commerce où l'immédiateté prime, assurer une bonne performance web est donc indispensable pour convertir vos visiteurs en clients, aussi bien sur mobile que sur desktop. En effet, il est estimé qu’un gain de 0,1 seconde dans le temps de chargement de votre site e-commerce peut augmenter votre taux de conversion de 8% !

Trois arguments pour une meilleure performance de votre boutique en ligne :

• Vous améliorerez sensiblement l’expérience de vos clients et augmenterez ainsi naturellement votre taux de conversion,
• Vous gagnerez en capacité pour accueillir un maximum d’utilisateurs en simultané, et éviterez ainsi de perdre des clients précieux en période de forte activité,
• Vous gagnerez en visibilité grâce à la vitesse de chargement optimale de votre site qui vous permettra d'améliorer votre position dans les résultats des moteurs de recherche (SEO).

Lorsque vous pensez à la performance de votre boutique en ligne, il faut donc penser :

1. Expérience utilisateur,
2. Conversion,
3. Visibilité. 

En ce qui concerne votre boutique, il s’agira principalement d’augmenter sa vitesse de chargement, tout en respectant bien sûr les exigences techniques d’un site e-commerce en 2021. 

> En savoir plus : Améliorer les performances de sa boutique PrestaShop (vidéo)

Quels indicateurs et comment les optimiser ? 

On considère 5 indicateurs clés qui impactent directement tant la performance de votre site que l'expérience utilisateur. Parmi ceux-ci, on estime que le Time to First Byte et le Speed Index sont particulièrement importants puisqu’ils permettent de comprendre la performance d’un site dans sa globalité. 

1. Le Time to First Byte (TTFB) 

Cet indicateur correspond au temps de réponse du serveur, il s’agit des millisecondes les plus importantes dans le chargement d’une page. Quelques-uns des éléments majeurs qui constituent le délai de réponse sont la configuration du serveur (langages utilisés, librairies etc. qui permettent d’optimiser le temps de chargement et font la robustesse du site internet) et le temps d’exécution des requêtes en base de données.

Bon à savoir : Considéré bon par Google s’il est inférieur ou égale à 200 millisecondes et acceptable jusqu’à 500 ms. C’est souvent le seul indicateur à varier dans le temps, et souvent conditionné par le trafic.

Astuce : Utilisez un CDN (Content Delivery Network) qui sera particulièrement utile pour vos clients à l’étranger et pensez à autoriser la mise en cache des ressources statiques.

2. Le First Contentful Paint

Il s’agit du premier temps fort pour l’internaute, qui peut se retrouver avec un temps d’attente entre le moment où il clique sur un lien et le moment où la page affiche un élément. Cette mesure correspond principalement au temps que le navigateur va mettre à charger la réponse du serveur ainsi que l’affichage du premier élément de contenu par le navigateur. Ce premier élément n’est pas strictement et uniquement esthétique, cela peut être une image tout comme un bloc de couleur. 

Bon à savoir : Il est qualifié de bon s’il se réalise en moins de 2,5 secondes (TTFB compris), on peut donc estimer que le temps de chargement des fichiers bloquants le rendu doit se faire en moins de 2 secondes.

Astuce : Compressez vos fichiers HTML/CSS/JS et limitez les fichiers bloquant le rendu.

3. Le Largest Contentful Paint (LCP)

Le LCP est le deuxième temps fort pour l’utilisateur, cette mesure intègre la plupart des éléments visibles. C’est à ce moment-là que la page web prend forme et obtient son aspect final (ou presque). Cette étape peut s’avérer être la plus longue et lourde en fonction des contenus à afficher.

Pour mieux comprendre ce dont il s’agit, voici une illustration :

Bon à savoir : Il est qualifié de bon s’il se réalise en moins de 2,5 secondes (tout comme le FCP) et acceptable jusqu’à 4 secondes. De nombreuses études montrent qu'au-delà de 3 secondes le taux de rebond augmente significativement…

Astuce : Optimisez les images, générez plusieurs formats utiles (jpeg 2000, jpeg XR webp etc.), fournissez différentes tailles de vos images dans le code HTML, mettez en place du cache (navigateur et serveur). 

4. Le First Input Delay 

Cet indicateur est en lien avec l’interactivité d’une page, c’est le temps de réponse du navigateur dès lors qu’une action est faite sur le premier élément interactif disponible. Il s’agit par exemple du moment où l’on clique sur un lien ou un bouton. 

Bon à savoir : Cet indicateur mesure le temps de frustration d’un utilisateur, c’est à dire, le temps pendant lequel un internaute va attendre avant que le navigateur réponde  s’il clique sur le premier élément interactif affiché.

5. Time to Interactive

Cet indicateur est un peu obscur et souvent mal interprété. Il mesure le temps temps écoulé depuis le début de la navigation jusqu’à ce que les ressources de la page soient chargées et que le thread principal du navigateur soit inactif pendant au moins 5 secondes, c'est à dire qu’il n’y ait pas eu d’exécution de script de plus de 50 ms.

Bon à savoir : Votre site e-commerce peut avoir de bonnes performances générales, un bon FID et, malgré cela, un mauvais Time to Interactive.

Astuce : Il est conseillé de différer les JavaScripts non essentiels au chargement et de supprimer les scripts non nécessaires à la page affichée pour ne pas encombrer le thread principal. Cela demande donc de bien segmenter son code.

Voici une timeline plus représentative du délai entre les indicateurs.

Ici une timeline d’un site bon élève (selon les critères de Google) :

Indicateur bonus : Speed Index ou SI

Cet indicateur n’est pas présenté dans la liste car c’est un indicateur qui est très dépendant des du FCP et LCP, eux-mêmes dépendant du TTFB. C’est le résultat d’un calcul qui se base sur la vitesse et la progressivité d’affichage de la partie visible de la page (au-dessus de la ligne de flottaison).

Il mesure donc ce que l’internaute ressent (potentiellement) pendant le chargement, tout comme le FID il s’agit d’un des indicateurs UX plus récents que Google utilise pour le SEO.

Conclusion 

Chaque indicateur est impacté par l’indicateur précédent, ce qui les rend tous importants. Comme indiqué au début, le TTFB est particulièrement important et très fluctuant puisqu’il dépend de la qualité de votre hébergement et du trafic, un mauvais TTFB peut donc drastiquement affecter la performance de votre site. C’est un indicateur qui n’est pas souvent donné par la plupart d’outils de mesure de performance (Page Speed Insights, GtMetrix) car c’est une étape complexe et obscure qui peut rapidement devenir très technique (d’où la difficulté à accéder et interpréter les informations pour des non experts). C’est à ce moment que vous pourrez faire appel à des services spécialisés, par exemple à l’offre PrestaShop Platform si vous vous travaillez avec un site PrestaShop. 

 

PrestaShop Platform, un service qui vous accompagne dans la croissance de votre boutique :

• Une solution d’hébergement dédiée spécialisée Prestashop avec 3 environnements
• Une interface avec des KPI techniques et clairs 
• Une interface pour gérer vos environnements (dev / pré-production et production)
• Des migrations d’environnements simplifiées
• Un accompagnement avec un support pour plus de sérénité