Vous entendez souvent parler de vitesse ou de performance pour votre site web mais vous ne savez pas vraiment comment faire pour l’optimiser ?
Il faut d’abord savoir qu’on entend par vitesse ou performance, le temps de chargement que votre site met pour s’afficher.
L’idée est que ce temps soit le plus court possible, c’est à dire moins de 2 secondes.
La patience des internautes est beaucoup plus limitée sur internet.
La vie étant elle-même de plus en plus rapide, et sur le web encore davantage, ils n’ont pas le temps, ni la patience, d’attendre.
Bref, il y a de fortes chances qu’ils quittent votre site au bout de 3 secondes si celui-ci est trop lent à charger.
Qui n’a jamais quitté un site, bien qu’il l’intéressait, parce qu’il mettait trop de temps à s’afficher ?
Pour vos donner une idée, 53% des visiteurs sur mobile quitte le site s’il met plus de 3 secondes à charger, imaginez alors le nombre de personnes que vous pouvez potentiellement perdre si votre site est trop long !
Non seulement cela a un impact sur l’expérience utilisateur de vos visiteurs mais en plus, cela a un impact sur votre référencement car depuis l’algorithme « Google Page Experience », le critère de la performance est directement pris en compte.
Entre 2 sites équivalents en terme de qualité de contenu, celui qui a le plus de chance d’être bien classé sur les moteurs de recherche est celui qui est le plus rapide.
Vous avez donc tout intérêt à ce que votre site soit performant, tant pour l’expérience utilisateur que pour votre SEO.
A ce propos, vous vous demandez peut-être comment savoir pour connaître ce temps d’affichage ?
Et bien il existe des outils en ligne gratuits qui vous permettent de le mesurer.
Ces sites testent la vitesse de votre site mais vous donnent également les points à améliorer.
Les outils pour mesurer la vitesse de chargement et la performance
Mon petit préféré est GT Metrics , il vous suffit de rentrer votre site web et la ville de test, prenez la plus proche de chez vous.
Il vous donne le temps de chargement mais aussi le poids de votre page, les indicateurs que Google prend en compte et les éléments à améliorer.
Vous pouvez aussi tester sur Dareboost , l’avantage est qu’il est en français. Quand il s’agit de jargon, on sait bien le confort que cela représente.
Il existe également Pingdom Tools et l’outil de Google, PageSpeed Insights.
Maintenant que vous connaissez la vitesse d’affichage de votre site, comment faire pour l’améliorer ?
Voici quelques bonnes pratiques à mettre en place pour optimiser la performance de votre WordPress :
Opter pour un hébergeur fiable
Pour rappel, l’hébergeur est l’endroit où votre site est stocké, il joue un rôle primordial dans la performance de votre site.
Évitez donc de prendre un hébergeur pas cher pour faire des économies, vous y perdrez forcément en qualité.
Optez plutôt pour un hébergeur fiable et reconnu sur le marché.
Les sociétés d’hébergement proposent souvent plusieurs plans : Le mutualisé, le VPS ou l’hébergement dédié WordPress.
Choisissez la formule qui correspond le mieux à votre besoin.
Par exemple, si vous avez un site vitrine ou un blog, le mutualisé convient tout à fait, je recommande dans ce cas o2Switch.
Par contre, si vous avez un e-commerce qui nécessite beaucoup de ressources, optez pour l’hébergement dédié WordPress, WPServer peut être très bien dans ce cas de figure.
Passer à la version 8 de PHP
Lorsque vous prenez votre hébergement, assurez-vous que le serveur tourne bien sur la version PHP8.
Cette version est de loin la plus performante.
Si vous avez déjà un site depuis plusieurs années, vérifiez sur quelle version il tourne.
S’il est sur une version ancienne comme PHP6, il est conseillé, pour gagner en performance, de passer sur la version 8.
WordPress est d’ailleurs prévu pour tourner sur cette dernière version.
Cette manipulation peut être redoutée, car elle peut casser votre site. Cela est dû au fait que votre thème ou vos plugins ne sont pas compatibles avec PHP8.
En général, les développeurs proposent des mises à jour, si ce n’est pas le cas, il faudra sans doute en changer.
Mais pas d’affolement non plus, vous pouvez tester le fonctionnement de votre site sur la version PHP8 et revenir sur l’ancienne s’il ne tourne pas correctement en attendant de trouver des solutions.
Installer un plugin de cache
L’utilisation d’un plugin de cache est indispensable pour augmenter les performances de votre site internet.
Le fonctionnement est simple : le plugin de cache crée une copie statique de votre page web sur le serveur afin de la servir plus rapidement à votre visiteur.
Il existe un certain nombre de plugins sur le marché, je conseille le combo WP Super Cache + Autoptimize, pour en avoir testé quelques-uns, je les trouve très efficaces.
Il faut savoir qu’ils sont assez techniques à paramétrer et qu’ils risquent aussi, selon les réglages que vous faites, de casser le site mais pas d’affolement, il suffit d’annuler le réglage qui pose problème et tout rentre dans l’ordre.
Utiliser un CDN pour les sites internationaux
Le principe d’un Content Delivery Network (réseau de diffusion de contenu, en français) est de faire charger votre site depuis un serveur localisé au plus près de chez vous.
L’idée est, en effet, de placer un maximum de serveurs sur la planète afin que votre site soit accessible rapidement depuis n’importe quel endroit.
Votre CDN envoie alors les pages en cache de votre site à un grand nombre de serveurs tout autour du monde.
Si, par exemple, votre hébergeur se situe en France et que votre site a beaucoup de trafic depuis le Canada, les données doivent voyager entre les pays et la distance étant telle que la connexion est réduite. Par contre, si vous avez un CDN, le site est stocké sur un serveur au Canada et il s’affiche alors plus rapidement.
Lorsque vous choisissez votre CDN, prenez donc en compte la géolocalisation de ses serveurs en fonction de la provenance de vos visiteurs.
Ce serait dommage d’avoir un CDN et qu’il n’y ait pas de serveurs à l’endroit que vous souhaitez.
Un CDN a donc un fort intérêt lorsque votre trafic est international. Cependant, si votre trafic est local et que votre hébergeur est dans votre pays, l’intérêt est beaucoup moindre.
Enfin, un CDN fonctionne uniquement si vous avez installé un plugin de cache sur votre site.
Optimiser les images pour le web
Les images, lorsqu’elles ne sont pas optimisées correctement, sont une catastrophe pour la vitesse de chargement de votre site car elles consomment beaucoup de ressources.
Alors que c’est une pratique plutôt facile à mettre en place, on peut voir que sur bon nombre de sites web, elles sont la cause principale de problème de performance.
Entre autre parce que les utilisateurs ont tendance à vouloir en mettre partout et en très haute qualité sans les optimiser en amont.
Pour qu’une page web se charge rapidement, elle ne devrait pas dépasser les 2 Mo.
Sachant que ce sont, en général, les images qui ont le plus d’importance en terme de poids, elles ne devraient pas excéder en tout entre 1 et 1.5 Mo par page.
Tout l’enjeu est donc de trouver un bon équilibre entre le poids et la qualité de l’image.
Pour cela, il y a plusieurs éléments à prendre en compte, EN AMONT :
Le format de l’image : Sur le web, il vaut mieux utiliser le JPEG voire le PNG. Le JPEG étant plus léger, il est à privilégier notamment pour les images en couleur. Le PNG gérant la transparence, on l’utilisera donc pour les images à fond transparent. Il existe également les formats dits « nouvelle génération » comme le WebP qui sont très légers.
Les dimensions de l’image : Si vous savez quelles dimensions maximum vos images prendront, il vaut mieux déjà les redimensionner avant de les mettre sur votre site. Pensez bien à prendre en compte les dimensions maximum pour qu’elles s’affichent de façon optimale sur tous les écrans, pensez responsive design !
Vous pouvez le faire directement sur un logiciel comme Gimp ou Paint, ou utiliser des sites en ligne qui le font gratuitement comme iloveimg.
Le poids de l’image : Il s’agit de réduire le poids au maximum tout en préservant une bonne qualité d’image. Pour compresser vos images, j’aime beaucoup Image compressor qui permet de voir l’image en direct au fur et à mesure de la compression.
Choisir un thème léger
Le choix de votre thème est un élément fondamental pour la performance de votre site. S’il est trop lourd et mal codé, il ralentira considérablement votre site.
Avant de le choisir, réfléchissez aux fonctionnalités dont vous avez vraiment besoin. Pas la peine de prendre un thème avec des tas de fonctionnalités si vous ne les utilisez pas.
Beaucoup de ces fonctionnalités sont d’ailleurs des gadgets qui sont amusants au premier abord mais qui, au final, n’apportent pas grand chose et que vous n’emploierez peut-être pas.
Optez plutôt pour un thème responsive design et qui est compatible avec la dernière version de WordPress donc mis à jour régulièrement.
Pour mesurer ses performances, vous pouvez charger sa demo sur un des outils de test que je vous ai donnés au début de cet article, vous aurez alors toutes les informations nécessaires pour vous décider.
Je recommande de partir sur un thème léger et minimaliste de base, comme GeneratePress, OceanWP ou Blocksy et de le complexifier éventuellement par la suite. Ce sera toujours plus facile dans ce sens là que de partir sur un thème lourd puis de l’alléger ensuite.
Si vous avez, par exemple, besoin d’un constructeur de pages, il vous suffira de le rajouter, Je conseille Elementor, qui est très bien conçu et performant.
Sachez aussi qu’avec le nouvel éditeur Gutenberg livré avec WordPress, vous avez déjà la possibilité de faire pas mal de choses.
S’assurer de la qualité des plugins
WordPress est réputé pour avoir un nombre de fonctionnalités très important.
Des milliers d’extensions sont proposées dans le répertoire officiel, ce qui peut donner envie de les tester et d’en installer une multitude afin d’augmenter les fonctionnalités de son site.
Ce qu’il faut savoir, c’est que bien qu’ils soient passés par des tests faits par WordPress, ces plugins, bien souvent gratuits, peuvent être développés par des personnes qui ne se soucient pas forcément du code et de la performance, ni même de la sécurité.
Ils peuvent donc ralentir considérablement la vitesse de votre site, voire le casser.
Il faut donc être vigilant quant aux plugins que vous utilisez. Avant de les installer, vérifiez bien leur qualité, s’ils sont mis à jour régulièrement, leur évaluation par les utilisateurs, leur support etc.
Vous pouvez, comme pour le thème, mesurer leur performance sur les outils de test.
De plus, préférez des plugins qui gèrent plusieurs choses à la fois que plein de petits plugins différents.
Enfin, sachez que, même si ce n’est pas la quantité de plugins qui ralentit votre site mais leur qualité, il vaut mieux les utiliser s’ils sont vraiment nécessaires.
Avant d’installer votre extension, demandez-vous quel en est réellement l’intérêt et si vous ne pouvez pas plutôt rentrer un petit bout de code à la place !
Supprimer les plugins et thèmes inactifs
Lorsque vous voulez ajouter une nouvelle fonctionnalité à votre site, vous allez sans doute vouloir tester plusieurs plugins pour savoir lequel correspond le mieux à votre besoin.
Il y aura donc plusieurs extensions semblables installées sur votre site. Pensez bien à les désactiver puis à les supprimer correctement ensuite.
De plus, si vous n’utilisez plus un plugin, rien ne sert de le garder, à part si vous souhaitez ralentir votre site.
C’est pareil pour le thème.
Avant de vous décider, vous avez peut être testé différents thèmes, maintenant que votre choix est fait, supprimez tous les thèmes inactifs, sauf un, qui vous servira de test en cas d’éventuels bugs.
Bien sûr, tous ces conseils valent si vous n’avez pas testé en local ou sur un clone, comme je le recommande dans la plupart de mes articles : Toujours tester thèmes et plugins avant d’installer définitivement sur votre site en production !
Optimiser la base de données
Le problème qui se pose également avec les plugins, c’est qu’ils peuvent laisser des tables et des lignes dans votre base de données même si vous les avez retirés, d’où le fait de les supprimer correctement.
Cela est dû au fait que, parfois, les développeurs se fichent de polluer votre base de données ou alors parce qu’ils préfèrent laisser en mémoire les réglages si l’utilisateur décide finalement de réinstaller le plugin.
Avec le temps, le nombre de tables et de lignes peut commencer à ralentir votre site, il faut donc nettoyer votre base de données en supprimant celles qui ne servent plus.
Par ailleurs, votre base de données s’alourdit également par le nombre de révisions et de brouillons de vos pages et articles, de commentaires spammés, de transients etc.
Si le nettoyage manuel vous semble trop technique, je vous conseille, dans ce cas, d’utiliser un plugin comme Advanced Database Cleaner.
Pensez aussi à jeter un coup d’œil à votre FTP, il se peut que des dossiers et fichiers soient encore présents.
Minifier et concaténer les fichiers CSS et JavaScript
Tout comme les images, vos fichiers CSS et JavaScript peuvent également être optimisés.
Ceux-ci peuvent comporter des données inutiles comme des lignes de commentaires, des espaces etc. qui ne font qu’alourdir la vitesse de chargement, il faut alors les minifier.
Il est aussi possible de réduire leurs chaînes grâce à la concaténation.
Le plugin Autoptimize s’occupe de gérer ça mais l’opération reste délicate et peut perturber l’affichage de votre site. Il suffit dans ce cas, de ne pas activer l’option en cause.
Ce plugin peut s’occuper également de différer le JavaScript qui peut ralentir le chargement du site lorsqu’il est placé en haut du code source.
Configurer le fichier .htaccess
Le fichier .htaccess est un fichier de configuration Apache (logiciel utilisé par votre serveur), il se trouve à la racine de votre site et dans les répertoires.
Il permet, entre autres, d’améliorer la vitesse de chargement de votre site, d’optimiser sa sécurité ou de faire des redirections.
Je vous donne ici, quelques lignes de code à lui ajouter afin de :
Activer la mise en cache du navigateur de vos visiteurs
Pour que le chargement soit plus rapide, certains fichiers peuvent être stockés dans le cache du navigateur de vos visiteurs, cela évitera de recharger à chaque fois tous ces fichiers. La mise en cache sera effective selon le temps paramétré.
Si vous utilisez un plugin de cache, il le gère déjà.
Mise en cache du navigateur :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/pdf "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/css "access plus 6 month"
ExpiresByType application/javascript "access plus 6 month"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
</IfModule>En-têtes :
Header unset ETag
FileETag None
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>Activer la compression Gzip
Vous pouvez en plus ajouter une couche de compression afin que la taille de vos fichiers soient réduites.
Si vous utilisez un plugin de cache, vérifiez s’il le fait.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/xhtml text/html text/plain text/xml text/javascript application/x-javascript text/css
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/jsonConfigurer le fichier wp-config.php
Vous pouvez également, tout comme le fichier .htaccess, rajouter quelques lignes de codes à votre fichier wp-config.php afin de :
Augmenter la taille mémoire limite de WordPress
Par défaut, cette taille est de 32M, afin d’augmenter les performances de votre site, vous pouvez la mettre à 96M.
define('WP_MEMORY_LIMIT', '96M');Désactiver et/ou limiter les révisions d’article
WordPress garde en mémoire les révisions de vos articles et cela prend une place non négligeable sur votre base de données, vous pouvez les retirer, si cela ne vous sert pas ou alors les réduire, pour l’exemple, elles sont réduites à 3.
define('WP_POST_REVISIONS', false);
define('WP_POST_REVISIONS', 3);Voila pour ces conseils et techniques à mettre en place afin d’accélérer la vitesse de votre site, vous pourrez voir que vous allez gagner pas mal de temps de chargement.
