9 techniques pour améliorer la vitesse de chargement de votre site WordPress

Point parfois négligé, la vitesse de chargement d’un site est un paramètre fondamental pour deux raisons. D’une part, un site trop lent contribue à dégrader – parfois de manière considérable – l’expérience utilisateur. Personne n’aime naviguer sur un site qui rame. La lenteur d’un site a pour conséquence une augmentation du taux de rebond, un raccourcissement des durées de session, une diminution du nombre de pages vues et au final une dégradation des indicateurs de performances. D’autre part, la vitesse de chargement d’un site web a un impact sur ses performances SEO. Google notamment n’aime pas les sites trop lents et n’hésite pas à les sanctionner en pénalisant leurs positions. Vous devez à tout prix travailler sur la vitesse de chargement de votre site. Voici 9 conseils ou astuces pour améliorer la vitesse de chargement de votre site. L’article porte sur les sites WordPress, mais certains points valent pour les autres CMS.

1.    Mesurer les performances actuelles de votre site wordpress

Avant même de parler des techniques pour améliorer la vitesse d’un site web WordPress, voici quelques outils qui vous permettront de calculer le temps de chargement de votre site, de faire un état des lieux. Il existe des tas d’outils en ligne pour mesurer la vitesse de son 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 se cantonner à un seul. Cela permet de faire 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 permet d’obtenir une évaluation « objective » de la vitesse de chargement de votre site à la fois sur mobile et sur ordinateur. Les performances d’un site sont en effet souvent variables suivant les terminaux utilisés, la location des serveurs, etc. Autre avantage de PageSpeed Insights : le service vous donne des conseils personnalisés, classés par ordre de priorité, pour remédier aux éventuelles défaillances repérées lors du test (concernant le poids de vos images, la gestion des fichiers JS et CSS, la mise en cache, etc.).

Pour aller plus loin : vous trouverez sur internet de nombreux comparatifs et tutoriaux concernant les outils de mesure de performance, dont un article qui compare 10 outils entièrement gratuits.

2.    Supprimer les extensions (ou plugins) inutiles

Passons aux techniques d’optimisation de la vitesse de votre site. Les extensions tout d’abord. WordPress est connu pour proposer des centaines, et même des milliers d’extensions. C’est ce qui fait en grande partie la richesse et l’intérêt de ce CMS très utilisé. Du coup, on a instinctivement tendance à vouloir installer le plus de plugins possible pour augmenter les fonctionnalités de son site WordPress. C’est une grave erreur. Ce qui compte, c’est la qualité des extensions utilisées, et non la quantité. Ceci est valable pour tous les CMS, mais en particulier pour WordPress qui dispose d’une communauté de développeurs gigantesque mais pas toujours très expérimentés (ou plutôt : qui ne sont pas toujours regardants sur le poids de leurs extensions). L’idéal est d’utiliser le moins d’extensions possibles et d’éviter les extensions dont vous n’êtes pas certain de la qualité. Supprimer surtout toutes les extensions qui font doublon. Il n’est pas rare de vouloir tester plusieurs extensions quasiment identiques pour pouvoir faire son choix. C’est très bien, mais une fois que vous avez choisi celle qui vous convient, supprimer toutes les autres. D’ailleurs, pour des plugins aux fonctionnalités équivalentes ou très proches, renseignez-vous sur celui qui est le moins gourmand en ressources.

Remarque : si vous préférez, vous pouvez vous contenter de désactiver les extensions non utilisées. Mais dans l’idéal, mieux vaut les supprimer. Si vous n’utilisez pas du tout certaines extensions, pourquoi les garder ? A la limite, désactivez les extensions que vous utilisez régulièrement mais de manière épisodique. C’est toujours mieux que de la laisser active et cela vous évitera de devoir les reparamétrer lors de la prochaine utilisation.

