Pour avoir un site qui s'affiche rapidement, et donc vendre de manière optimale, il faut réunir 3 conditions : - serveur dont les composants sont à la pointe de la technologie : NVMe SSD 3D - combinaison particulière de logiciels serveurs (notre savoir-faire) - site web optimisé un minimum et qui utilise PHP7, Prestashop est très rapide sur nos serveurs sous forme native, veillez à ce que les thèmes et modules personnalisés ne dégradent pas la performance... Utilisez le navigateur Chrome qui est vraiment plus rapide que Firefox Nous confirmons que nos serveurs sont très bien optimisés pour Prestashop, et un site comparaison d'hébergeur web fait le test quotidien de nos serveurs, nous sortons dans le top 3, voyez le lien ici Pour Prestashop, les meilleures performances sont obtenues avec la branche 7 de PHP - Opcache est déjà activé par défaut au niveau serveur avec les versions PHP compatible - Vérifiez bien la compatibilité de votre thème et vos modules/plugins...

Lisez notre article sur l'impact de la vitesse d'un site web sur sa performance générale

Section Performances de l'admin Prestashop :
Type cache en haut : 'Système de fichiers' est très performant avec le NVMe SSD dans les dernières versions Prestashop, ou 'MySQL' (le gain dépendra de votre site, vous devrez tester), sinon utilisez Opcache.
Laissez activer si possible : désactiver toutes les sur-charges
CCC :Il est normalement recommandé de tout laisser activé, et désactivez ceux qui posent problème comme /ex : 'réduction code html', et 'move javascript to the end'.
Dans l'admin Prestashop section 'Performances', tout en bas de la page, laissez tous les cache désactivés car ils ne procurent pas de meilleurs résultats

Une fois votre développement fini, n'oubliez surtout pas de désactiver : 'Forcer la compilation à chaque appel' 

A connaître, tester :
https://dh42.com/free-Prestashop-modules/Prestashop-Opcache-manger-module/
Permet seulement de visualiser l'effet Opcache
https://jpresta.com/fr/accueil/1-page-cache.html 
Permet d'optimiser sur mesure....

 

Comment simuler correctement la réalité de l'expérience d'un visiteur sur votre site ?

Nous recommandons par ordre de pertinence ces sites de test en ligne :

https://www.uptrends.com/tools/website-speed-test

https://web.dev/measure 

https://pagelocity.com 

https://www.dotcom-tools.com/website-speed-test.aspx 

http://www.webpagetest.org 

https://tools.pingdom.com 

A lire pour plus d'outils

NB :

- Les plus importants critères sont le 'First byte time', le speed index et surtout le 'Start Render', donnés sur le site webpagetest.org
- Pagespeed insights est le plus mauvais outil de score en ligne, car incomplet et erroné
- Les sites de tests ne voient pas notre compression Gzip

Savez-vous que tester en ligne un site web basé seulement sur la page d'accueil est loin d'être une évaluation complète ? voici pourquoi...

