Vitesse et cache pour une boutique en ligne

Module 6: Gestion et sécurité · Temps de lecture : 10 minutes

Objectif pédagogique : À l’issue de cette leçon, vous saurez configurer le cache d’une boutique WooCommerce de sorte que la boutique soit rapide et que les pages personnelles n’entrent jamais dans le cache, et vous saurez le vérifier à l’aide des en-têtes HTTP.

Notions clés : cache des pages, exclusions (panier, validation de commande, Mon compte), cookies qui contournent le cache, en-têtes no-cache, DONOTCACHEPAGE, cache d’objets, Redis, fragments de panier, géolocalisation avec cache des pages, nettoyage des actions planifiées

Deux types de pages

Les bases du cache (cache des pages, cache du navigateur, cache d’objets, OPcache, un CDN) sont présentées dans la formation WordPress, leçon 6.2. Vous y trouvez déjà la règle la plus importante pour une boutique : les pages personnelles ne doivent pas entrer dans le cache des pages. Cette leçon la développe.

Une boutique comporte deux types de pages :

En cas d’erreur, vous le voyez tout de suite : un client voit le panier d’un autre ou, pire, l’adresse de quelqu’un sur la page de commande. Il s’agit aussi d’une violation de données au sens du RGPD (KB 6749).

Ce que WooCommerce fait déjà

WooCommerce aide un cache de trois manières. Il est utile de les connaître pour repérer le moment où quelque chose les supprime :

1. Constantes. Sur le panier, la validation de commande et Mon compte, WooCommerce définit DONOTCACHEPAGE (ainsi que les constantes pour le cache d’objets et de base de données). De nombreuses extensions de cache lisent cette constante et ignorent alors la page.
2. En-têtes HTTP. Sur ces mêmes pages, WooCommerce envoie les en-têtes no-cache de WordPress : Cache-Control: no-cache, must-revalidate, max-age=0, private et un Expires dans le passé. Un proxy ou un CDN qui respecte les règles ne conserve alors pas la page. Pour les utilisateurs connectés, no-store s’y ajoute.
3. Cookies. Dès qu’une personne ajoute un article au panier, WooCommerce place des cookies comme woocommerce_items_in_cart, woocommerce_cart_hash et wp_woocommerce_session_.... Un bon cache ne sert plus de page enregistrée aux visiteurs qui ont un tel cookie, pas même pour les pages produit, car le mini-panier dans l’en-tête du site, par exemple, diffère alors d’un visiteur à l’autre.

Pour les extensions de cache, la documentation de WooCommerce indique : excluez le panier, Mon compte et la validation de commande, ainsi que les cookies woocommerce_cart_hash, woocommerce_items_in_cart, wp_woocommerce_session_, woocommerce_recently_viewed et store_notice[...]. Pour Varnish, elle fournit aussi des règles pour les adresses contenant ?add-to-cart=.

Où les problèmes surviennent en pratique

• D’autres adresses pour les pages de la boutique. Vous avez renommé le panier en /mon-panier/, ou une extension de traduction crée /de/warenkorb/. Un cache qui exclut des adresses fixes comme /cart passe à côté. Les extensions de cache qui connaissent WooCommerce lisent les pages dans les réglages ; un cache sur le serveur ou chez un CDN ne le fait pas.
• Un CDN qui met tout en cache. Certaines règles de CDN (« cache everything ») ignorent les en-têtes. Excluez alors explicitement les pages de la boutique et les cookies cités.
• Une extension qui écrase les en-têtes. Une extension de sécurité ou de performance place parfois Cache-Control: public, max-age=... sur chaque page. Les en-têtes no-cache disparaissent alors.
• Une session pour chaque visiteur. Normalement, WooCommerce ne place un cookie de session que lorsque le panier contient quelque chose. Si une extension ou un thème ouvre déjà une session pour chaque visiteur (un cookie wp_woocommerce_session_ ou PHPSESSID dès la première visite), le cache des pages ne fonctionne plus pour personne et votre boutique devient lente en période d’affluence.
• Géolocalisation. Dans WooCommerce > Réglages > Général, vous choisissez la localisation par défaut d’un client. Avec la simple option « Géolocalisation », le serveur détermine le pays pour chaque visiteur, ce qui ne convient pas à un cache des pages lorsque les prix varient selon le pays. WooCommerce propose donc l’option « Géolocalisation (avec prise en charge de la mise en cache des pages) », qui détermine le pays par une requête supplémentaire dans le navigateur. Si vous n’avez pas besoin de prix ou de TVA par pays avant la validation de commande, choisissez le pays de la boutique : c’est le plus simple. Pour la géolocalisation, WooCommerce télécharge régulièrement une base de données de MaxMind.

Sur un serveur LiteSpeed (comme chez WebOké), l’extension LiteSpeed Cache gère elle-même les exclusions pour WooCommerce ; vérifiez-les dans les réglages d’exclusion. Avec d’autres serveurs web et hébergeurs, le principe est similaire avec une autre extension de cache.

Ce que le cache des pages ne résout pas