Régulièrement, faites un inventaire de l’ensemble des plugins que vous avez téléchargé (qu’ils soient activés ou désactivés) et faites le ménage. Cela permettra d’éviter que les extensions s’accumulent avec le temps. Supprimez les extensions peu utiles, ou qui en tous cas apportent moins qu’elles ne nuisent à la vitesse de votre site. Dernier conseil : essayez d’utiliser des extensions multifonctionnelles, du type Yoast, qui permet en l’occurrence la gestion de la partie SEO de votre site mais aussi la création de 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 Pluging Performance Profiler (P3), développée par Go Daddy. Pour le coup, cette extension vaut le coup et n’est pas un gadget. Pour être cohérent avec ce qu’on vient de dire, pensez à supprimer l’extension P3 après votre diagnostic !

Remarque : les extensions utilisées pour créer des barres de partage sur les réseaux sociaux sont connues pour ralentir fortement la vitesse de chargement, à cause des langages informatiques qu’elles utilisent. Si possible, essayez de vous en passer et remplacez les barres par de simples boutons.

3.    Choisir une formule d’hébergement en adéquation avec vos besoins

La qualité de l’hébergement joue sur la vitesse de chargement de votre site. Un site peut très bien être parfaitement configuré mais être lent pour la simple et bonne raison que le serveur qu’il utilise n’est pas performant. Il existe, grosso modo, trois types d’hébergement :

• L’hébergement mutualisé : vous partagez les ressources d’un même serveur avec d’autres clients de l’hébergeur. Ce type d’hébergement, le moins cher, n’est viable que pour les sites à faible trafic et consommant peu de ressources (blogs ou sites vitrines de petites entreprises). Il suffit que des sites hébergés sur le serveur mutualisé consomment beaucoup de ressources pour que cela ralentisse votre propre site (l’hébergeur peut mettre du temps à recadrer les sites trop gourmands). C’est l’éternel problème de la colocation…
• L’hébergement dédié : vous louez auprès de l’hébergeur un serveur pour vous tout seul (il vous est dédié : d’où le nom). L’hébergement dédié est celui qui convient le mieux pour les sites ecommerce ou les 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 paramétré par l’hébergeur.
• L’hébergement virtuel (VPS) : à mi-chemin entre l’hébergement mutualisé et l’hébergement dédié. Le principe consiste à louer ou acheter une partie d’un serveur dédié pour en faire un serveur virtuel administré par vos soins.

Vous devez choisir le type d’hébergement qui correspond le mieux à vos besoins. Si vous avez un site ecommerce et que vous êtes sur un serveur mutualisé, il y a de fortes chances que cela ralentisse votre site. Mais à l’inverse, 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 largement suffisant.

Remarque : comme il est question des sites sous WordPress, il est important de noter qu’il existe des hébergements dédiés optimisés pour les sites WordPress, comme WP Engine. De loin la formule la plus chère, un hébergement sur serveur spécialisé WP est une sérieuse garantie. Dans ce cas précis (WP Engine), votre hébergeur vous informera régulièrement des performances de votre site et des extensions qui éventuellement contribuent à le ralentir. En passant par WP Engine, vous bénéficierez aussi de sauvegardes régulières de votre site.

Conseil : la plupart des outils de mesure de vitesse vous donneront des indications sur le temps de réponse de votre serveur. C’est un bon moyen de déterminer si votre hébergement convient ou pas, doit être changé ou pas. Autre conseil : choisissez un hébergement SSD. Ils sont, toutes choses égales par ailleurs, plus rapides et pas plus chers que les autres. N’hésitez pas à consulter des comparatifs pour choisir le bon hébergeur.

4.    Réduire le poids des images

Les images sont des consommatrices importantes de ressources serveur. Ce sont souvent les éléments de vos pages qui prennent le plus de place. C’est la raison pour laquelle la bonne gestion des images est absolument décisive pour l’amélioration de la vitesse de votre site. Force est de constater que peu de webmasters prennent le soin d’optimiser les images. C’est une erreur. L’idéal est de trouver le juste milieu entre qualité et poids de l’image. Pour réduire le poids d’une image, il y a trois solutions :

• Compresser l’image : utilisez TinyPNG par exemple pour compresser vos images PNG et vos images JPEG. Il s’agit d’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 le JPEG au PNG par exemple (sauf pour les petites images, icônes, logos, etc.). N’utilisez le GIF que pour les animations (donc convertissez vos images GIF vers JPEG ou PNG).
• Réduire les dimensions : plus les dimensions seront petites, plus l’image sera légère.