Un visiteur n'est en général pas découragé parce que votre site charge entre 3-5 secondes au premier chargement, (si c'est 10 secondes c'est trop effectivement), votre visiteur va bénéficier d'une vitesse plus rapide pour les pages suivantes visitées depuis nos serveurs, grâce aux réglages activés par défaut pour mettre en cache au niveau du navigateur du visiteur, c'est à dire que seulement les nouveaux éléments des pages visitées au cours de la visite seront envoyés depuis le serveur, le reste vient de son cache navigateur (imbattable en terme de vitesse)...
Le test seul de la page d'accueil permet de comparer la vitesse entre 2 services d'hébergement web, et aussi de constater le degré d'optimisation de la page d'accueil ou celle testée... (Nous avons vu de nombreux sites avec aucun problème en page d'accueil, alors que de gros problèmes apparaissaient en pages catégories et produits, liés à des modules non optimisé ou mal conçus...)

Ainsi, si vous utilisez un site de test en ligne, vous devez faire 3 tests pour constater soit la vitesse de 2 serveurs ou l'optimisation dune page de votre site web : page d'accueil, 1 page catégorie, 1 page produit.
Notez que :
- les sites de tests en ligne nettoient leur cache à chaque demande en général, cela ne représentera donc toujours pas la réalité exacte de l'expérience d'un utilisateur
- plus de 50% des visiteurs arrivent sur votre site sur une page qui n'est pas votre page d'accueil...

Pour simuler la réalité de l'expérience d'un utilisateur, vous devrez le faire depuis votre PC en installant le plugin Chrome nommé Apptelemetry (vous allez avoir un compteur affiché à droite de la barre de votre URL) : https://chrome.google.com/webstore/search/apptelemetry
Nettoyez votre cache, et visitez votre site en allant sur chaque type de page, et constatez les temps de chargement à partir de la seconde page visitée...
Utilisez "Inspect elements" avec le bouton droit de votre souris dans chrome ou "Examinez l'élément" dans firefox, voyez l'onglet "Performances", activez l'enregistrement. Maintenant naviguez sur votre site web pour obtenir le waterfall, et éventuellement identifier des éléments qui poseraient problème...

Pour un test avancé et simulé avec des visiteurs en réel, nous recommandons cet unique service :
https://www.userlynx.com/

1. Prestashop est livré avec une bonne quantité de modules activés, et dont vous n'utiliserez que 40% en moyenne...

Il faudra donc désactiver un par un ceux que vous n'utiliserez pas, une fois que vous avez installé votre thème seulement (car cela rajoute des modules).
Cliquez sur Oui pour : 'Désactiver toutes les surcharges', dans la section Performances (Ceci peut ne pas convenir à tous les sites en raison de modules/thèmes spécifiques)

Très important :
Faîtes des tests de nouveau à chaque étape d'optimisation/action (ajout/suppression/activation de plugins) afin d'identifier facilement quelle action a causé une amélioration ou dégradation de la performance. Sans cette patience, et l'observation nécessaire, il sera beaucoup plus difficile de rechercher l'aiguille dans la botte de foin si vous n'avez pas une expertise d'un certain niveau.

La clé pour réussir ce début d'optimisation est non seulement de désactiver/désinstaller les modules, mais surtout d'enlever le hook de ces modules dans hook_header, en plus de celui ou ils sont censés s'afficher...
Le poids d'une page, exceptée la page d'accueil, ne doit pas dépasser 3MB...

Un exemple d'un test avec webpagetest.org sur un site assez bien optimisé :

https://www.biwi-shop.com

 

Autre site avec de bons résultats : https://www.ctechnik.com

Voici le score de notre site web dont l'optimisation est maximisée en fonction de nos contraintes techniques et choix de contenus :
https://www.yoorshop.hosting/images/webpagetest-yoorshop.JPG

Le 'First byte time' comprend le chargement initial et quasi simultané de nombreux éléments (sans cache précédent côté visiteur final) :
- résolution DNS initiale
- la mise en place de la connexion initiale SSL quand le site est en SSL (voir notre point 9 avec le SSL offload pour réduire ce délai)
- chargement initial du site qui comprend le CMS Prestashop

Tous les caches serveurs, et du site web feront que les prochaines pages visitées seront vues beaucoup plus rapidement...

Le 'Start render' et le 'Speed index' sont très importants (à partir de quand sont affichés des éléments).
Ref : https://blog.dareboost.com/fr/2015/07/start-render-visually-complete-speedindex/

Il est absolument normal de voir un score N/A ou D pour la compression images, cela dépend de vos images, et la compression doit être faite par vous en amont, et non le serveur qui ne peut les compresser de manière significative...

Etudiez aussi les résultats du 'waterfall', mais aussi activez dans Prestashop le 'debug profiling' pour plus de détails !

Pour 'waterfall', n'oubliez pas que vous pouvez faire ce test plus précisément depuis votre propre ordinateur en utilisant la fonction 'Inspecter l'élément' de votre navigateur, voir l'onglet 'réseau'

2. Les modules statistiques internes ralentissent beaucoup Prestashop, mieux vaux utiliser simplement le module google analytics, ou statcounter

3. Avoir un bon hébergeur comme YOORshop, nos serveurs sont puissants et performants (SSD + serveurs Nginx et litespeed + http2) et sont paramétrés avec des optimiseurs diverses qui contribuent naturellement à une bonne performance. Le processeur alloué à votre compte joue aussi un rôle important (le prix de nos offres est proportionnel au processeur)

4. Vérifiez la bonne exécution des Javascript et des divers modules (catégories, sliders), et à la fin de votre page (activez dans Performances 'Exécuter Js à la fin').  Nous avons déjà vu que la fonction ne marche pas correctement avec certains modules, testez voir des différences en les désactivant, et vérifiez le code donc si nécessaire... ou le 'waterfall' du test en ligne : http://www.webpagetest.org/ 

5. Pensez aussi à tester/activer Cloudflare gratuit depuis votre cPanel et évaluer si il y a un gain pour votre site (vous devez avoir au préalable optimiser votre si il ne l'est pas, c'est incontournable avec ou sans cloudflare !), normalement intéressant pour les sites avec beaucoup de contenus, et très utile uniquement si votre marché cible se situe sur des continents lointains....
(Les tests doivent durer au moins 3 jours le temps que Cloudflare ait mis en cache suffisamment de requêtes)
Pour un site SSL et meilleure performance aussi, le moins onéreux est : https://www.keycdn.com/?a=31796 

6. Périodiquement, purgez votre base de données
https://support.yoorshop.hosting/knowledgebase/1295/Optimisation-bases-de-donnees.html

7. Soyez en 50-100% SSL, et bénéficiez de la vitesse du protocole HTTP2  :
https://support.yoorshop.hosting/knowledgebase/1551/Comment-installer-un-certificat-SSL.html

8. Optimisation avec PageSpeed
https://support.yoorshop.hosting/knowledgebase/3242/Optimisation-avec-PageSpeed.html

9. Nous proposons la fonctionnalité 'SSL offload' qui permet de réduire le temps de chargement lors de la première connexion (si votre site affiche une erreur, ceci signifie qu'il est incompatible avec cette fonction). Pour l'activer/tester, depuis votre cPanel, tout en bas, icone Nginx Manager, choisissez votre domaine, puis 'General settings', cliquez sur 'enabled' pour la ligne SSL Offload, puis plus bas à droite, sauvegardez en cliquant sur le bouton dans la section 'Save settings'