1 – Mesure du temps de réponse
2 – Améliorer le chargement de la page HTML
Les performances d’un site web sont toujours un sujet délicat : mon site est-il réellement lent ? Jusqu’où puis-je améliorer les choses ? D’où viennent les lenteurs ?
La question est encore plus délicate avec un CMS ecommerce : les pages étant plus complexe à composer qu’un site institutionnel (plus de requêtes en base de données et de calculs à exécuter pour afficher une page), une simple faiblesse peut vite ralentir fortement votre site. De plus, les conséquences économiques sont fortes et immédiates : impact sur votre référencement naturel et, bien entendu, sur vos ventes.
Nous avons décidé d’une série d’articles pour aider les marchants sur ce sujet souvent obscure, où chacun y va de son commentaire / avis. Les indications données dans ce dossier n’engagent que nous, et sont les fruits de nos retours d’expérience.
Les deux points de mesure de la vitesse d’affichage de vos pages
Il existe deux points de mesure différents :
- Le temps nécessaire pour générer et recevoir le HTML de la page consultée,
- Le temps nécessaire pour générer et recevoir l’ensemble des éléments composant la page consultée.
Il faut savoir qu’un navigateur internet charge d’abord la page HTML, puis, au fur et à mesure de l’analyse du HTML, les éléments inscrits dans le HTML, comme (par ordre de priorité) les fichier javascript, CSS et enfin les images. Exemple de cinématique très simple : 
A noter que Google Analytics est chargé de manière asynchrone, donc non bloquant pour l’affichage de la page.
Chez 202 ecommerce, nous avons l’habitude d’utiliser les deux points de mesure, car chacun donne des indications différentes :
- Temps de chargement HTML : aux traitements informatiques purs (base de données, calcul => capacité du serveur),
- Temps de chargement de page complet : vitesse d’affichage ressentie par les utilisateurs, lié à l’ensemble de votre application web.
Comment mesurer la vitesse d’affichage de vos pages
tools.pingdom.com
Le magnifique schéma ci-dessous est issu de l’outil tools.pingdom.com. Cet outil étant hébergé sur un serveur (qui dispose à priori d’un accès internet très haut débit), il permet une mesure indépendante de votre connexion internet. De plus, l’outil permet de déterminer les deux vitesses évoquées ci-dessus : 
Bien entendu, la mesure est valable au moment où vous la faites, influençable par le trafic sur le site. Nous ne traitons pour le moment que de mesure ponctuelle destiné à optimiser le temps de chargement des pages, et non de tests de montée en charge. Sachez que vous disposez d’un résultat très proche en utilisant le débugger de votre navigateur, mais que vous êtes là tributaire de votre connexion internet.
Google Analytics
Google Analytics vous donne le temps de chargement des pages complètes sur les navigateurs de vos clients, rendez-vous dans Comportement > Vitesse du site > Vue d’ensemble.
Cet indicateur est à vérifier régulièrement (alertes possibles) car il s’agit de la vitesses réellement ressentie par vos clients. A noter par exemple que si vos clients se connectent majoritairement depuis des téléphones en accès as débit, vous pourriez avoir un différence importante avec la mesure PingDom.
Google Webmaster Tools
Webmaster Tools vous donner le temps de chargement de la page HTML par le robot d’indexation Googlebot. Exploration > Statistiques sur l’exploration > dernier schéma.
Ce graphique provient du même site que le graphique ci-dessus avec Google Analytics. On remarque que le pic de temps de chargement du 21 Octobre n’est pas visible sur Webmaster Tools. Plusieurs raisons possibles : le serveur de média est tombé en panne, ce qui n’aurait pas impacté le chargement HTML, la panne a eu lieu après le passage du Googlebot, etc… L’analyse peut commencer !
Alors quels temps de chargement sont acceptables ?
Evidemment, le meilleur temps est celui qui se rapproche le plus de zéro !
Mais le coût des améliorations de temps de chargement est exponentiel : grappiller quelques centaines de millisecondes sur un site lent peut se faire par un simple changement de configuration, ou une ligne de code. Gagner une milliseconde sur un site déjà très rapide va prendre des proportions gigantesques : cluster de serveur MySQL, etc… De plus certains logiciels sont plus rapides nativement que d’autres (la rapidité se payant généralement par des solutions plus lourdes). Il s’agit donc de trouver un équilibre coût / complexité / rapidité.
Voici notre tableau pour vous aider à vous positionner, dont nous avons essayé de déterminer raisonnablement les valeurs pour Prestashop. Evidemment, la ligne n’est jamais nette, ces chiffres sont des indications.
| 🙂 | 😐 | 🙁 | |
| Chargement HTML | < 0,6 sec | 0,6 – 0,8 sec | > 0,8 sec |
| Chargement page complète | <1,5 – 3 sec | 1,5 – 3 sec | > 3 sec |
Pour ceux qui n’auraient pas compris : 🙁 = vos clients sont mécontents et votre référencement peut en pâtir !
Et je fais quoi si mon site est lent ? Quid de la montée en charge ?
Cet article est le premier de la série, d’autres sont à venir avec les réponses à ces questions !