Il existe de nombreux logiciels pour réduire le poids des images avant importation dans la bibliothèque WP, comme GIMP par exemple (logiciel open source gratuit) ou tout simplement Paint. Si maintenant vous avez déjà une bibliothèque conséquente d’images dans WordPress et que vous n’avez pas la motivation ni le temps de toutes les retraiter une à une, il y a une autre solution. Il existe en effet des extensions qui permettent d’optimiser 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 ce genre de plugins, par précaution. Voici deux des meilleurs plugins sur le marché :

• WP Smush.it : cette extension permet de compresser toutes les images de votre bibliothèque et de traiter automatiquement toute nouvelle image que vous importez dans WordPress. L’inconvénient de WP Smush.it est qu’il ne peut pas traiter les images dont le poids est supérieur à 1 Mo ou celles hébergées sur un serveur CDN. C’est pour ça d’ailleurs qu’il est toujours préférable dans l’idéal de traiter ses images soi-même à partir d’un logiciel avant de les importer…
• Imsanity : grâce à cette extension, vous pouvez définir une dimension maximum pour toutes vos images. Exemple : limiter la largeur maximum de vos images à 1024px. Imsanity n’agit pas sur le poids de l’image, mais uniquement sur ses dimensions (même si les deux sont liés bien sûr). Imsanity offre quelques fonctionnalités supplémentaires : il permet par exemple de convertir les formats d’images (BMP è JPEG par exemple).

5.    Compresser les fichiers JavaSript et CSS

Quelques définitions rapides pour commencer. Les fichiers CSS, ce sont les feuilles de styles. Ils contiennent toutes les informations concernant le design de votre site : les couleurs, la police, la structuration des différents éléments de page (menus, colonnes, etc.). Ils jouent le même rôle que les balises HTML. Le langage JavaScript est quant à lui un langage informatique qui permet d’ajouter des éléments dynamiques et interactifs à votre site, comme par exemple des diaporamas, des fenêtres pop-up, des menus dynamiques, des horloges à aiguilles, des jeux, des boutons de partage, etc. La liste est potentiellement infinie. Les fichiers JavaScript et CSS sont bien sûr tous deux indispensables à un site internet. Malheureusement, ces fichiers prennent beaucoup de place et peuvent être très longs à charger. D’autant que sur les sites WordPress, chaque fonctionnalité a ses propres scripts CSS et JS. C’est la raison pour laquelle il est recommandé de compresser (on dit aussi minifier) ces fichiers. Vous pouvez par exemple 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 jusqu’où la compression est possible pour éviter la catastrophe !

Il existe aussi un plugin WordPress qui permet de compresser et de combiner à la fois les fichiers JS et CSS. Il s’agit de  WP minify. Autre conseil : les fichiers JavaScript ralentissent beaucoup la vitesse de chargement du site lorsqu’ils sont placés tout en haut du code source de vos pages (au-dessus de la ligne de flottaison). Grâce à certains plugins, comme Footer JavaScript, il est possible de déplacer vos scripts JavaScript en bas de pages (footer). Grâce à cette technique, les fichiers JS se chargent en dernier : les éléments consommant peu de ressources se chargeront en premier. Il est bien sûr impossible de faire de même pour les fichiers CSS, à cause de leur fonction structurante. Là encore, la prudence s’impose : il est possible que certains scripts ne se chargent plus s’ils sont placés en bas de page.

Conseil : pour l’optimisation de vos fichiers CSS et JavaScript, faites appel à une personne qui s’y connaît bien. Les actions d’optimisation de ce type de fichiers nécessitent des conséquences en code, même dans le cas de l’utilisation de plugins. D’ailleurs, dans l’absolu mieux vaut travailler directement sur le code plutôt qu’utiliser des plugins, c’est toujours plus sûr…

6.    Utiliser un plugin de cache

