Personne n’aime attendre, il faut donc que votre site soit rapide à charger. Ca fera plaisir à vos internautes, à la planète, mais aussi à Google. On va donc voir comment mettre en place un cache au niveau de WordPress et optimiser les performances grâce à WP Rocket ou WP Super Cache.
Sommaire du cours
Dans ce cours on va déjà commencer par voir ce qu’est un système de cache et comment ça fonctionne, de manière simple et conceptuelle.
Une fois que vous aurez compris l’intérêt, je vais vous présenter 2 extensions ainsi que les avantages d’avoir un cache sur WordPress plutôt que sur le serveur.
On verra ensuite comment les configurer pour avoir les meilleures performances possibles, et on finira par mettre à l’épreuve notre site avec des outils en ligne afin de mesurer le gain sur temps de chargement.
Le principe du cache
Le cache est un système ingénieux, et son principe est facile à comprendre avec les bons schémas et en décortiquant chaque étape.
Sans cache
Lorsqu’un internaute demande une page web à un site WordPress, le serveur va inlassablement répéter les mêmes opérations : recevoir la requête, lancer PHP puis WordPress, interroger la base de données (BDD), générer un fichier HTML, et le renvoyer.
Quand vient un second internaute, le serveur va reproduire les mêmes opérations, pour exactement le même résultat : il aura généré à nouveau la même page, à l’identique, et aura sollicité inutilement les ressources du serveur et de la base de données.
Du coup, pourquoi ne pas garder en stock la première page générée, afin de la distribuer lorsque d’autres la demandent ? Eh bien voilà exactement le principe du cache ! Garder de côté des pages générées pour les distribuer plus rapidement à d’autres internautes plus tard.
Mise en cache
Avec un cache, lorsque le premier internaute visite une page web, cell-ci est générée au format HTML puis stockée dans le cache en même temps qu’elle est renvoyée.
Exploitation du cache
Lorsque l’internaute suivant visitera la même page, WordPress et la base de données ne seront pas sollicités : c’est le cache qui va renvoyer la page HTML précédemment stockée.
Et ce sera la même chose pour tous les internautes suivants.
Purge du cache
Par contre, lorsque la page est modifiée par un auteur du site, le cache sera invalidé et purgé puisque la page n’est plus à jour.
Le site n’attendra même pas que le prochain internaute vienne générer la nouvelle page pour la mettre en cache : il va prendre les devant et la générer directement. C’est ce que l’on appelle précharger le cache.
Voici donc, de manière légèrement simpliste, comment fonctionne un système de cache.
Les extensions de cache pour WordPress
On a vu quelques solutions de cache dans le cours dédié aux extensions incontournables de WordPress. J’ai parlé surtout de WP Super Cache, et de WP Rocket, mais il en existe d’autres comme Autoptimize, WP Fastest Cache ou encore WPOptimize (qui dépassent tous le million d’installations actives).
Alors pourquoi installer un cache au niveau de WordPress plutôt qu’au niveau serveur ? Eh bien déjà car c’est bien plus simple à mettre en place, et presque tout autant performant !
Le gros avantage, c’est que l’extension de cache va pouvoir se purger automatiquement lorsque vous mettez à jour un article, où que vous installez une nouvelle extension.
Du coup, une fois activé, ça marche et on ne s’en occupe plus.
On va se concentrer sur 2 extensions de cache WordPress dans ce cours. On aura le choix entre :
- WP Super Cache (gratuite), si vous ne voulez pas vous embêter ;
- Ou WP Rocket (premium), si vous voulez plus de contrôle et une performance maximale.
Un cache ultra simple avec WP Super Cache
Si vraiment vous voulez mettre en place un cache, en un clic, et ne pas vous embêter, optez pour WP Super Cache. L’extension est gratuite, et faite par les développeurs de chez Automattic, la maison mère de WordPress.com.
Un système de cache pour WordPress très rapide qui génère des fichiers HTML statiques.
La configuration est on ne peut plus simple. Activez l’extension, puis rendez-vous dans Réglages > WP Super Cache et cochez « Mise en cache Activée ».
Et c’est tout. Votre site va déjà commencer à se charger plus rapidement, et vos ressources serveurs seront économisées.
Configurer WP Rocket
WP Rocket est une extension premium, et donc directement payante. Mais les tarifs démarrent à 49$ par an pour un site, ce qui est très correct.
Make WordPress Load Fast in a Few Clicks.
Recognized as the most powerful caching plugin by WordPress experts.
Une fois l’extension activée, la licence se met automatiquement en place et le cache s’active.
De la même manière que WP Super Cache, WP Rocket ne nécessite pas de configuration pour commencer à améliorer votre site.
Mais on va pouvoir aller encore plus loin grâce à pleins de fonctionnalités. Je vais vous présenter les meilleures d’entre-elles tout de suite !
Optimisation des fichiers statiques
Dans cette rubrique, vous allez pouvoir minifier le HTML, les fichiers CSS et JS. Cela veut dire que le code contenu dans ces fichiers va être compressé pour occuper moins de place : les retours à la ligne et commentaires seront retirés pour alléger les fichiers.
Pour le CSS, si vous utilisez un préprocesseur comme Sass ou Less, la fonctionnalité ne sera pas nécessaire pour le fichier de votre thème, mais le restera pour tous les autres fichiers CSS fournis par les extensions.
Vous allez également pouvoir combiner les fichiers CSS : au lieu d’avoir une requête HTTP par fichier, un seul fichier global sera généré, contenant tous les CSS du site. Moins de requêtes signifie un chargement plus rapide (même si depuis HTTP2 c’est un peu moins vrai).
Et vous allez pouvoir faire la même chose avec les fichiers JS. WP Rocket va même tenter de conserver l’ordre d’apparition des scripts afin d’éviter de créer des erreurs.
Et enfin, vous pouvez aussi regrouper les requêtes vers les Google Fonts. Il se peut que plusieurs extensions aillent charger des polices, en plus des vôtres sur votre thème. WP Rocket va donc regrouper le tout en une seule requête. La combinaison de polices est alors mise en cache également côté Google.
Optimisation des médias
Dans cette rubrique, vous allez pouvoir activer le lazyloading des images. Cette pratique consiste à ne charger que les images visibles dans la fenêtre du navigateur, et attendre que l’internaute commence à scroller pour charger celles qui se trouvent plus bas dans la page.
Cela aurait pour effet d’économiser pas mal de requêtes au chargement initial de votre page.
Même si le navigateur est désormais capable de faire du lazyloading lui-même, il faut quand même l’indiquer sur les images, et WordPress ne le fait pas encore nativement. Donc je vous conseille activer le lazyload de WP Rocket.
Vous allez également pouvoir désactiver les emojis. WordPress charge en front une feuille de style et un script liés à leur prise en charge. Donc si vous ne les utilisez pas sur votre site, autant les désactiver !
Vous pourriez retirer également les embeds de WordPress si vous êtes certain de ne jamais insérer de lien vers un tweet, une vidéo youtube, une playlist Spotify… Mais en général je préfère les laisser.
Enfin, concernant la compatibilité avec le WebP (le format d’images le plus performant sur le web), WP Rocket conseille l’utilisation de leur extension Imagify qui optimise les images et les convertit en WebP, et c’est justement le sujet du prochain cours !
Optimisation de la base de données
En plus des outils de cache et de performances, WP Rocket vous propose des outils pour nettoyer la base de données, comme :
- Les contenus inutiles : révisions, brouillons automatiques, contenus en corbeille ;
- Les commentaires : spams, dans la corbeille ;
- Les transients (données mises en cache en base) : les expirés seulement ou tous.
Il y a aussi un outil d’optimisation des tables de la base qui vous indique si de la place peut-être gagnée dans votre base de données. Ça ne va pas pour autant rattraper le carnage que peuvent causer certains plugins mal conçus, mais c’est déjà ça.
Et vous pouvez en plus planifier un nettoyage automatique tous les jours, semaines ou mois. C’est utile si vous avez beaucoup de contenus et plusieurs auteurs sur votre site, ce qui génère beaucoup de révisions, transients… Un nettoyage mensuel devrait amplement suffire.
Ajouter un CDN avec RocketCDN
Un CDN, ou Content Delivery Network, est un réseau permettant de distribuer rapidement vos ressources statiques (CSS, JS, Images…) dans le monde.
De cette manière :
- Votre serveur n’a pas besoin de le faire (il a déjà assez à faire à générer les pages) ;
- Vos ressources sont disponibles à plusieurs endroits dans le monde, et toujours proches de vos visiteurs.
Le CDN est donc utile pour des sites à fort trafic, dont les internautes sont répartis dans différentes zones géographiques. C’est donc très utile pour un site multilangue.
RocketCDN, le CDN de WPRocket, est disponible à partir de 8$ par mois et par site. Mais l’extension ne vous impose pas son CDN pour autant, vous pourriez très bien utiliser Cloudflare ou StackPath pour ne citer qu’eux.
Sur un hébergement spécialisé WordPress, ce n’est pas nécessaire car le CDN est déjà intégré dans l’offre.
Même si ces options ne sont pas obligatoires, elle peuvent apporter de belles améliorations au niveau de la performance de votre site.
Il existe bien d’autres réglages encore mais ils sont plus spécifiques, et pas forcément nécessaires dans la plupart des cas. Déjà, avec tout ça d’activé, vous avez un site bien plus rapide. Justement, on va maintenant tester la différence !
Tester la rapidité de son site
Notre site devrait être plus performant, alors on va tester à quel point. Et il y a plusieurs méthodes pour cela : depuis votre navigateur, ou via un outil en ligne.
Depuis l’inspecteur du navigateur
Vous pouvez déjà faire un test avec l’inspecteur de votre navigateur. Ouvre le avec un Clic droit > Inspecter > Network. Chargez la page que vous souhaitez tester (CMD+R).
Comme je suis connecté en tant qu’administrateur, les résultats affichés seront ceux du site SANS cache.
On peut voir que ma page fait 4.4Mo, que le DOM (la page) était prêt au bout de 1.96s et qu’il a fallu 4.39s au total pour charger la page.
J’essaie du coup maintenant la même chose, en navigation privée afin de bénéficier du cache :
C’est beaucoup mieux ! Ma page est un peu plus légère, le DOM est prêt en seulement 500ms et la page chargée en 1.10s, soit 4x plus rapidement !
Pour aller plus loin, regardons du côté de la waterfall à droite, qui affiche visuellement le temps qu’a pris chaque fichier à charger. On voit pour chaque ressource :
- En vert le temps TTFB : Time to first byte. C’est le temps attendu avant la réponse du serveur ;
- En bleu, le temps de chargement effectif de la ressource.
Il y a un peu d’attente avant chaque téléchargement et ce malgré le cache. Mais en fait c’est le serveur qui est en cause.
Pour améliorer ça, J’aurais pu activer un CDN. Mais avouez que mes performances sont déjà pas mal !
Les outils en ligne
Il existe également de nombreux outils en ligne pour tester la rapidité de votre site. Parmi les plus connus, on trouve PageSpeed de Google, GTmetrix ou encore Pingdom Tools.
Ces outils ne se basent pas tous sur les mêmes critères, et en plus, certains qui seraient notés comme mauvais sur votre site n’amélioreraient rien s’ils étaient bons.
Du coup, il ne faut pas non plus prendre tout au pied de la lettre. Ce serait aller dans de la micro optimisation inutile.
Je vais tester avec Pingdom Tools, car il permet de choisir le serveur de test. Je choisis le plus proche : Europe – Germany – Frankfurt. Par précaution lancez toujours le test 2 à 3 fois d’affilée (au cas où le cache n’était pas encore prêt).
Pingdom me donne une note de 82%, un poids de page à 3.9Mo, et un temps de chargement de 787ms pour 52 requêtes. Pas mal du tout !
Il y aurait encore des choses à améliorer, mais franchement, on a déjà atteint de superbes performances avec peu d’efforts !
Une dernière précision : ce cours ne dispose d’aucun lien d’affiliation, comme tous les cours de CapitaineWP.
Comme on vient de le voir il n’est pas compliqué d’optimiser un site WordPress grâce à une extension de cache. Et même si ce n’est pas la seule action à mener, vous aurez déjà une belle amélioration des performances avec peu d’effort.
Les extensions de cache se montrent donc indispensables pour vos sites WordPress. Dans le prochain cours, on va continuer l’optimisation, avec cette fois-ci les images, qui représentent jusqu’à 80% du poids d’une page web.
0
Questions, réponses et commentaires