WordPress : Améliorer la performance de son site en 2020

Améliorer la vitesse de son site internet WordPress reste quelque chose de très facile à faire pour tout le monde. Les plugins gratuits existant vous permettront de d’améliorer grandement la performance de votre site internet.

Nous verrons quels plugins installer et comment configurer les plugins WordPress pour optimiser la vitesse de chargement votre site internet.

Faites un premier test de votre site WordPress sur l’outil Google Pagespeed. Une fois le test fait, notez le score pour pouvoir comparer après le tutoriel d’optimisation WordPress de cet article.

Avant de débuter, sachez que vous allez toucher à la manière dont vos pages sont générées.

Aussi pour chacune de ces étapes d’optimisation, vérifiez que l’installation d’un plugin ou sa configuration n’a pas cassé votre site. Si jamais votre site est cassé, pas de problème, désactiver le plugin ou l’option vous permettra de retrouver un site fonctionnel.

Dans cet article sur l’optimisation des performances sur WordPress, je vais vous expliquer comment j’ai obtenu presque 100/100 de score sur Google Pagespeed.

Si vous souhaitez améliorer la vitesse de chargement de votre site WordPress avec votre thème actuel, sachez que certains thèmes ont une performance assez faible. Néanmoins tout n’est pas perdu ! Outre le changement de thème, tous les conseils donnés plus bas vont vous permettre d’améliorer grandement la performance de votre site internet, même si votre thème est lent !

Avant de commencer ce tutoriel, pensez à :

• désactiver les plugins dont vous ne vous servez pas ;
• mettre à jour WordPress, vos extensions, votre thème.

Prêt(e) ? C’est parti !

1 – Compresser ses images

Les images sont les données qui prennent le plus de place sur un site internet ! Voici une liste des éléments qui prennent le plus de poids dans le temps de chargement d’une page web.

• Le code HTML
• Le style CSS
• Les scripts JS / JavaScript
• Les images et les documents (PDF, Zip…)

Plus vous diminuerez ces éléments, plus rapide sera votre site ! Nous verrons dans une seconde partie comment compresser le code dans vos pages ; mais concernant la compression de vos images, des plugins existent :

• WP-Smush (pas le plus performant mais gratuit)
• EWWW image (jamais testé mais de très bon retours)
• Imagify (payant, le plus performant)

Tous ces plugins permettent également la conversion vers WebP. Webp est un nouveau format d’image optimisé pour le web, Google recommande grandement son intégration pour un meilleur référencement !

Configuration optimale du plugin Imagify

Voici notre configuration pour le plugin payant Imagify. N’oubliez pas que des services en ligne existent pour réduire le poids de vos images avant de les téléverser dans WordPress. Si vous êtes sous Linux ou avez un serveur dédié, n’hésitez pas à vous référer à l’article : optimiser ses images JPG, PNG, SVG.

2 – Différer le chargement des images, et des vidéos

Une fois les images compressées, vous pouvez utiliser un plugin pour différer le chargement. En effet lorsque le navigateur demande la page web, toutes les images sont chargées au moment où la page est en train d’être affichée, ce qui accroît le temps de chargement de vos pages web.

Le « lazy-loading » des images permet de charger les images via un script JavaScript. Dans l’idée, l’image n’est affichée que si l’utilisateur arrive au niveau de celle-ci : on ne charge que les images que l’utilisateur voit.

• Lazy-Load par WP Rocket

Nous n’avons testé que celui-ci, il répond pleinement à ce qui lui est demandé.

3 – Compresser le code HTML/CSS/JS

Compresser le code permet de retirer les sauts de ligne et les espaces de ce dernier. Généralement on reconnait un code compressé au fait qu’il tienne sur une seule page.

Pour améliorer la rapidité des pages web, compresser son code le rend plus rapide à envoyer. Sur WordPress nous avons utilisé les plugins suivants :

• Autoptimize (facile à mettre en place, fonctionne tout de suite)
• Fast Velocity Minify (complet, très bonne alternative à Autoptimize)
• Minify HTML (si jamais vous avez des incompatibilités de thème avec les deux précédents)

Nous n’utilisons pas le plugin Autoptimize pour différer le chargement des images car ce dernier n’est pas compatible avec notre thème.

Configuration optimale du plugin Autoptimize

4 – Utiliser un plugin de cache serveur

À chaque appel de page web, le code HTML est généré via PHP (le langage de programmation de WordPress). Cette génération prend du temps. Pour afficher un article par exemple, le code PHP va chercher en base de données le contenu de l’article à afficher sur la page.

Pour éviter d’aller rechercher en base de données chaque contenu (que ce soit un article, les infos d’un widget, les éléments de menu etc), il est possible de mettre le contenu HTML de la page en cache. Si le contenu de votre article (pour reprendre cet exemple) n’est pas modifié, le plugin de cache WordPress vous donnera directement le contenu HTML de votre page sans interroger la base de données ou charger le PHP.

• W3 Total Cache (le plus complet, il faut être assez fort techniquement pour le maîtriser)
• WP Super Cache (le plus simple, recommandé par l’équipe de WordPress, le plus compatible avec les différents thèmes)
• WP-Rocket (payant, le plus rapide et complet pour peu que votre thème le supporte)

Configuration optimale du plugin WP Super Cache

Sur SHZ nous utilisons le plugin gratuit WP Super Cache pour optimiser la vitesse de chargement des pages, voici sa configuration.

5 – Utiliser AMP pour vos pages mobile ?

AMP signifie Accelerated Mobile Pages, c’est une technologie créée par Google pour précharger le contenu de votre site directement dans Google. Lorsque vous ouvrez une page avec AMP, le résultat est instantané !

• AMP (le plugin officiel WordPress)
• AMP for WP (très bonne alternative avec beaucoup plus de fonctionnalités, mais attention aux bugs)

Si vous utilisez le plugin Yoast SEO, n’oubliez pas d’installer la Glue Yoast pour AMP !

Concernant AMP, la communauté n’est pas certaine que son adoption soit la meilleure chose à faire. De ce que je vois dans les résultats de recherches Google, AMP ne semble plus disponible pour le moment ; ou doit pour le moins être masqué. Si vous ne postez pas d’actualité, je ne vous le conseillerais pas.

Conclusion

Améliorer la vitesse de son site internet WordPress est quelque chose d’à la fois simple et de compliqué. Simple car de nombreuses extensions vous permettent d’optimiser votre thème WordPress pour un affichage rapide, compliqué car ce même thème peut être incompatible avec vos extensions d’optimisations.

L’optimisation du chargement de ses pages est compliqué, et tout le monde veut que son site soit rapide, y compris Google ! Si jamais vous avez besoin d’aide, n’hésitez pas à détailler votre problème en commentaire.