La mise en cache a pour objectif de diminuer le nombre de ressources utilisées par les serveurs via une diminution du nombre de requêtes. Il ne s’agit pas ici d’expliquer dans le détail en quoi consiste le caching. Simplement, le principe consiste à réduire le nombre de requêtes lancées lors du chargement d’une page par sauvegarde des requêtes déjà envoyées (dans un cache justement). Du point de vue d’un visiteur, l’idée est de faire en sorte que son navigateur n’ait pas à recharger à chaque visite tous les éléments de vos pages. Seuls les nouveaux éléments seront chargés, les autres ayant été enregistrés lors des précédentes visites et transformés en fichiers statiques. Plus un visiteur reviendra sur votre site, plus la mise en cache sera efficace et rendra la navigation fluide. De votre côté, la mise en cache permet de réduire la quantité de vos ressources serveur « pompées » par vos visiteurs 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 lutter contre la lenteur des sites. 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 d’ailleurs d’autres possibilités que la mise en cache et notamment la compression des fichiers JavaScript et CSS. Nous vous recommandons d’installer WP Rocket, d’autant qu’il a le mérite d’être relativement facile d’utilisation. En revanche, seul bémol, WP Rocket est payant, contrairement à W3 Total Cache.

7.    Mettre en place un CDN

L’utilisation d’un CDN permet à vos visiteurs de charger le contenu statique de vos pages de votre site (images, fichiers JavaScript et CSS cachés) depuis un serveur localisé le plus près possible de leur lieu de connexion. Le CDN permet, dit autrement, que les contenus de votre site soient délivrables depuis un maximum de serveurs autour de la planète. Il faut savoir en effet que plus le serveur qui envoie les pages d’un site à un internaute est situé loin de son lieu de connexion, plus cela ralentit le temps de chargement. Un internaute italien qui charge la page d’un site hébergé sur un serveur australien subira un temps de chargement plus important que s’il se connectait depuis Sydney. Les CDN résolvent ce problème purement géographique. D’un point de vue plus technique, le CDN que vous utilisez va envoyer à tout un réseau de serveurs dispatchés sur la planète les caches de vos pages (vos contenus statiques). Ceux-ci seront ainsi stockés sur un grand nombre de serveurs. L’internaute n’aura à charger depuis votre propre serveur que les contenus dynamiques, non cachés.

Nous vous conseillons d’utiliser MaxCDN ou CloudFlare. Ce dernier CDN est gratuit, facilement intégrable dans WordPress et dispose d’un réseau très large de serveurs (24 datacenters à l’heure actuelle répartis sur tous les continents, sauf en Afrique). Autre point intéressant : CloudFlare ne cache pas le code HTML, si bien que vos visiteurs auront toujours accès aux dernières versions de vos contenus textes. Le cache n’est en effet pas toujours adapté aux contenus qui évoluent vite (mises à jour d’articles, etc.).

Remarque : l’utilisation d’un CDN est d’autant plus intéressante qu’une partie non négligeable de votre trafic provient de l’international. Si vos visiteurs sont à 95% français ou belges, la pertinence d’un CDN n’est pas évidente (en partant de l’hypothèse que votre site est hébergé en France). D’ailleurs, autre remarque, le choix du bon CDN dépend en grande partie de la provenance de votre trafic. Vous devrez choisir le CDN qui dispose de serveurs localisés dans les zones géographiques d’où proviennent votre trafic. Dernière petite remarque : l’utilisation d’un CDN complète mais ne remplace pas l’utilisation d’un plugin de cache.

8.    Limiter le nombre de révisions de vos pages

