Formation « Développer un thème WordPress sur mesure »

Performances : optimiser le temps de chargement avec un cache

Lecture : 9 minutes • 0


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.

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.

Schéma montrant un client et le serveur qui traite une requête HTTP et génère la page web via WordPress et la base de données
Schéma client serveur lors d’une requête à un site WordPress

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.

Schéma client - serveur : cette fois WordPress met en cache la page HTML générée
Une fois la page générée, WordPress la met de côté, dans le cache

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.

Schéma client - serveur : l'internaute suivant récupère directement la page mise en cace
L’internaute suivant récupère directement la page mise en cache

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.

Schéma client - serveur : WordPress supprime la page en cache lorsque l'auteur enregistre les modifications
WordPress purge le cache au moment où l’auteur enregistre son contenu

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

Logos d'extensions de cache

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.

WP Super Cache

WP Super Cache

Un système de cache pour WordPress très rapide qui génère des fichiers HTML statiques.

Automattic

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 ».

Capture d'écran de la page de configuration de WP Super Cache
La page de configuration de WP Super Cache

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.

Une fois l’extension activée, la licence se met automatiquement en place et le cache s’active.

Capture d'écran du panneau de réglages de WP Rocket
Le panneau de réglages de WP Rocket

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.

Capture d'écran du fichier CSS avant et après la minification
À gauche, le CSS normal, à droite, le CSS minifié

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.

Capture d'écran de l'interface de WP Rocket pour la minification des ressources statiques
L’interface pour activer la minification des fichiers statiques

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.

Attention

Parfois, ça ne fonctionnera pas (surtout avec un thème premium). Si c’est le cas, désactivez la combinaison des fichiers, et éventuellement la minification.

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.

Capture d'écran des réglages de médias de WP Rocket
Les réglages de médias de WP Rocket

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.

La prise en charge des emojis dans WordPress nécessite des requêtes HTTP supplémentaires
C’est pas MSN ici !

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, transientsUn nettoyage mensuel devrait amplement suffire.

Ajouter un CDN avec RocketCDN

Schéma d'un CDN

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.

Capture d'écran de l'interface de configuration du CDN sur WP Rocket
RocketCDN est le CDN officiel de WPRocket

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.

Capture d'écran de l'inspecteur de Chrome, montrant les ressources chargées par le site
Le temps de chargement de la page est calculé ici

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 :

L'inspecteur de Chrome qui montre cette fois de bien meilleures performances !
Avec le cache, c’est beaucoup mieux !

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 !

Conseil

Pour tester les effets du cache, il faut vous mettre en navigation privée, car le cache n’est pas actif par défaut pour les utilisateurs connectés comme les administrateurs.

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).

Capture d'écran du panneau de résultats de Pingdom Tools après l'analyse d'un site
Les résultats de Pingdom Tools sont plutôt bons !

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 !

Attention

Ne vous fiez pas à 100% aux résultats de ces outils. Le plus important c’est encore d’avoir un chargement rapide à l’oeil nu.

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

Laisser un commentaire