WordPress : mise en cache

image_pdf

Principe de la mise en cache

Fonctionnement sans cache

Le fonctionnement client/serveur classique de WordPress sans mise en cache suit généralement les étapes suivantes :

  1. Requête du client : lorsqu’un utilisateur visite votre site WordPress en entrant l’URL dans son navigateur, une requête est envoyée au serveur qui héberge votre site.
  2. Traitement côté serveur : le serveur web reçoit la requête et, en fonction de l’URL demandée, il identifie le fichier PHP principal de WordPress, généralement appelé index.php, pour le traitement.
  3. Initialisation de WordPress : le fichier index.php démarre le processus d’initialisation de WordPress. Il inclut le fichier wp-load.php, qui à son tour inclut d’autres fichiers principaux nécessaires au bon fonctionnement de WordPress.
  4. Analyse de l’URL et routage : WordPress analyse l’URL de la requête pour déterminer quel contenu doit être affiché. Cela comprend l’identification du type de contenu (page, article, catégorie, etc.) et la recherche de l’identifiant unique (ID) du contenu demandé.
  5. Accès à la base de données : WordPress utilise les informations extraites de l’URL pour interroger la base de données afin de récupérer le contenu approprié, comme le contenu d’un article ou d’une page, les paramètres du thème, les métadonnées, etc.
  6. Traitement des templates : une fois que les données sont récupérées de la base de données, WordPress utilise le système de templates pour générer la page finale à afficher. Cela implique l’assemblage des différentes parties du contenu, l’application du thème choisi et des fonctions conditionnelles pour afficher des éléments tels que la barre latérale, les widgets, les commentaires, etc.
  7. Renvoi de la réponse au client : une fois que la page est complètement générée, le serveur envoie la réponse (HTML, CSS, JavaScript, etc.) au navigateur du client.
  8. Affichage côté client : le navigateur du client reçoit la réponse du serveur et interprète le code HTML pour afficher la page Web sur l’écran de l’utilisateur. Cela inclut le rendu de la mise en page, des images, des polices, des styles, etc.

Sans mise en cache, chaque fois qu’un utilisateur accède à une page de votre site, ce processus complet est répété, ce qui peut entraîner des temps de chargement plus longs, surtout lorsque le site reçoit beaucoup de trafic.

Cependant, le fonctionnement de base décrit ci-dessus permet à WordPress de fournir un contenu dynamique et actualisé à chaque visiteur, en tenant compte des mises à jour de contenu, des commentaires, des interactions de l’utilisateur, etc.

C’est là qu’intervient la mise en cache pour améliorer les performances.

Fonctionnement avec cache

Stockage des images, ressources CSS et JS, des pages HTML, dans une zone temporaire plus rapide.

Principe de mise en cache :

  1. Lors de la première visite : le cache navigateur est vide, le navigateur télécharge les éléments de la page et les stocke dans l’espace temporaire
  2. À la prochaine visite : le navigateur web n’a pas à recharger les éléments 

Avec la mise en cache, le fonctionnement client/serveur de WordPress est optimisé pour améliorer les performances en réduisant la charge sur le serveur et en diminuant les temps de chargement des pages pour les visiteurs.

Voici comment fonctionne le processus avec la mise en cache (détails) :

  1. Requête du client : lorsqu’un utilisateur visite votre site WordPress, une requête est envoyée au serveur.
  2. Vérification de la mise en cache : avant de passer au traitement complet de WordPress, le serveur vérifie s’il y a une version mise en cache de la page demandée.
  3. Cache HIT : si une version mise en cache de la page existe et n’a pas expiré, le serveur renvoie directement la page HTML mise en cache au client, évitant ainsi le traitement complet de WordPress. Cela permet de réduire considérablement les temps de chargement, car le contenu est déjà pré-généré et prêt à être affiché.
  4. Cache MISS : si aucune version mise en cache de la page n’est disponible ou si celle-ci a expiré, le serveur passe au processus complet de traitement de WordPress, comme décrit dans la réponse précédente, et génère une nouvelle version de la page.
  5. Mise en cache de la nouvelle version : une fois la page générée, le serveur met à jour le cache avec la nouvelle version, de sorte que les prochaines requêtes pour la même page puissent être traitées plus rapidement.
  6. Renvoi de la réponse au client : le serveur envoie la réponse (soit la page mise en cache, soit la nouvelle version générée) au navigateur du client.
  7. Affichage côté client : le navigateur du client reçoit la réponse du serveur et affiche la page web.

Avec la mise en cache en place, les visiteurs du site peuvent bénéficier de temps de chargement plus rapides, car certaines parties du processus sont évitées grâce à l’utilisation de la version mise en cache.

Cependant, cela signifie également que le contenu affiché peut ne pas être toujours complètement à jour, parce que les pages mises en cache ne sont pas régénérées à chaque visite.