La possibilité offerte par WordPress en natif d’accéder aux différentes révisions apportées sur vos pages ou vos articles est certes souvent très utile. Cela permet notamment d’annuler certaines modifications, de revenir en arrière, de comparer les différentes versions, etc. Malgré tout, cette possibilité a les inconvénients de ses avantages : toutes les versions de vos pages sont conservées. A chaque fois que vous effectuez une mise à jour d’un de vos articles par exemple, une nouvelle version est générée automatiquement (même si vous ne faites que corriger 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 purement et simplement cette fonctionnalité.  Pour cela, vous devez insérer des morceaux de code dans le fichier wp-config.php de votre site WordPress. Si vous souhaitez que WordPress ne fasse plus de sauvegardes de vos précédentes versions de pages, vous devez désactiver la fonction Post Revisions en insérant le code suivant :

define( ‘WP_POST_REVISIONS’, false ) ;

Si vous préférez plutôt limiter le nombre de versions sauvegardées (à 5 par page par exemple), vous devrez utiliser ce code :

define( ‘WP_POST_REVISIONS’, 5 );

Pour gérer les révisions de vos pages, vous pouvez aussi utiliser le plugin WP-Optimize. Cette extension offre de nombreuses fonctionnalités pour nettoyer votre base de données WordPress (pas uniquement les révisions).

9.    Choisir un thème WordPress léger

On aurait pu aborder ce point en premier. Mais si vous lisez cet article, vous avez probablement déjà un site internet. L’heure du choix du thème est déjà passée pour vous. Mieux vaut tenter d’améliorer votre site à l’aide des techniques proposées plus haut avant d’envisager la possibilité de changer le thème (opération parfois coûteuse). Ce dernier point s’adresse à ceux qui n’ont pas encore crée leur site, ou à ceux qui, après avoir murement réfléchi, ont décidé de changer le thème de leur site.

Le choix d’un thème WordPress se fonde bien sûr sur des considérations esthétiques et ergonomiques. Or, les thèmes ergonomiques, bourrés de fonctionnalités et magnifiques visuellement ne sont pas toujours les plus légers. C’est même normalement le contraire (c’est un euphémisme). Or 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 des proportions considérables. Voici quelques conseils pour bien choisir votre thème :

• Choisissez un thème qui ne propose que les fonctionnalités/features dont vous avez besoin. Beaucoup de fonctionnalités sont en réalité des gadgets qui ne servent qu’à alourdir votre site. Il faut que vous soyez certains d’utiliser au moins les deux tiers des fonctionnalités proposées par le thème.
• Choisissez un thème Responsive Design, qui permet à votre site de s’afficher de manière optimale sur tous les terminaux et notamment les terminaux mobiles. Il existe beaucoup de sites qui sont rapides sur ordinateur, mais très lents sur mobile. C’est de moins en moins acceptables, pour plusieurs raisons.
• Ne préférez pas forcément 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 tous cas, retenez que ça ne veut rien dire : les thèmes payants ne sont pas forcément mieux optimisés en termes de poids.
• Evitez les thèmes trop anciens, ils ne sont en général pas ou plus optimisés et contribuent à ralentir le temps de chargement.
• Choisissez un thème compatible avec les versions les plus récentes des navigateurs web. La majorité des thèmes récents sont compatibles en l’occurrence. Ce conseil rejoint donc le précédent.
• Ne choisissez pas un thème avec trop d’images HD et des animations dans tous les sens. Préférez un thème épuré et minimaliste.
• De manière générale et pour résumer, il est mille fois préférable de choisir un thème simple, quitte à le complexifier par la suite pour l’adapter à vos besoins, qu’un thème nativement lourd qu’il sera plus difficile de faire « maigrir ».

Remarque : vous vous posez peut-être une question : comment évaluer le poids ou la performance d’un thème avant de l’avoir choisi/acheté ?  Il existe une méthode très simple : lancez la démo du thème et faites un test Pingdom Tools. Vous pourrez accéder à toutes les informations nécessaires depuis cet outil : nombre de requêtes, poids global, respect des bonnes pratiques (Grades), etc. Vous ne savez pas quel thème choisir ? On peut vous conseiller les thèmes enfants de Genesis (pour info, on a fait le choix de Genesis pour la nouvelle version de La Fabrique du Net essentiellement pour une question de performance…).

Voilà quelques techniques et conseils pour améliorer la vitesse de chargement de votre site WordPress. La plupart de ces recommandations sont valables pour les autres CMS. Certaines des techniques présentées dans cet article nécessitent un minimum de connaissance en informatique. Si vous ne disposez pas d’équipe en interne suffisamment compétente en la matière, ce n’est pas un drame bien entendu mais évitez de trop bidouiller. Faites plutôt appel à un expert SEO (agence ou freelance) qui saura clairement diagnostiquer les problèmes rencontrés sur votre site et définir les meilleures actions à entreprendre pour améliorer la vitesse de chargement de votre site WP.

La Fabrique du net vous invite à l'Homo Marketer le 27 juin à Paris !

Inscription

Partagez cet article sur

Facebook

Twitter

Google+

Linkedin