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 ?
Vous voyez ce que je veux dire ? Imaginez alors le nombre de visiteurs 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 indirect sur votre référencement.
Si l’utilisateur quitte votre site rapidement, cela signifie pour Google qu’il n’a pas trouvé ce qu’il venait chercher, vous risquez donc de perdre votre positionnement.
En bref, vous aurez plus de chance d’être bien classé sur les moteurs de recherche si votre site est 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 Pingdom Tools , 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 et les informations à 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 rentre un peu plus dans les détails en vous donnant le début et la fin du temps de chargement et toutes les pistes d’amélioration.

Il existe aussi GT Metrics ou PageSpeed Insights de Google.
Je ne recommande pas ce dernier car il donne un score de performance qui n’a pas de rapport avec la vitesse de chargement. Aussi, Vous pouvez avoir un score faible mais un chargement rapide et inversement.

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 petit site vitrine ou un blog, le mutualisé peut convenir, 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 est très bien dans ce cas de figure.

 

Passer à la version 7 de PHP

Lorsque vous prenez votre hébergement, assurez-vous que le serveur tourne bien sur la version PHP7.
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 PHP5, il est conseillé, pour gagner en performance, de passer sur la version 7.
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 PHP7.
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 PHP7 et revenir sur l’ancienne s’il ne tourne pas correctement en attendant de trouver des solutions.

 

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, 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 voire inexistant.
Enfin, un CDN fonctionne uniquement si vous avez installé un plugin de cache sur votre site.

 

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 : il est de limiter les requêtes faites à votre serveur lors du chargement d’une page et faisant une copie statique de cette page dans le navigateur de votre visiteur.
Le navigateur de l’internaute n’aura donc pas à recharger tous les éléments de la page lors de sa prochaine visite mais seulement les nouveaux éléments.
Il existe un certain nombre de plugins sur le marché comme W3 Super cache ou WP Super Cache , en version gratuite ou freemium. Vous pouvez, en surcouche, leur ajouter le plugin Autoptimize en optimisation.
Le problème est qu’ils sont assez compliqués à paramétrer et qu’ils risquent aussi, selon les réglages que vous faites, de casser le site.
Il existe un autre plugin, WP Rocket, qui est beaucoup plus intuitif et facile à mettre en place. Il est en français, ce qui ne gâche rien et surtout très efficace (mais comme les autres, certains réglages peuvent casser le site).
Le petit bémol est qu’il est payant. Mais si la performance est très importante pour vous et que vous ne voulez pas vous arracher les cheveux, je vous le conseille.
D’ailleurs, si vous souhaitez l’utiliser, je vous mets la liste de toutes ses fonctionnalités afin de vous éviter d’avoir des doublons au niveau des extensions mais aussi des lignes de code que je vous donne plus loin dans cet article.

Comparatif plugins de cache

 

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 un paramètre 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 privilégier 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.
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.

Une fois que vous aurez optimisé vos images avant de les télécharger sur votre site, vous pourrez rajouter une seconde couche d’optimisation avec le plugin Imagify ou Smush.
Celui-ci vous permettant de réduire encore davantage vos images, votre site se sentira tout léger !

Et si jamais le chargement est encore un peu lent parce que vous avez beaucoup d’images, vous pouvez utiliser le Lazy loading, c’est un plugin qui diffère le chargement des images sous la ligne de flottaison. Ainsi, elles s’affichent au fur et à mesure qu’elles apparaissent. L’internaute a donc accès au site plus rapidement, sans attendre que toutes les images soient chargées.

 

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 dernier cri 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 soit 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 Astra 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 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 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 existe plusieurs plugins pour réduire ces fichiers mais l’opération reste délicate et cela peut perturber l’affichage de votre site.
Je vous conseille, dans le principe de limiter les plugins, d’utiliser le même que pour la mise en cache, à savoir WP Rocket ou Autoptimize.
Ces plugins s’occupent é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 comme WP Rocket, 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.

Compression des fichiers :

<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/json

 

Configurer 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.
Je suis curieuse de savoir s’ils vont ont aidé à augmenter les performances de votre site, n’hésitez pas à partager votre expérience en commentaire.
Et bien sûr, si j’ai oublié un point crucial, faites m’en également part.

 

Emmanuelle Simonet, Webdesigner et formatrice

 

elementum felis eget id quis, libero felis Praesent mi,

Pin It on Pinterest

Share This