Attention ! La mise en cache peut créer des décalages, elle s’effectue pour un instant T et les changements ne seront visibles à l’internaute que si le cache est vidé.

Pour remédier à cela, il est essentiel de définir des règles appropriées pour l’expiration du cache, en particulier pour les contenus qui changent fréquemment, tels que les commentaires ou les articles mis à jour régulièrement.

Préchargement du cache

Le préchargement du cache dans WordPress fait référence à la génération anticipée de pages mises en cache avant qu’un utilisateur ne les demande réellement.

Cela permet d’améliorer les performances en réduisant le temps de réponse lorsque des visiteurs accèdent à ces pages, car elles sont déjà pré-générées et stockées dans le cache.

Extensions de mise en cache : WP Super Cache (gratuit), W3 Total Cache (gratuit), WP Rocket (payant), …

WP Super Cache

WP Super Cache

WP Super Cache est un plugin WordPress qui permet de créer des pages statiques à partir de pages dynamiques pour accélérer le temps de chargement des pages de votre site web WordPress.

Info : WP Super Cache a été créé par Automattic, la maison mère de WordPress.

Lorsqu’un visiteur accède à une page de votre site Web, WordPress doit généralement effectuer des opérations complexes pour récupérer les informations à partir de la base de données et générer la page dynamique. Cela peut ralentir le temps de chargement de la page et ralentir l’expérience utilisateur.

Avec WP Super Cache, l’extension génère des pages HTML statiques à partir des pages dynamiques de votre site Web. Ces pages HTML sont stockées dans le cache et servies aux visiteurs ultérieurs qui accèdent à la même page. Cela réduit le temps de chargement des pages, car les pages statiques sont beaucoup plus rapides à charger que les pages dynamiques générées en temps réel.

WP Super Cache — menu Réglages > WP Super Cache, pour activer la mise en cache.

N’oubliez pas de vider le cache si jamais vous ne voyez pas immédiatement vos dernières modifications.  

Bouton « Purger le cache »  (dans la barre administrateur)  pour WP Super Cache.

Alternative : l’extension premium WP Rocket (59 $ / an pour un site) développée par la société française WP Media propose une interface simple à prendre en main.

Remarque : la performance d’un site web ne se base pas uniquement sur la mise en cache, la compression des scripts et styles, leur concaténation, l’utilisation d’un CDN, la compression des images… sont d’autres actions qui peuvent être mises en place.

L’extension WP Rocket est un plugin de mise en cache populaire pour WordPress qui offre diverses fonctionnalités d’optimisation des performances, y compris la minification du HTML, des fichiers CSS et JavaScript.

Exemple de minification : suppression des retours à la ligne, des commentaires, etc.

WP Rocket permet de combiner les fichiers CSS à l’aide de sa fonctionnalité de “Concaténation des fichiers CSS“.

La concaténation consiste à regrouper plusieurs fichiers CSS en un seul fichier, ce qui réduit le nombre de requêtes HTTP nécessaires pour charger ces fichiers, améliorant ainsi les performances du site.

Remarque : vous pouvez également faire la même chose avec les fichiers JS.

Attention ! L’activation des options de WP Rocket (minification, concaténation) peut parfois provoquer des incompatibilités.

WP Rocket permet par ailleurs …

  • d’activer le lazyload qui charge les images uniquement lorsque l’utilisateur fait défiler la page et qu’elles deviennent visibles à l’écran, ce qui réduit le temps de chargement initial et économise de la bande passante
  • de désactiver les fichiers liés aux emojis, ce qui peut contribuer à améliorer les performances
  • de nettoyer la base de données : suppression des données obsolètes, nettoyage des révisions des articles, des brouillons, des commentaires indésirables et autres éléments inutiles, ce qui peut contribuer à réduire la taille de la base de données et à améliorer les performances de votre site WordPress.
  • d’ajouter un CDN (Content Delivery Network) : WP Rocket utilisera automatiquement le CDN pour charger les fichiers statiques tels que les images, les fichiers CSS et JavaScript depuis le réseau de diffusion de contenu mondial, ce qui peut améliorer les performances et réduire les temps de chargement de votre site.

Remarque : le nettoyage automatique de la base de données peut être programmé tous les jours, toutes les semaines ou tous les mois.

Grâce au CDN, vos ressources sont disponibles en plusieurs copies, diffusées sur différents points du globe, dans le but de proposer à vos visiteurs le contenu le plus proche, ce qui sera utile si votre site à un fort trafic et que vos visiteurs sont situés dans différentes zones géographiques.

Remarque : RocketCDN est proposé en abonnement à 7,99 $ / an, mais vous pouvez tout aussi bien utiliser un CDN Cloudflare, etc.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.