Optimisation

Introduction à l’optimisation

La lenteur d’un site internet réduit significativement le temps passé par les visiteurs sur celui-ci. L’optimisation de la vitesse de votre site est donc un élément majeur à ne surtout pas négliger.

Contrairement aux idées reçues, les lenteurs d’un site ne proviennent pas forcément de la lenteur du serveur qui l’héberge. Bien-sûr, un serveur surchargé ou de piètre qualité peut causer des lenteurs, mais LRob fait tout pour éliminer cette possibilité.

Dans un tel contexte, nous constatons que les demandes concernant des lenteurs sur les sites web sont dans la vaste majorité des cas dus à un manque d’optimisation des dits sites, d’où l’utilité de cet article. (Néanmoins, en cas de ralentissement inhabituel sur votre site, n’hésitez pas à contacter votre support pour demander une vérification.)

L’optimisation peut être séparée en deux parties principales :

• Les ressources chargées par les visiteurs du site
• Les ressources CPU utilisées sur le serveur par PHP et MySQL durant le chargement des pages du site

Optimisation des ressources serveur

Le temps de chargement d’une page de votre site est directement liée à la puissance de calcul requise pour la générer. Il est donc important de s’assurer que le code PHP générant les pages soit le plus optimisé possible afin d’offrir un temps de chargement correct.

Par ailleurs, un site pas ou mal optimisé peut dans certains cas extrêmes aller jusqu’à ralentir un serveur complet. Si par exemple chaque page entraîne des requêtes MySQL très longues (plus de 20 secondes) et que le site reçoit plusieurs visites par seconde, l’utilisation CPU du serveur peut vite atteindre les 100% et les performances vont se dégrader dramatiquement, voir le serveur peut cesser de répondre.

En outre, il faut bien comprendre que PHP n’utilise qu’un seul coeur de processeur par process (et donc par page chargée). Cela signifie que le temps de chargement des pages de votre site ne sera pas plus rapide avec 8 coeurs qu’avec 2 coeurs s’il n’y a qu’un seul visiteur, mais en revanche, vous pourrez accueillir plus de visiteurs simultanément sans ralentissements.

Les optimisations suivantes sont valables pour tous les CMS (WordPress, Joomla, etc.)

Erreurs courantes à éviter

Afin de gagner du temps, commençons par les pistes qui vous feront uniquement perdre du temps et sont donc à éviter.

• Multiplier les plugins : La plupart des plugins se chargent à toutes les pages, ralentissant chaque fois un peu plus votre site. De plus, certains peuvent entrer en conflit et l’addition de nombreux plugins multiplie d’autant le risque de rencontrer des bugs.
• Utiliser des plugins de cache (WPSupercache, WPRocket…) : Les systèmes de cache peuvent générer de nombreux problèmes et les pages dynamiques, si elles fonctionnent encore, resteront lentes. Il faut prendre le problème à sa source et non pas utiliser un paliatif généralement bien moins efficace qu’une réelle optimisation.
• Garder un site non à jour avec une version de PHP osbolète : Outre le problème de sécurité dramatique occasionné, vous divisez potentiellement par 1,5 à 3 les performances de votre site.

Mises à jour

Assurez-vous que votre CMS soit bien à jour, de même que tous ses thèmes, modules, extensions etc.

Version de PHP

