WordPress: 9 techniques pour booster votre vitesse de chargement
1. Mesurer la performance actuelle de votre site WordPress
Avant même de parler des techniques pour améliorer la vitesse d’un site WordPress, voici quelques outils qui vous permettront de calculer le temps de chargement de votre site, de faire un inventaire. Il existe de nombreux outils en ligne pour mesurer la vitesse de votre site : YSlow, GTmetrix, Pingdom Tools, Web Page Analyzer, Load Impact, Octa Gate SiteTimer, WebPage Test, Yotaa. Il est conseillé d’utiliser plusieurs outils de mesure pour vos tests et de ne pas vous limiter à un seul. Cela permet d’effectuer des recoupements et d’obtenir des résultats plus fiables.
Le service de test de performance de Google, PageSpeed Insights, est l’un des outils de référence. Ce service fournit une évaluation “objective” de la vitesse de chargement de votre site sur mobile et ordinateur. La performance d’un site varie souvent en fonction des terminaux utilisés, de l’emplacement des serveurs, etc. Un autre avantage de PageSpeed Insights est que le service vous donne des conseils personnalisés, par ordre de priorité, pour corriger les défauts identifiés lors du test (concernant le poids de vos images, la gestion des fichiers JS et CSS, la mise en cache, etc).
2. Supprimer des extensions (ou des plugins inutiles)
Passons maintenant aux techniques pour optimiser la vitesse de votre site. Tout d’abord, les extensions. WordPress est connu pour offrir des centaines, voire des milliers d’extensions. C’est ce qui rend ce CMS si largement utilisé et intéressant. En conséquence, il y a une tendance instinctive à vouloir installer autant de plugins que possible pour augmenter la fonctionnalité de votre site WordPress. C’est une grave erreur. Ce qui compte, c’est la qualité des extensions utilisées et non la quantité. C’est vrai pour tous les CMS, mais surtout pour WordPress qui a une communauté de développeurs énorme mais pas toujours très expérimentée (ou plutôt : qui ne regardent pas toujours le poids de leurs extensions). L’idéal est d’utiliser le moins d’extensions possible et d’éviter les extensions dont vous n’êtes pas sûr de la qualité. Supprimez toutes les extensions qui sont des doublons. Il n’est pas rare de vouloir tester plusieurs extensions presque identiques pour faire son choix. C’est très bien, mais une fois que vous avez choisi celui qui vous convient, supprimez tous les autres. De plus, pour les plugins ayant des fonctionnalités équivalentes ou très similaires, découvrez lequel est le moins gourmand en ressources.
Note : Si vous préférez, vous pouvez simplement désactiver les extensions inutilisées. Mais idéalement, il vaut mieux les enlever. Si vous n’utilisez pas du tout certaines extensions, pourquoi les conserver ? A la limite, désactivez les extensions que vous utilisez régulièrement mais occasionnellement. C’est toujours mieux que de le laisser actif et vous évitera d’avoir à le réinitialiser la prochaine fois que vous les utiliserez.
Faites un inventaire régulier de tous les plugins que vous avez téléchargés (qu’ils soient activés ou désactivés) et nettoyez-les. Cela empêchera les prorogations de s’accumuler avec le temps. Supprimez les extensions qui ne sont pas très utiles, ou qui en tout cas fournissent moins qu’elles n’affectent la vitesse de votre site. Dernier conseil : essayez d’utiliser des extensions multifonctions, comme Yoast, qui vous permet de gérer la partie référencement de votre site mais aussi de créer des sitemaps.
Comment déterminer l’impact de vos extensions sur la vitesse de chargement de votre site WordPress ? Bonne question ! La réponse est simple : installez l’extension Plugin Performance Profiler (P3), développée par Go Daddy. Pour l’instant, cette extension en vaut la peine et n’est pas un gadget. Pour être cohérent avec ce qui vient d’être dit, pensez à retirer l’extension P3 après votre diagnostic !
3. Choisissez un forfait d’hébergement qui répond à vos besoins
La qualité de l’hébergement affecte la vitesse de chargement de votre site. Un site peut être parfaitement configuré mais être lent pour la simple raison que le serveur qu’il utilise n’est pas efficace. Il existe, grosso modo, trois types d’hébergement :
Hébergement mutualisé : Vous partagez des ressources sur le même serveur avec d’autres clients de l’hôte. Ce type d’hébergement, le moins cher, n’est viable que pour les sites à faible trafic et faible consommation de ressources (blogs ou sites vitrines de petites entreprises). Il suffit que les sites hébergés sur le serveur mutualisé consomment beaucoup de ressources pour ralentir votre propre site (l’hébergeur peut prendre du temps pour recadrer des sites trop gourmands). C’est le problème éternel des colocataires.
Hébergement dédié : vous louez un serveur de l’hébergeur pour vous-même (il vous est dédié : d’où le nom). L’hébergement dédié est mieux adapté aux sites de commerce électronique ou aux blogs à fort trafic. Ce type d’hébergement permet de gérer l’administration du serveur, contrairement à l’hébergement mutualisé : un serveur mutualisé est géré et configuré par l’hôte.
Hébergement virtuel (VPS) : à mi-chemin entre hébergement mutualisé et dédié. Le principe consiste à louer ou acheter une partie d’un serveur dédié pour en faire un serveur virtuel géré par vous.
Vous devez choisir le type d’hébergement qui convient le mieux à vos besoins. Si vous avez un site de commerce électronique et que vous êtes sur un serveur partagé, il y a de fortes chances que cela ralentisse votre site. Mais d’un autre côté, il est parfaitement inutile de louer un serveur dédié si vous avez un petit blog. Dans ce dernier cas, l’hébergement mutualisé est plus que suffisant.
Note : Comme nous parlons de sites WordPress, il est important de noter qu’il existe des hôtes dédiés optimisés pour les sites WordPress, tels que WP Engine. De loin la formule la plus chère, l’hébergement sur un serveur WP dédié est une garantie sérieuse. Dans ce cas particulier (WP Engine), votre hébergeur vous informera régulièrement des performances de votre site et des extensions qui peuvent contribuer à le ralentir. En utilisant WP Engine, vous bénéficierez également de sauvegardes régulières de votre site.
Conseil : La plupart des outils de mesure de la vitesse vous donneront des informations sur le temps de réponse de votre serveur. C’est une bonne façon de déterminer si votre maison est convenable ou non, si elle doit être changée ou non. Un autre conseil : choisissez l’hébergement SSD. Toutes choses égales par ailleurs, elles sont plus rapides et pas plus chères que les autres.
4. Configuration d’un CDN
L’utilisation d’un CDN permet à vos visiteurs de charger le contenu statique des pages de votre site (images, fichiers JavaScript et CSS cachés) à partir d’un serveur situé le plus près possible de leur lieu de connexion. CDN permet, en d’autres termes, que le contenu de votre site puisse être distribué à partir du plus grand nombre possible de serveurs dans le monde. Il est à noter que plus le serveur qui envoie les pages d’un site à un internaute est éloigné de son point de connexion, plus le temps de chargement est lent.
Un internaute portugais qui charge la page depuis un site hébergé sur un serveur japonais aura un temps de chargement plus long que s’il se connectait depuis Tokyo. Les CDN résolvent ce problème purement géographique. D’un point de vue plus technique, le CDN que vous utilisez enverra les caches de vos pages (votre contenu statique) à tout un réseau de serveurs à travers le monde. Ceux-ci seront ensuite stockés sur un grand nombre de serveurs. L’utilisateur n’aura qu’à charger du contenu dynamique et non caché à partir de votre propre serveur.
Nous vous recommandons d’utiliser MaxCDN ou CloudFlare. Ce dernier CDN est gratuit, facile à intégrer dans WordPress et dispose d’un très large réseau de serveurs (24 datacenters actuellement situés sur tous les continents, sauf en Afrique). Un autre point intéressant : CloudFlare ne cache pas le code HTML, ainsi vos visiteurs auront toujours accès aux dernières versions de votre contenu texte. Le cache n’est pas toujours adapté à l’évolution rapide des contenus (mises à jour d’articles, etc.).
Note : l’utilisation d’un CDN est d’autant plus intéressante qu’une partie importante de votre trafic provient de l’étranger. Si vos visiteurs sont français ou belges à 95%, la pertinence d’un CDN n’est pas évidente (si votre site est hébergé en France). De plus, une autre remarque, le choix du bon CDN dépend largement de l’origine de votre trafic. Vous devrez choisir le CDN qui possède des serveurs situés dans les zones géographiques d’où provient votre trafic. Dernier point mais non le moindre : l’utilisation d’un CDN complet mais ne remplace pas l’utilisation d’un plugin de cache.
5. Limiter le nombre de révisions de vos pages
La possibilité offerte par WordPress d’accéder nativement aux différentes révisions apportées à vos pages ou articles est certainement souvent très utile. Cela vous permet d’annuler certaines modifications, de revenir en arrière, de comparer différentes versions, etc. Cependant, cette possibilité a les inconvénients de ses avantages : toutes les versions de vos pages sont conservées. Chaque fois que vous mettez à jour un de vos articles, par exemple, une nouvelle version est automatiquement générée (même si vous ne corrigez que deux ou trois fautes d’orthographe…). Il n’est pas rare qu’une page ait plus de 10 versions.
Il est possible de limiter le nombre de versions ou même de supprimer complètement cette fonctionnalité. Pour ce faire, vous devez insérer des morceaux de code dans le fichier wp-config.php de votre site WordPress. Si vous ne voulez pas que WordPress fasse d’autres sauvegardes de vos versions de page précédentes, vous devez désactiver la fonction Post Revisions en insérant le code suivant :
define(‘WP_POST_REVISIONS’, false) ;
Si vous préférez limiter le nombre de versions sauvegardées (à 5 par page par exemple), vous devez utiliser ce code :
define(‘WP_POST_REVISIONS’, 5) ;
Pour gérer les révisions de vos pages, vous pouvez également utiliser le plugin WP-Optimize. Cette extension offre de nombreuses fonctionnalités pour nettoyer votre base de données WordPress (pas seulement des révisions).
6. Choisissez un thème WordPress léger
Nous aurions pu aborder ce point en premier. Mais si vous lisez cet article, vous avez probablement déjà un site web. Le temps du choix du thème est déjà terminé pour vous. Il vaut mieux essayer d’améliorer votre site en utilisant les techniques proposées ci-dessus avant d’envisager la possibilité de changer de thème (opération parfois coûteuse). Ce dernier point s’adresse à ceux qui n’ont pas encore créé leur site, ou à ceux qui, après mûre réflexion, ont décidé de changer le thème de leur site.
Le choix d’un thème WordPress est bien sûr basé sur des considérations esthétiques et ergonomiques. Cependant, les thèmes ergonomiques, riches en fonctionnalités et visuellement époustouflants ne sont pas toujours les plus légers. Normalement, c’est même le contraire (c’est un euphémisme). Cependant, le poids d’un thème doit être pris en compte dans le choix. Plus un thème est lourd, plus il aura tendance à ralentir la vitesse de chargement de votre site, parfois dans une mesure considérable. Voici quelques conseils pour vous aider à choisir votre thème :
Choisissez un thème qui n’offre que les fonctionnalités dont vous avez besoin. Beaucoup de fonctionnalités sont en fait des gadgets qui ne servent qu’à rendre votre site plus lourd. Vous devez vous assurer d’utiliser au moins les deux tiers des fonctionnalités offertes par le thème.
Choisissez un thème Responsive Design, qui permet à votre site d’être affiché de manière optimale sur tous les appareils, y compris les appareils mobiles. Il y a beaucoup de sites qui sont rapides sur les ordinateurs, mais très lents sur les mobiles. Cela devient de moins en moins acceptable pour plusieurs raisons.
Ne préférez pas nécessairement les thèmes payants aux thèmes gratuits. Les thèmes payants ont même tendance à être plus lourds en moyenne que les thèmes gratuits. En tout cas, n’oubliez pas que cela ne veut rien dire : les sujets payants ne sont pas nécessairement mieux optimisés en termes de poids.
Évitez les thèmes trop anciens, ils ne sont généralement pas ou plus optimisés et contribuent à ralentir le temps de chargement.
Choisissez un thème compatible avec les dernières versions des navigateurs Web. Les thèmes les plus récents sont compatibles dans ce cas. Le présent avis est donc conforme au précédent.
Ne choisissez pas un thème avec trop d’images et d’animations HD dans toutes les directions. Préférez un thème raffiné et minimaliste.
En général et pour résumer, il est mille fois mieux de choisir un thème simple, même si cela signifie le rendre plus complexe plus tard pour l’adapter à vos besoins, qu’un thème nativement lourd qui sera plus difficile à faire “perdre du poids”
7. Réduire le poids des images
Les images sont d’importants consommateurs de ressources serveur. Ce sont souvent les éléments de vos pages qui prennent le plus de place. C’est pourquoi une bonne gestion de l’image est absolument essentielle pour améliorer la vitesse de votre site. Il faut dire que peu de webmasters prennent le soin d’optimiser les images. C’est une erreur. L’idéal est de trouver le juste équilibre entre la qualité de l’image et le poids. Pour réduire le poids d’une image, il existe trois solutions :
Compresser l’image : utilisez TinyPNG par exemple pour compresser vos images PNG et JPEG. C’est une solution en ligne gratuite jusqu’à un certain point (payante à partir d’un certain volume d’images à compresser).
Changer le format : certains formats sont plus lourds que d’autres. Préférez JPEG à PNG par exemple (sauf pour les petites images, icônes, logos, etc.). Utilisez le GIF uniquement pour les animations (convertissez donc vos images GIF en JPEG ou PNG).
Réduire les dimensions : plus les dimensions sont petites, plus l’image sera claire.
Il existe de nombreux logiciels pour réduire le poids des images avant de les importer dans la bibliothèque WP, tels que GIMP (logiciel libre open source) ou simplement Paint. Si vous avez déjà une grande bibliothèque d’images dans WordPress et que vous n’avez pas la motivation ou le temps de les retraiter une par une, il existe une autre solution. Il existe des extensions qui optimisent automatiquement vos images WordPress, à la fois celles qui sont déjà téléchargées dans la bibliothèque et celles que vous ajoutez. Faites une sauvegarde avant d’installer de tels plugins, par précaution. Voici deux des meilleurs plugins du marché :
WP Smush.it : cette extension compresse toutes les images de votre bibliothèque et traite automatiquement toutes les nouvelles images que vous importez dans WordPress. L’inconvénient de WP Smush.it est qu’il ne peut pas traiter des images d’un poids supérieur à 1 Mo ou hébergées sur un serveur CDN. C’est pourquoi il est toujours préférable de traiter vous-même vos images à partir d’un logiciel avant de les importer…
Imsanity : avec cette extension, vous pouvez définir une taille maximale pour toutes vos images. Exemple : Limitez la largeur maximale de vos images à 1024px. Imsanity n’affecte pas le poids de l’image, mais seulement ses dimensions (même si les deux sont liées bien sûr). Imsanity offre quelques fonctionnalités supplémentaires : il permet de convertir des formats d’images (BMP en JPEG par exemple).
8. Compression de fichiers JavaSript et CSS
Quelques définitions rapides pour commencer. Les fichiers CSS sont des feuilles de style. Ils contiennent toutes les informations concernant le design de votre site : les couleurs, la police, la structure des différents éléments de la page (menus, colonnes, etc.). Ils jouent le même rôle que les balises HTML. JavaScript est un langage informatique qui vous permet d’ajouter des éléments dynamiques et interactifs à votre site, tels que diaporamas, fenêtres pop-up, menus dynamiques, horloges à aiguille, jeux, boutons de partage, etc.
La liste est potentiellement interminable. Les fichiers JavaScript et CSS sont bien sûr indispensables pour un site web. Malheureusement, ces fichiers prennent beaucoup de place et peuvent prendre beaucoup de temps à charger. D’autant plus que sur les sites WordPress, chaque fonctionnalité possède ses propres scripts CSS et JS. C’est pourquoi il est recommandé de compresser (aussi appelé minifier) ces fichiers.
Par exemple, vous pouvez utiliser le logiciel CleanCSS pour compresser vos fichiers CSS (en ajustant le niveau de compression selon vos souhaits). Pour les fichiers JavaScript, utilisez par exemple JSCompress.com. Attention, la compression de ces fichiers peut perturber l’affichage de votre site. Vous devez faire des tests pour savoir dans quelle mesure la compression est possible pour éviter un désastre !
Il existe également un plugin WordPress qui vous permet de compresser et de combiner des fichiers JS et CSS. C’est WP minify. Un autre conseil : les fichiers JavaScript ralentissent beaucoup la vitesse de chargement du site lorsqu’ils sont placés en haut du code source de vos pages (au-dessus de la ligne de flottaison). Grâce à certains plugins, comme JavaScript Footer, il est possible de déplacer vos scripts JavaScript vers le bas des pages (footer). Avec cette technique, les fichiers JS se chargent en dernier : les éléments à faible consommation de ressources se chargeront en premier. Il est bien sûr impossible de faire la même chose pour les fichiers CSS, à cause de leur fonction de structuration. Encore une fois, la prudence est de mise : certains scripts peuvent ne plus se charger s’ils sont placés en bas de page.
Astuce : Pour optimiser vos fichiers CSS et JavaScript, utilisez quelqu’un qui maitrise bien ces langages. Les actions d’optimisation de ce type de fichier nécessitent des conséquences de code, même lors de l’utilisation de plugins. Il vaut mieux travailler directement sur le code que d’utiliser des plugins, c’est toujours plus sûr et effiace.
9. Utiliser un plugin de cache
La mise en cache vise à réduire le nombre de ressources utilisées par les serveurs en réduisant le nombre de requêtes. Le principe est simplement de réduire le nombre de requêtes effectuées lors du chargement d’une page en sauvegardant les requêtes déjà envoyées (dans un cache). Du point de vue du visiteur, l’idée est de s’assurer que votre navigateur n’a pas à recharger tous les éléments de vos pages à chaque visite.
Seuls les nouveaux éléments seront chargés, les autres ayant été sauvegardés lors de visites précédentes et transformés en fichiers statiques. Plus un visiteur revient sur votre site, plus la mise en cache sera efficace et plus la navigation sera fluide. La mise en cache de votre côté réduit la quantité de ressources serveur que vos visiteurs “pompent” lorsqu’ils chargent les pages de votre site.
La mise en cache est souvent présentée comme l’une des techniques les plus efficaces pour combattre les sites lents. Pour utiliser un système de cache sur votre site, le plus simple est de télécharger un plugin WordPress. Les deux meilleurs sont W3 Total Cache et WPRocket. WPRocket offre également d’autres possibilités que la mise en cache et en particulier la compression de fichiers JavaScript et CSS. Nous vous recommandons d’installer WP Rocket.
Nous esperons que ces quelques techniques et conseils pour améliorer la vitesse de chargement de votre site WordPress vous seront utriles. La plupart de ces recommandations sont valables pour d’autres CMS. Certaines des techniques présentées dans cet article nécessitent un minimum de connaissances en informatique. Si vous n’avez pas une équipe interne suffisamment compétente, ce n’est pas une tragédie, bien sûr, mais n’en faites pas trop. Faites plutôt appel à un expert SEO (agence ou freelance) qui diagnostiquera clairement les problèmes rencontrés sur votre site et définira les meilleures actions à prendre pour améliorer la vitesse de chargement de votre site WP.
