On peut regrouper les performances en deux grandes parties. Tout d’abord le front-end , qui est le temps mis par l’utilisateur pour afficher complètement une page web, c’est à dire le code HTML, les images, exécuter les scripts, etc …). Il est dépend très fortement du navigateur internet et de la connexion internet. Certains navigateurs sont réputés plus rapides et bien sûr une connexion EDGE ou 3G sera plus lente qu’une fibre FTTO à débit garanti et une QoS aux petits oignons.
La performance front-end impacte fortement l’expérience utilisateur et indirectement le CA du site.
Les performances back-end sont liées au temps de génération de la page par le serveur web. Elles impactent le SEO mais aussi une partie, mineure souvent, de la navigation utilisateur.
Les mauvaises performances sont liées essentiellement dues :
-
à la taille de le page et de ses éléments (photos, vidéos, polices, scripts, …)
-
au nombre d’éléments, évidemment, au plus il y a de photos, de fichiers css, au plus ce sera long
-
à l’ordre de chargement, par exemple un javascript peut être chargée en fin de page pour ne pas être bloquant
Il est possible de mesure la vitesse et d’avoir une plan d’action avec des outils comme Google PageSpeed Insight, GTMetrix, Pingdom.
Voici ma check-list pour optimiser facilement le front-end la vitesse de Prestashop :
-
Autoriser le mode deflate (compression) du serveur web. A demander à votre hébergeur.
-
Activer les trois caches CCC de Prestashop. Ils permettent de diminuer la taille des fichiers, leurs nombres et optimise la mise en cache du serveur web. C’est très efficace.
-
Supprimer les métadatas et compresser les images. Côté serveur essayez les outils jpegoptim et optipng. Avec deux lignes de commande, votre sysadmin optimisera toutes les images que votre graphiste aurait oublié ! C’est souvent oublié et si facile à faire.
-
Utilisez un CDN, ce n’est pas cher, c’est facile et très efficace ! Regardez du côté d’Azur, AWS, CloudFlare. Cela se configure dans le back-office Prestashop. Remplissez les champs pour les 3 CDN (et pas un seul) pour paralléliser plus de téléchargement par le navigateur.
-
Evitez les vidéos background, c’est tendance mais long à charger, de même pour les grandes images HD background.
-
Est ce que toutes les polices chargées sont vraiment nécessaires ? Pour celles qui le sont, utilisez le format woff2 plus rapide.
-
Pour les images, utilisez un format approprié aux objectifs. Bannissez le PNG-24, essayez d’utiliser les formats JPEG, PNG-8 et SVG.
-
Avez vous besoin de charger toutes ces widgets des réseaux sociaux ? Ils sont souvent très gourmands en temps de chargement.
-
Nettoyer les feuilles de style CSS pour supprimer les règles inutiles. C’est du temps de chargement et interprétation par le navigateur. Des outils comme unusedCSS aident à cette tâche.
-
Essayez de réduire le volume du code HTML, est ce qu’autant d’imbrications de balises sont utiles ?
-
Utilisez des sprites CSS pour les icônes. Avec cette technique, une seule image contenant toutes les icônes est chargée. En CSS, vous n’affichez que la portion qui vous intéresse. Vous n’avez à faire plus qu’une seule requête HTTP.
-
Listez les modules actifs, désactivez tous ceux qui ne vous servent pas.
-
Côté serveur, utilisez HTTP/2.
-
Hébergez le site à proximité de vos clients. Le TTFB (time to first byte) ne sera que plus court.
-
Activez la journalisation des erreurs php (des outils comme Sentry sont très pratique sur un site en production), mais bien sûr pas l’affichage aux visiteurs. S’il y a une erreur php, corrigez là, même un simple avertissement, c’est :
-
-
un problème de performance,
-
une erreur de développement même si vous ne voyez pas de problème fonctionnel,
-
une faille de sécurité potentielle.
-
-
De la même manière, contrôlez dans les journaux du serveur web s’il y a des erreurs 50x. Cela permet d’identifier des afflux de visiteurs par exemple pour mieux les gérer.
-
Lancez les tâches planifiées coûteuses en ressource au moment où il y a le moins de visiteurs (indexation du moteur de recherche par exemple).
-
Faites attention aux ressources externes chargées. Par exemple un script javascript d’un module, cela peut devenir bloquant si la ressource n’est pas disponible. Hébergez là plutôt sur votre serveur ou sur un CDN.
-
Refaite l’audit (Google PageSpeed, GTMetrix, etc …). La note en soi n’est pas intéressante, mais les préconisations sont plus utiles que la note pour faire un nouveau cycle d’améliorations.
Bonnes optimisations !