Le panier et la validation de commande sont toujours générés par PHP et la base de données. En période d’affluence (une promotion, une newsletter), ce sont justement les pages où vos clients dépensent de l’argent. D’autres solutions aident à cet endroit :

• Un cache d’objets comme Redis conserve en mémoire le résultat des requêtes à la base de données. Pour une boutique, qui compte beaucoup de pages exclues du cache des pages, le gain est nettement plus sensible que pour un site ordinaire. Votre hébergement doit proposer Redis (c’est possible chez WebOké, DA 15.7) ; vous l’activez ensuite avec une extension.
• Fragments de panier. Les thèmes classiques mettent à jour le mini-panier de l’en-tête avec un script (wc-cart-fragments) qui effectue une requête supplémentaire lorsque le panier est rempli. Les thèmes modernes à blocs avec le bloc mini-panier en ont moins besoin. Ne chargez pas ce type de script sur les pages où il ne sert à rien.
• Des actions planifiées nettoyées. WooCommerce utilise Action Scheduler pour les tâches en arrière-plan (leçon 7.3). Par défaut, les actions terminées sont supprimées au bout d’un mois. Si la liste atteint malgré tout des centaines de milliers d’entrées, souvent à cause d’une extension qui planifie sans cesse quelque chose ou d’actions échouées, les requêtes à la base de données ralentissent. Consultez dans WooCommerce > État > Actions planifiées le nombre d’actions échouées et en attente.
• HPOS. Les commandes dans leurs propres tables (leçon 1.2) rendent la recherche de commandes plus rapide qu’avec l’ancienne table des publications. Les boutiques existantes doivent faire la migration elles-mêmes (leçon 6.2 sur les sauvegardes préalables).
• Une version de PHP à jour et suffisamment de mémoire (leçon 7.2).

En pratique : voici à quoi cela ressemble dans WooCommerce

Vérifiez-le pour Maison de thé Example (boutique en ligne à Utrecht, Pays-Bas) dans une fenêtre de navigation privée avec les outils de développement de votre navigateur (F12, onglet Réseau, première requête) :

1. Page d’accueil, chargée deux fois : au second chargement, un en-tête comme x-litespeed-cache: hit ou cf-cache-status: HIT. Pas de cookie wp_woocommerce_session_ lors de la première visite.
2. shop.example.com/panier/, chargée deux fois : pas de hit, et un cache-control avec no-cache ou private.
3. Même chose pour la validation de commande et Mon compte.
4. Ajoutez un produit au panier et chargez une page produit : vous voyez votre propre panier, pas une version enregistrée.

Résumé

• Les pages identiques pour tous vont dans le cache ; le panier, la validation de commande et Mon compte jamais.
• WooCommerce définit lui-même DONOTCACHEPAGE, les en-têtes no-cache et les cookies ; vérifiez que rien ne les supprime ni ne les ignore.
• Faites attention aux adresses renommées, aux règles de CDN, aux extensions qui écrasent les en-têtes, aux sessions ouvertes pour chaque visiteur et à la géolocalisation.
• Redis, des actions planifiées nettoyées, HPOS et une bonne version de PHP aident là où le cache des pages ne peut rien.
• Testez en chargeant deux fois chaque page dans une fenêtre privée et lisez les en-têtes.

Quiz

Exercice

Exercice A6.4 : Le panier et la page de commande restent-ils hors du cache ? Saisissez l’adresse de votre boutique ainsi que les adresses de votre panier et de votre page de validation de commande (et éventuellement de Mon compte). Le programme demande la page d’accueil deux fois, à 2 secondes d’intervalle, sans cookies, puis chaque page de la boutique deux fois également. Rien n’est ajouté au panier et rien n’est commandé. Vert si la page d’accueil provient du cache au second chargement (ou est nettement plus rapide) sans placer de cookie de session, et si chaque page de la boutique n’a pas de hit de cache au second chargement et envoie un Cache-Control avec no-cache, no-store, private ou max-age=0. Orange si la page d’accueil n’utilise pas de cache, ou si une page de la boutique n’a pas de hit mais n’envoie pas non plus d’en-tête no-cache. Rouge en cas de hit de cache sur le panier, la validation de commande ou Mon compte, ou si la page d’accueil ouvre une session WooCommerce pour chaque visiteur.

Une coche verte signifie que ce contrôle est correct à cet instant, pas que votre boutique est sûre.

Pour aller plus loin

Les étapes dans un panneau de contrôle concernent WebOké ; chez d’autres fournisseurs, le principe est similaire.

• Formation WordPress gratuite 6.2: Le cache
• Formation WordPress gratuite 6.3: Images, PHP et autres gains de vitesse
• Guide DirectAdmin 15.7: Redis
• Mon site web est lent ou consomme trop de CPU : voici comment l'accélérer
• S'agit-il d'une fuite de données et dois-je la signaler ?
• Configuring caching plugins (developer.woocommerce.com, en anglais) : https://developer.woocommerce.com/docs/best-practices/performance/configuring-caching-plugins/
• Cache LiteSpeed pour WordPress et une boutique en ligne