En outre, l\u2019aspect utile au r\u00e9f\u00e9rencement naturel, am\u00e9liorer la vitesse de chargement d\u2019un site permet d\u2019augmenter aussi le nombre de page vues et bien souvent le taux de conversion<\/a> ! Ce qui peut aussi avoir un impact sur les liens sponsoris\u00e9s.<\/p>\n A titre d\u2019exemple, une \u00e9tude r\u00e9alis\u00e9e par Amazon (de 2006), d\u00e9montrer qu\u2019un ralentissement de 100ms co\u00fbtait 1% des ventes. Nous sommes, depuis plus de 11 ans, de plus en plus avertis \u00e0 la navigation mobile et surtout de plus en plus exigeants.<\/p>\n Pour r\u00e9ussir votre site ecommerce<\/a> en 2017, il vous est possible de le faire que ce soit pour un ordinateurs ou mobiles, il existe de nombreuses mani\u00e8res de le faire !<\/p>\n La vitesse moyenne d\u2019un site est affich\u00e9e dans GA.<\/p>\n Il existe d\u2019autres outils de mesure et d\u2019analyse, en voici quelques un parmi les plus connus.<\/p>\n YSlow (d\u00e9velopp\u00e9e par Yahoo) est une extension disponible sur les diff\u00e9rents navigateurs, elle permet de mesurer le temps de connexion au serveur, le poids des images, la taille des ressources JS, \u2026<\/p>\n Utilis\u00e9 par de nombreux internautes, ce navigateur est un v\u00e9ritable outil pour tracker le temps de chargement de votre boutique en ligne. En effet, dans la console de chrome, il est possible d\u2019utiliser les outils int\u00e9gr\u00e9s pour la vitesse de chargement et l\u2019utilisation de la m\u00e9moire par exemple.<\/p>\n Pour cela, il suffit d\u2019appuyer sur la touche F12 de votre clavier, de choisir l\u2019onglet \u00ab Network \u00bb et de mettre en route l\u2019enregistrement (en cliquant sur le petit bouton rouge).<\/p>\n Cet outil vous permet de voir les \u00e9l\u00e9ments qui composent votre site, les divers \u00e9l\u00e9ments, leurs poids et leur temps de chargement.<\/p>\n Aujourd\u2019hui int\u00e9gr\u00e9 dans les diverses consoles de navigateur, PageSpeed est un outil qui permet d\u2019avoir un rapide retour sur les \u00e9l\u00e9ments pouvant \u00eatre am\u00e9lior\u00e9 pour contribuer \u00e0 la r\u00e9duction du temps de chargement d\u2019un site.<\/p>\n Google permet aussi d\u2019utiliser un outil, PageSpeed Insights qui permet d\u2019avoir directement acc\u00e8s aux m\u00eames donn\u00e9es que PageSpeed sans installation pr\u00e9alable sur un navigateur.<\/p>\n https:\/\/developers.google.com\/speed\/pagespeed\/insights<\/a><\/p>\n L\u2019outil r\u00e9alise une analyse de votre site e-commerce (il fait le test pour la version \u00ab desktop \u00bb ou \u00ab mobile \u00bb), en mettant en avant les points \u00e0 optimiser et estime le temps que cela devrait vous faire gagner.<\/p>\n Avec l\u2019av\u00e8nement des connexions depuis un terminal mobile, Google \u00e0 d\u00e9velopper un outil de test de votre site web sur terminal mobile, avec en prime, un test de connexion 3G (le r\u00e9seau le plus r\u00e9pandue dans le monde actuellement).<\/p>\n Voil\u00e0 un outil qui vient en compl\u00e9ment de tous les autres. Il permet de donner une note au First Byte Time, Au Keep Alive, Compress transfer, Compress Images, Cache Static et \u00e9ventuels CDN.<\/p>\n Pas toujours \u00e9vident de trouver un bon ratio entre le poids et la qualit\u00e9 des images. Pour ce faire, il faut mieux utiliser des formats :<\/p>\n Pour les personnes qui ont de gros sites e-commerce avec beaucoup d\u2019images, il est possible de mettre en place des scripts sur le serveur pour compresser de mani\u00e8re automatique toutes les images sur le serveur. Il est possible d\u2019utiliser des logiciels de scripts. Exemple ImageMagick<\/a>.<\/p>\n Une autre solution pour les sites consiste \u00e0 utiliser des compresseurs d\u2019image en ligne tel que Tinyjpg<\/a> pour le format jpg mais qui existe aussi pour les PNG en passant par CompressPNG<\/a>.<\/p>\n Il est important de faire en sorte de dimensionner votre image avec la taille utilis\u00e9e pour l\u2019affichage sur votre site. Bien souvent les images sont affich\u00e9es en plus petit sur le site alors qu\u2019elle fait par exemple 1000 pixels x 1500 en r\u00e9alit\u00e9 ! Il ne faut donc pas utiliser la redimension dans le code.<\/p>\n El\u00e9ment int\u00e9ressant \u00e0 noter, pensez \u00e0 sp\u00e9cifier la taille des images directement dans le code HTML comme cela, le navigateur ne perdra pas de temps \u00e0 aller chercher l\u2019information par lui-m\u00eame.<\/p>\n A moins que votre site n\u2019utilise que peu de ressources de mise en forme, il est tr\u00e8s fortement conseill\u00e9 d\u2019avoir un seul fichier de CSS et de JavaScript dans des fichiers \u00ab externes \u00bb. En effet, ces fichiers permettent de mettre ces fichiers dans la partie cache. La mise en cache \u00e9vite de devoir t\u00e9l\u00e9charger les informations pour chaque page vue.<\/p>\n Il est possible de mettre tout le code CSS dans un m\u00eame fichier (sans utiliser de fonction import qui ne diminue pas le nombre de requ\u00eates serveur). Et de faire de m\u00eame pour les codes javascript. Lorsque vos diff\u00e9rents fichiers sont cr\u00e9\u00e9s, il est alors possible et important de passer \u00e0 la \u00ab minification \u00bb. C\u2019est-\u00e0-dire de r\u00e9duire sa taille au maximum ! Pour acc\u00e9l\u00e9rer encore plus le temps d\u2019ex\u00e9cution d\u2019un site, il est possible de minifier le code HTML. Les sprites consistent \u00e0 mettre dans une m\u00eame image, plusieurs petites images et d\u2019utiliser le CSS pour afficher la bonne partie de l\u2019image que l\u2019on souhaite en fonction d\u2019un emplacement. En effet, cela permet de diminuer le nombre de requ\u00eates effectu\u00e9es par votre navigateur pour venir t\u00e9l\u00e9charger toutes les petites ic\u00f4nes ou boutons pr\u00e9sents sur le site.<\/p>\n Autre avantage, les images s\u2019affichent de mani\u00e8re quasi instantan\u00e9e lors d\u2019une interaction.<\/p>\n Il faut penser \u00e0 mettre en premier les fichiers CSS dans la balise <head> de votre site et les fichiers juste avant de fermer la balise <\/body> (sinon, dans le head). Ainsi, les navigateurs peuvent rapidement t\u00e9l\u00e9charger les \u00e9l\u00e9ments parall\u00e8lement (CSS, images, \u2026) mais ce n\u2019est pas le cas en revanche pour les fichiers JavaScript (le chargement doit \u00eatre complet avant de passer \u00e0 la suite).<\/p>\n Sur la plupart des CMS ou de plateformes e-commerce, on retrouve un syst\u00e8me de cache. La majorit\u00e9 des serveurs web permettent de compresser le HTML, CSS ou autre JavaScript gr\u00e2ce au GZIP. Il s\u2019agit de compresser les donn\u00e9es et de les transmettre au navigateur. Le navigateur se chargera de d\u00e9compresser les \u00e9l\u00e9ments (ce qui rend plus rapide l\u2019affichage). Pour r\u00e9aliser cette action, il suffit de modifier une ligne ou deux dans la configuration du serveur.<\/p>\n Lors de la visite d\u2019un site, d\u2019une boutique en ligne, un navigateur t\u00e9l\u00e9charge toutes les ressources du site et en met une partie en cache (Fichier externe CSS, JS, les images). Ici, l\u2019en-t\u00eate Expires permet de donner au navigateur le temps de mise en cache de ces fichiers. En g\u00e9n\u00e9ral, cette dur\u00e9e est de 24 heures. Mais pour les visiteurs r\u00e9guliers, cela sera contraignant puisqu\u2019ils t\u00e9l\u00e9chargeront les \u00e9l\u00e9ments chaque jour. Il serait int\u00e9ressant de mettre en place une valeur plus \u00e9lev\u00e9e. De plus, m\u00eame si la date est plus \u00e9lev\u00e9e, il suffira de rajouter ou changer un fichier, le nom \u00e9tant diff\u00e9rent, le cache se mettra \u00e0 jour.<\/p>\n Il s\u2019agit de la fa\u00e7on dont votre navigateur viendra se connecter \u00e0 votre serveur et de comment cette connexion est g\u00e9r\u00e9e. Le param\u00e8tre de connexion persistante donne au serveur un temps pendant lequel garder la connexion active lorsque l\u2019on navigue sur la boutique en ligne. Cela permet de r\u00e9duire les appels \u00e0 de nouvelles connexions, ce qui \u00e9conomise du temps processeur, de la m\u00e9moire et l\u2019utilisation du r\u00e9seau.<\/p>\n Pour les boutiques ecommerce de grande taille et qui disposent d\u2019un nombre de visiteurs \u00e9lev\u00e9s, la mise en place d\u2019un CDN peut aider \u00e0 baisser le temps de chargement de la boutique. Cela consiste \u00e0 avoir un r\u00e9seau de serveurs pour servir les ressources de votre site rapidement, cela limite la distance d\u2019acc\u00e8s aux ressources.<\/p>\n Pour acc\u00e9l\u00e9rer le temps de r\u00e9ponse au serveur et le rendu de la boutique ecommerce \u00e0 servir, il est possible d\u2019avoir un proxy avant la ligne du serveur http. Cette ligne g\u00e8re un cache. Ce cache regroupe diff\u00e9rentes requ\u00eates et contenus. Mais sa mise en place est plut\u00f4t ardue vue son caract\u00e8re tr\u00e8s technique.<\/p>\n Souvent, les solutions du type CMS ex\u00e9cutent des scripts automatiquement pour diverses t\u00e2ches (nettoyage des logs, stats, \u2026) et souvent cela n\u2019est pas optimis\u00e9. Pour cela, il faut analyser les logs du serveur pour connaitre fichiers qui sont appel\u00e9s quand la page du site ecommerce d\u2019affiche. Une base de donn\u00e9es \u00e0 \u00e9galement son poids dans le temps de chargement de votre boutique PrestaShop par exemple. Pour cela, il faut mettre en place les bons index pour optimiser les requ\u00eates. Il est aussi tr\u00e8s crucial de voir les requ\u00eates qui prennent le plus de temps en cumul ! Cette notion est importante car elle permet de d\u00e9celer une requ\u00eate lente. En effet, si elle est ex\u00e9cut\u00e9e deux fois par journ\u00e9e (matin et soir), elle aura un fort impact. Mais une petite requ\u00eate qui sera faite 500 fois par jour aura encore plus d\u2019impact ! Pour voir cela, il faut activer les logs de la BDD pour avoir plus de d\u00e9tails. Il est possible de voir certaines informations dans les logs fournis dans phpmyadmin.<\/p>\nComment mesurer la vitesse de chargement d’un site e-commerce ? <\/strong><\/h2>\n
Quelques outils pour analyser la vitesse et les \u00e9l\u00e9ments bloquants<\/strong><\/h3>\n
\n
Google Analytics<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"analytics-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/analytics-vitesse-site-ecommerce-700x383.jpg\")
<\/p>\n\n
YSlow<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"Yslow-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/Yslow-vitesse-site-ecommerce-700x389.jpg\")
<\/p>\n\n
Le navigateur Google Chrome<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"Network](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/Network-google-chrome-vitesse-site-ecommerce-700x469.jpg\")
<\/p>\n\n
PageSpeed<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"PageSpeed-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/PageSpeed-vitesse-site-ecommerce-700x465.jpg\")
<\/p>\n\n
PageSpeed Insights<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"PageSpeedInsights-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/PageSpeedInsights-vitesse-site-ecommerce-700x438.jpg\")
<\/p>\n\n
Google test my Website<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"googletestmywebsite-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/googletestmywebsite-vitesse-site-ecommerce-700x534.jpg\")
<\/p>\n\n
WebPageTest<\/strong><\/h4>\n<\/li>\n<\/ol>\n
![\"webpagetest2-vitesse-site-ecommerce\"](\"https:\/\/www.creation-boutiques.fr\/prestashop\/wp-content\/uploads\/2017\/09\/webpagetest2-vitesse-site-ecommerce.jpg\")
<\/p>\nQuelles optimisations pour am\u00e9liorer la vitesse de mo<\/strong>n site e-commerce ? <\/strong><\/h2>\n
Comment compresser les images de mon site ?<\/strong><\/h3>\n
\n
Comment bien dimensionner ses images ?<\/strong><\/h3>\n
Le CSS, le JavaScript dans les fichiers externes<\/strong><\/h3>\n
R\u00e9unir les fichiers CSS et JavaScript pour les minifier !<\/strong><\/h3>\n
\nLe rassemblement des fichiers dans un unique permet de limiter le nombre de requ\u00eates vers le serveur et donc de ce fait de diminuer le temps de latence.<\/p>\n
\nPour ce faire, il faut optimiser le code (enlever les commentaires, les espaces, etc.).<\/p>\n
\nCe n\u2019est pas la solution la plus ais\u00e9e et pas forc\u00e9ment celle qui r\u00e9pondra \u00e0 votre CMS par exemple.
\nMais cela peut \u00eatre plus simple et rapide de diminuer la taille du code enregistr\u00e9 dans une version mise en cache.<\/p>\nL\u2019utilisation du CSS et des \u00ab sprites \u00bb.<\/strong><\/h3>\n
Penser \u00e0 organiser les fichiers CSS et JavaScript<\/strong><\/h3>\n
Mettre en place un syst\u00e8me de cache<\/strong><\/h3>\n
\nIl permet de garder un certain nombre d\u2019informations en m\u00e9moire pour limiter le nombre de requ\u00eates.
\nA titre d\u2019exemple, PrestaShop dispose de ce type de syst\u00e8me. Mais il est aussi possible d\u2019aller installer des plugins de gestion de la m\u00e9moire cache.<\/p>\nActiver la compression serveur !<\/strong><\/h3>\n
Mettre en place et configurer l\u2019en-t\u00eate \u00ab Expires \u00bb<\/strong><\/h3>\n
Activer le \u00ab KEEPALIVE \u00bb, les connexions persistantes<\/strong><\/h3>\n
La mise en place des CDN (Content Delivery Network)<\/strong><\/h3>\n
La mise en cache par proxy<\/strong><\/h3>\n
Pensez \u00e0 d\u00e9sactiver des scripts inutiles ou les ex\u00e9cuter moins fr\u00e9quemment.<\/strong><\/h3>\n
\nNous pouvons parfois \u00eatre tr\u00e8s surpris des fichiers !<\/p>\nOptimiser les requ\u00eates SQL vers votre base de donn\u00e9es !<\/strong><\/h3>\n
\nA titre d\u2019exemple, pour un serveur mysql, il faut activer l\u2019option pour les logs temporairement :
\n\u00ab -log-long-format \u00bb.<\/p>\n
\nPar exemple \u00ab -log-slow-queries \u00bb.<\/p>\n