Comment améliorer la performance d'un site Wordpress

Comment améliorer la performance d'un site Wordpress Lors de la création d'un site Wordpress, la webperf passe souvent après le design. Pourtant, elle est toute aussi importante pour générer de l'audience. Cinq bonnes pratiques.

Aujourd'hui les attentes en matière de vitesse de chargement des pages web sont toujours plus grandes. D'un côté, les utilisateurs ne veulent plus attendre avant d'accéder à un site. De l'autre, Google érige la performance parmi ses principaux critères de classement des résultats de recherche. Il est par conséquent crucial de bien optimiser la webperf. Tour d'horizon des différents moyens d'y parvenir sous Wordpress.

1. Choisir un bon hébergeur

Commençons par le commencement, avant toute chose, choisir un bon hébergeur Wordpress est un des facteurs clés pour optimiser les performances d'un site. Lorsqu'on va chercher un hébergeur, on aura d'abord tendance à rechercher le service le moins cher. Pourtant s'il y a un effort financier à faire dans un domaine c'est sur ce service.

Du point de vue des performances pures, un bon hébergeur peut apporter de meilleurs temps de réponse, une meilleure stabilité, un niveau de capacité machine garanti, des outils d'optimisation au niveau serveur, un service client de qualité, etc. 

2. Optimiser les images

Une des causes principales de mauvaises performances pour un site Wordpress réside dans la gestion des images. Une page lente à charger est souvent une page lourde (en Ko). Or, ce qui pèse le plus lourd sur une page web, c'est les images. Le poids des photos originales peut atteindre plusieurs dizaines de mégaoctets. Résultat : si le site contient beaucoup d'images et qu'elles ne sont pas optimisées en termes de poids, son poids peut très vite exploser. Plusieurs outils permettent de réduire le poids des images :

  • Les logiciels de traitement d'images. Lightroom, Camera Raw, Capture One, etc. Il existe de nombreux logiciels de traitement d'images qui vous permettront à la fois d'améliorer leur aspect esthétique, mais également de les exporter au bon format et à la bonne taille pour en réduire le poids.
  • Les plugins d'optimisation. Imagify, EWWW, WP Smush, Short Pixel.... Là encore, il existe un grand nombre de plugins Wordpress pour optimiser les images. Ces extensions, une fois configurées, ont l'avantage de faire le travail à votre place et de réduire considérablement le poids de vos images et leur impact sur la vitesse de chargement.
  • Les sites d'optimisation en ligne. Il existe des sites gratuits permettant d'optimiser vos images à la volée puis de récupérer les fichiers optimisés. C'est une solution intermédiaire entre le logiciel de traitement d'images et le plugin d'optimisation. Parmi ces outils figurent TinyJPG, Imagify, Compressor.io, Optimizilla ou encore Kraken.io. 

Aux côtés de la webperf, réduire le poids des images contribue également à optimiser l'utilisation de l'espace disque de l'hébergement, et par conséquent le prix de ce dernier.

3. Choisir le bon format d'image

Le format d'image le plus répandu sur le web est JPG. Jusqu'ici, il offrait le meilleur compromis poids / qualité en fonction du degré de compression appliqué. Depuis peu, une alternative a fait son apparition, qui pourrait s'imposer à l'avenir comme un nouveau standard : le WebP (pour web picture format). Il s'agit d'un format dédié au web qui offre un rapport qualité / poids incomparable. Il se traduit par des images ultra-compressée avec une excellente qualité de rendu. Certains plugins comme EWWW permettent de convertir vos images en WebP "à la volée". Le plugin scanne automatiquement les images, les convertis et les affiches au format WebP en fonction des besoins.

4. Redimensionner les images

Afficher les images à la bonne taille permet d'éviter d'utiliser des ressources inutiles. Si la largeur du site est de 1200px par exemple, l'idéal est de redimensionner les images dans cette dimension.

Avec l'apparition des tablettes et smartphones, les sites "responsives" sont devenus la norme. Mais il aura fallu attendre ces dernières années pour voir apparaitre des solutions efficaces qui permettent d'afficher les images aux bonnes dimensions, en fonction des tailles d'écran. Autrement dit un site responsive c'est bien, mais un site responsive avec des images responsives c'est mieux ! Des plugins comme EWWW ou ShortPixel AI automatisent la création d'images auto-adaptatives à la volée.

5. Utiliser un plugin de cache

Un autre point important pour améliorer les performances de chargement d'un site web est le système de cache. La mise en cache d'une page permet de "stocker" les données d'une page (HTML, JavaScript, CSS, images, etc.) lors de la première visite pour les resservir ensuite de manière beaucoup plus rapide lors des visites suivantes. C'est une solution efficace pour améliorer la vitesse de chargement d'un site Wordpress.

Il existe deux sortes de mise en cache : 

  • La mise en cache côté utilisateur. Lors de l'ouverture d'une page web pour la première fois, le navigateur va utiliser la mise en cache pour stocker les données sur le terminal. Ce qui lui permet par la suite d'afficher une version préchargée ou statique dès que le navigateur resollicite cette page.
  • La mise en cache côté serveur. Avec la mise en cache côté serveur, les données sont stockées sur la plateforme d'hébergement. On en revient à l'importance de choisir un bon hébergeur qui offrira une solution performante de cache côté serveur.

Pour mettre en place un système de cache efficace sur votre site Wordpress, il existe de nombreux plugins performants :

  • Plugins de cache gratuits : WP Fastest Cache, WP Super Cache, Cache Enabler, W3 Total Cache, etc.
  • Plugins de cache payants : WP Rocket, WP Super Cache, etc.
  • Cache côté serveur : Litespeed Cache, Xtrem Cache, etc.

6. Optimiser les fichiers CSS, JavaScript et HTML

Différer le chargement d'un fichier permet de le charger soit après que l'affichage des premiers contenus de la page, soit au moment où il est nécessaire. Objectif : réduire le temps de latence et permettre à l'utilisateur d'interagir au plus vite avec la page web. Minifier consiste à supprimer tous les espaces et retours à la ligne au sein d'un fichier en vue d'optimiser son poids.

Pour réaliser ce travail, deux types d'extensions Wordpress existent :

  • Les plugins spécialisés : Autoptimize, WP Optimize, Perfmatters, Nitropack, Asset cleanup, etc.
  • Les plugins de cache : WP Rocket, WP Fastest Cache, W3 Total Cache, LS Cache, etc.

Les réglages relatifs aux fichiers JavaScript et CSS sont assez sensibles et peuvent altérer l'affichage du site. Il conviendra de faire des tests soignés pour vérifier que tel ou tel réglage n'affecte pas le contenu web.