Assurez-vous d’utiliser la dernière version de PHP supportée (réglable via votre Panneau de contrôle Plesk, chaque nouvelle version de PHP depuis PHP 7.0 améliore les performances.

Plugins et extensions

• Limitez autant que possible le nombre de plugins/extensions/modules installés, chaque module est une source de ralentissement supplémentaire.
• Vérifiez que vous n’avez pas de plugins ou modules trop gourmands en performances. Désactivez tous les modules, vérifiez la vitesse du site, puis réactivez-les progressivement pour trouver le ou les plugins qui ralentissent le site. Cela est également valable pour les thèmes.

Bases de données MySQL

• Réduisez le volume de votre base de données.
• Plus la base de données MySQL est petite, plus les performances seront bonnes.
• Si votre base de données contient des logs de connexion ou autres, trouvez le moyen de la nettoyer périodiquement (via le backoffice, via un plugin, ou via PHPMyAdmin par exemple).
• La base de données d’un CMS (sauf exceptions où il y a réellement beaucoup de données, sur un site journalistique par exemple) ne devrait pas excéder les 100Mo grand maximum.
• Vérifiez le contenu des commentaires qui peuvent contenir des spams, vérifiez les paramètres d’inscription et la politique d’acceptation des commentaires sur le site.

Optimisation ressources client

La taille d’une page, le nombre de ressources chargées, leur provenance, la taille des images et leur compression, sont autant de paramètres qui entrent en jeu dans la vitesse de chargement d’un site.

Mesure d’optimisation avec GTMetrix

Le site https://gtmetrix.com/ permet d’analyser dans le détail les performances de votre site du point de vue des visiteurs.

Avant toute opération d’optimisation des ressources, nous conseillons de réaliser ce test afin de vous donner une bonne idée des éléments à travailler mais également pour suivre la progression des optimisations apportées.

Nous allons vous détailler quelques recommandations les plus fréquentes sur ce wiki, mais la liste n’est pas exhaustive et nous vous invitons à compléter vos recherches si besoin.

Taille globale de la page

Il faut penser que chacun n’a pas une connexion internet rapide ou un périphérique performant (mobile ou autre) pour visionner votre site.

• Nous conseillons dans la mesure du possible de rester autour des 1Mo maximum pour votre page, de sorte qu’une connexion à même à seulement 2Mbit/s charge la page en 5s environ.
• Si votre site est très « graphique » et comporte de grandes images, vous pouvez éventuellement monter à une taille de page de 2Mo.
• Si vous avez un site de photographie, alors il n’y a plus vraiment de normes, mais l’idéal est d’avoir un aperçu des images compressé et possibilité d’agrandir les images en bonne qualité.
• Si vous insérez des vidéos, sauf exception, mieux vaut utiliser un site externe (YouTube, Vimeo, etc.) qui sera très doué pour proposer différentes qualités et compresser la vidéo comme il se doit.

Nombre de requêtes externes

Il s’agit requêtes faites à la visite de votre site, pour charger des ressources qui ne proviennent pas de votre site. Les ressources externes sont généralement coûteuses en temps de chargement.

Elles proviennent principalement de thèmes et plugins modifiant l’apparence de votre site, et contiennent surtout des polices, des scripts JS et du CSS.

Une ressource externe entraîne que pour chaque site contenant une ressource, une requête DNS supplémentaire sera effectuée par le visiteur. Ces requêtes prennent quelques millisecondes, qui mises bout à bout peuvent prendre un temps non négligeable, en tout cas pour le premier chargement de page.

De plus, les serveurs externes peuvent être basés loin du pays du visiteur, augmentant la latence et abaissant le débit.

Il faut donc essayer de minimiser autant que possible les ressources externes chargées. Celles-ci sont bien-sûr indiquées par GTMetrix dans le rubrique « YSlow » et « Make fewer HTTP requests » ainsi que dans le « Waterfall ».

Idéalement, il faudrait ne charger aucune ressource externe, mais cela est quasiment impossible avec un CMS moderne. Le seuil à éviter de dépasser est donc 30 ressources externes.

Nombre total de requêtes

Chaque ressource génère un petit temps de latence. S’il y a trop de ressources, différentes, le site est ralenti, en particulier sur les connexions ayant un ping (temps de latence) important.

Cette valeur est indiquée en haut à droite du test GTMetrix : « Requests »

Nous conseillons d’essayer de rester sous la barre des 100 requêtes.

Gestion des images

Mise à l’échelle des images

Il faut tenter, dans la mesure du possible, de ne charger dans le site que des images à la taille finale à laquelle elles seront affichées.

Il va de soi que par exemple, mettre une image haute résolution en miniature d’un article n’est pas optimal, pourquoi charger une image de 8Mo en haute résolution alors qu’une image de quelques Kilo Octets en 128×128 aurait peut-être suffit ?

Par chance, la plupart des CMS y-compris WordPress qui a longtemps été en retard sur ce sujet, gèrent les miniatures et sont capables de générer différentes tailles d’images puis d’utiliser la bonne en fonction du contexte. Il faut cependant s’assurer que le thème exploite ensuite correctement ces miniatures. Si ce n’est pas le cas, il faut redimmensionner manuellement les images.

Certains plugins proposent d’effectuer cette tâche : Je vous conseille de sauvegarder vos fichiers et votre base de données avant cette opération qui est risquée.

Via GTMetrix, cette information se site dans « PageSpeed » rubrique « Serve scaled images ».

Sur serveur VM et dédié, cela peut être aidé par le module Google PageSpeed intégrable à Plesk. Le module peut convertir à la volée et à la taille de l’écran les images du site (pour peu que la taille des images ne soit pas trop importante à la base). Cela peut être mis en place par votre support et nécessitera de votre part la mise en place d’une clé API Google pour fonctionner.

Optimisation de la compression des images

Il est recommandé d’utiliser un bon taux de compression des images ainsi que des formats modernes.

Comme pour la mise à l’échelle, le module « PageSpeed » (VM et dédiés uniquement) peut aider sur ce point.