Table des matières de l'article :
Si vous êtes un développeur Web travaillant avec WordPress, vous connaissez probablement les avantages de la mise en cache. La mise en cache est un processus qui enregistre les ressources fréquemment accessibles telles que les images sur l'ordinateur du visiteur plutôt que sur le serveur. Cela réduit la charge et le nombre de requêtes adressées au serveur, ce qui améliore les performances.
Lorsqu'un site web est lent et peu performant, l'une des solutions les plus courantes consiste à installer CloudFlare.
Ainsi, nous avons la conviction et la conviction que CloudFlare peut mettre en cache les pages html de votre blog ou de votre commerce électronique, les pages de produits, les publications, les pages de catégories ainsi que les ressources statiques telles que CSS, JS et les médias tels que les images.
Rien n'est plus faux. Pour ceux qui l'ignorent, Cloudflare ne met pas les pages HTML en cache par défaut . Par conséquent, même si vous avez installé Cloudflare, le contenu HTML de votre site n'est certainement pas stocké dans son cache.
Cependant, il existe des moyens, certains utilisant presque nécessairement des plans d'affaires à partir de 200 $ par mois pour pouvoir utiliser de manière rentable le cache HTML CloudFlare dans les cas les plus réels et les plus courants d'utilisation de sites dynamiques.
D'autres options beaucoup moins chères existent pour faire exactement la même chose et nous serions heureux de les parcourir ensemble si vous nous demandez conseil.
Qu'est-ce que CloudFlare ?
Cloudflare est un réseau de diffusion de contenu (CDN) qui accélère votre site Web en le mettant en cache dans plusieurs centres de données à travers le monde. Il peut être utilisé pour protéger votre site contre les attaques DDoS, pour bloquer les utilisateurs malveillants et pour fournir des certificats SSL gratuits.
Quels sont les avantages de Cachare HTML avec CloudFlare ?
La vitesse de la page est un facteur extrêmement important pour l'UX, les taux de conversion et le référencement. Cette étude de cas décrit en détail comment nous avons utilisé une implémentation de base de la fonction de mise en cache HTML de Cloudflare sur un site Web de commerce électronique pour améliorer les temps de chargement moyens des pages de 28 %.
Si vous utilisez Cloudflare comme serveur CDN (serveur proxy HTTP) de votre site web , vous devez vérifier si les ressources de votre page web (CSS, js, images, contenu HTML) sont mises en cache par Cloudflare ou non.
Cloudflare ajoute un en-tête HTTP CF-Cache-Status avec différentes valeurs d'en-tête dans la réponse HTTP pour vous dire si votre ressource de requête a été mise en cache ou non. Cet article vous expliquera comment vérifier si Cloudflare CDN a mis en cache le contenu html, css, images, js de votre site Web ou non.
1. Quel type de ressources Cloudflare mettra-t-il automatiquement en cache ?
- Si vous ne définissez aucun paramètre spécial, Cloudflare ne mettra en cache que le contenu statique du site Web avec l'extension de fichier suivante. Noter que Cloudflare ne mettra pas en cache les fichiers HTML par défaut si vous ne faites pas de configurations spéciales.
- Par défaut, le CDN Cloudflare met en cache les fichiers avec les extensions de fichier suivantes : bmp, class, css, csv, doc, docx, ejs, eot, eps, gif, ico, jar, jpeg, jpg, js, mid, midi, otf, pdf, pict, pls, png, ppt, pptx, ps, svg, svgz, swf, tif, tiff, ttf, webp, woff, w0ff2, xls, xlsx.
2. Vérifiez la valeur de l'en-tête HTTP CF-Cache-Status de Cloudflare.
Nous pouvons utiliser divers inspecteurs de navigateur Web pour vérifier cette valeur d'en-tête. Cet exemple utilisera Google Chrome.
- Parcourez l'URL de votre page Web (par exemple https://www.code-learner.com/can-not-find-django-tutorial-django-polls-templates-error/) avec Google Chrome.
- Cliquez avec le bouton droit sur la page Web, cliquez sur l'élément de menu Inspecter dans la liste du menu contextuel pour afficher l'inspecteur.
- Cliquez sur l'onglet Rèsille dans la fenêtre d'inspection, puis sélectionnez l'actif du site Web dans le panneau de gauche.
- Tout d'abord, sélectionnons la première ressource du site Web qui est l'URL de la page Web. Cliquez sur En-têtes dans le panneau de droite, nous ne pouvons pas trouver l'en-tête CF-Cache-Statut , mais nous pouvons voir un en-tête rayon cf , cela signifie que Cloudflare ne met pas en cache cette ressource Web (car cette extension de fichier n'est pas incluse dans la liste par défaut des extensions de fichiers pouvant être mises en cache).
- Mais vous pouvez définir les règles de la page Cloudflare pour personnaliser l'option de mise en cache. Nous pouvons également le savoir à partir de la valeur d'un autre en-tête HTTP, le contrôler de cachette dans l'image ci-dessous. Sa valeur contient pas de cache , ce qui signifie que la page n'est pas renvoyée depuis le cache, elle est renvoyée depuis le serveur Web d'origine.
- Mais lorsque vous cliquez sur la deuxième ressource Web qui est un fichier js, vous pouvez trouver la valeur de l'en-tête cf-cache-statut è MISS . Cela signifie que le fichier js peut être mis en cache mais pas mis en cache dans Cloudflare maintenant. Ensuite, il sera également chargé à partir du serveur Web d'origine.
- Maintenant, cliquons sur la ressource Web galerie.min.css?ver = 4.0.0 (l'URL complète de la ressource est https://www.code-learner.com/wp-content/themes/stargazer/library/css/gallery.min .css? ver = 4.0.0), nous pouvons trouver la valeur de l'en-tête de cette ressource Web cf-cache-statut è HIT . Cela signifie que la ressource Web est mise en cache sur le serveur Cloudflare. La version mise en cache sera renvoyée.
3. Autres valeurs d'en-tête CF-Cache-Status.
- Outre HIT , MISS et non spécifié, l'en-tête CF-Cache-Statut a d'autres valeurs comme EXPIRÉ, PÉRIMÉ, IGNORÉ, REVALIDÉ, MISE À JOUR . Vous pouvez aller sur Cloudflare pour trouver tous les explications sur les valeurs de l'entête CF-Cache-Status .
Le problème avec CloudFlare c'est qu'il ne cache pas le HTML et les performances réduites.
La mise en cache du code HTML peut réduire considérablement l'utilisation des ressources et offrir des avantages en matière d'évolutivité et de performances. Contrairement aux actifs statiques, tels que Javascript, CSS et les images, le HTML est souvent personnalisé en fonction de la personne qui le consulte. Par conséquent, la mise en cache HTML, également appelée mise en cache pleine page, n'est pas anodine et il existe plusieurs écueils à éviter.
Cet article explique comment configurer la mise en cache HTML avec WordPress et Cloudflare.
Il existe trois composants principaux pour configurer correctement le cache HTML de Cloudflare :
- Une façon de dire à Cloudflare quoi mettre en cache. Pour la plupart des configurations, cela se fait en activant
cache everythingen combinaison avecbypass on cookieune règle de page qui correspond à chaque page de votre site. - Un moyen d'exclure les pages qui ne devraient jamais être mises en cache. Cela se fait également via les règles de la page, en définissant le cache sur
bypassostandard. - Un moyen d'invalider le cache lorsque le contenu est mis à jour . Cela rend généralement les choses difficiles et difficiles.
Les fonctionnalités Cloudflare requises pour la mise en cache du cache de page complète HTML
Vous trouverez ci-dessous les fonctionnalités nécessaires pour que le cache HTML fonctionne avec Cloudflare.
Règles des pages
Par défaut, Cloudflare ne met pas en cache le HTML . Pour activer la mise en cache du HTML, vous devez utiliser les règles de page, et plus précisément l'option « Tout mettre en cache ». Vous pouvez ainsi activer la mise en cache du HTML en créant une règle de page qui met en cache l'ensemble du contenu.
Cependant, il y a un petit problème avec cette approche technique, la condition préalable est que tout le contenu qui est mis en cache par cette règle de page doit répondre à deux critères. Le HTML doit être statique, ce qui signifie qu'il ne change pas au fil du temps (comme la première page d'une actualité change continuellement).
L'autre critère est que le contenu est anonyme. Cela signifie qu'il s'agit du même contenu destiné à tout visiteur de cette ressource, donc des pages non personnalisées pour les utilisateurs connectés, par exemple, telles que la caisse, les zones réservées, les listes de souhaits, etc.
En résumé, cela signifie essentiellement que la mise en cache de tous les paramètres ne suffit pas.
Cachez tout
Le risque de tout mettre en cache est toujours celui de pouvoir mettre en cache du contenu qui n'est pas destiné au prochain visiteur. Par exemple, si vous vous connectez à votre administrateur WordPress, il met tout en cache aveuglément et visite votre première page. Un prochain visiteur occasionnel verrait la page qui vous était destinée uniquement, avec la barre d'édition WordPress en haut. C'est pourquoi le paramètre Ignorer le cache sur les cookies est nécessaire.
Ignorer le cache des cookies
Pour accéder à un site Internet, des cookies sont nécessaires pour maintenir un lien entre votre ordinateur et le serveur. Lorsque vous avez ce cookie, il est envoyé avec chaque demande que vous faites au serveur. Cela signifie que vous pouvez demander au serveur de transmettre la demande au serveur d'origine, car l'utilisateur dispose d'un certain cookie. Avec cette option activée, vous pouvez fournir des réponses mises en cache aux visiteurs anonymes, tandis que vous, en tant qu'administrateur ou client enregistré dans votre WooCommerce, recevez une page HTML sur mesure qui ne sera pas mise en cache.
Choisissez le bon abonnement Cloudflare
Pour la mise en cache HTML sur Cloudflare, les éléments essentiels sont les règles de page et l'option « Ignorer le cache par cookie ». Par conséquent, si vous souhaitez mettre en cache du HTML sur Cloudflare, vous devrez opter pour l'abonnement Business à partir de 200 $ par mois , sans options supplémentaires.
Structures de mise en cache à plusieurs niveaux Cloudflare met en cache deux niveaux devant votre origine (au lieu d'un seul), ce qui peut réduire considérablement les temps de réponse dans le monde entier et économiser encore plus de ressources sur le serveur d'origine.
Comment configurer Cloudflare Business pour la mise en cache HTML pour WordPress
Lorsque vous envisagez de tirer parti de Cloudflare pour la mise en cache HTML, nous vous recommandons de réduire le nombre de plugins que vous utilisez pour l'optimisation, l'agrégation, la mise en cache, etc. sur votre site Web.
L'une des raisons est que plus vous utilisez de plugins et de fonctionnalités, plus cela devient complexe et plus il devient difficile de dépanner. Une autre raison est que les optimisations sont largement effectuées beaucoup plus efficacement sur Cloudflare que d'utiliser PHP dans WordPress. Dans les plans Cloudflare Business, vous aurez également un nombre illimité de travailleurs inclus, qui peuvent être exploités pour optimiser les polices, redimensionner les images, etc.
Il n'y a rien de plus ennuyeux que d'essayer de déboguer des problèmes de cache sur un CDN. Par exemple, un visiteur signalerait une erreur et lorsque vous essayez d'atteindre un autre nœud CDN, les résultats peuvent être complètement différents.
Définir les règles de la page
Vous aurez besoin d'un ensemble de règles dans la section des règles de la page Cloudflare, indiquant à Cloudflare comment traiter diverses demandes. La règle de première page qui correspond à la requête entrante est celle qui sera appliquée.
L'exemple ci-dessous est une configuration minimale absolue, qui fait le travail de base nécessaire pour faire fonctionner WordPress standard comme prévu.
Explication de ces règles :
Règle 1 activer le cache tout pour toutes les demandes allant à n'importe quoi dans le /wp-content/dossier, cela inclura vos thèmes et images.
Règle 2 Ignorer le cache pour toutes les requêtes commençant par /wp-(à l'exception wp-content, qui est gérée par la règle de la première page). Cela vous permet de vous connecter ( /wp-login.php) et travailler dans l'administrateur ( /wp-admin/*) sans rencontrer de problèmes de mise en cache. Lorsque vous vous connectez au Panneau de configuration, vous obtenez le no_cachegâteau
Règle 3 appliquer la politique par défaut pour le reste des demandes. C'est la règle qui permet la mise en cache HTML pour tout, à l'exception du contournement du cache si vous avez le no_cachebiscuit
Il est recommandé d'ajouter no_cache wp-*|wordpress-*|comment_*| woocommerce_*dans la règle de contournement.
Règles supplémentaires requises pour WooCommerce ou d'autres points de terminaison dynamiques sur votre site
Si vous exécutez WooCommerce, quelques autres points de terminaison doivent être exclus de la mise en cache. Le panier et le paiement sont dynamiques par conception et ne peuvent pas être mis en cache. Les itinéraires peuvent varier, vous devez donc vérifier quels itinéraires sont utilisés pour votre panier et passer à la caisse.
Ce qui suit est un exemple standard où nous avons ajouté deux règles de page supplémentaires (les deux premières) :
Le paiement implique souvent plusieurs étapes, de sorte que le /checkout/*La règle générique est utilisée pour contourner le cache. Et cet exemple a la page du panier d'achat vers le haut /cart.
Poursuite de la personnalisation des règles de page
Tous les sites sont différents et il existe généralement certains chemins et demandes que vous souhaitez exclure de la mise en cache. Les plugins et les thèmes nécessitent parfois une personnalisation. De plus, les requêtes API ne sont généralement pas quelque chose que vous souhaitez mettre en cache.
Souvent, vous souhaiterez également appliquer des politiques de mise en cache efficaces pour votre site. Il n'y a pas de règles générales, mais les outils de test en ligne se plaignent toujours de fixer les dates d'expiration du cache très loin.
Le paramètre « Durée de vie du cache » indique à Cloudflare combien de temps une ressource doit être conservée dans son cache. Par exemple, pour du contenu statique, il est souvent conseillé de le définir sur la valeur maximale (un mois). Pour le HTML, des durées plus courtes peuvent être préférables selon votre cas d'utilisation. Réfléchissez à la fréquence et au moment où vous souhaitez mettre à jour ce code HTML. L'avantage du cache Edge est qu'il est possible de le contrôler et d'en supprimer des éléments si nécessaire. Cela peut se faire via le panneau de contrôle ou, par exemple, à l'aide de Servebolt Optimizer, qui mettra automatiquement à jour le contenu concerné.
Nous pouvons également contrôler la durée de vie (TTL) du cache du navigateur à l'aide des règles de page. Le cache du navigateur est particulier car, contrairement au cache Edge, il n'est pas contrôlable . Il est impossible de le vider en cliquant sur un bouton. La seule façon de contourner le cache du navigateur est de forcer un rechargement de la page (ce qui entraîne son rechargement du serveur vers le navigateur) ou de le laisser expirer. L'avantage du cache du navigateur réside dans sa proximité avec l'utilisateur : il charge le HTML en une fraction de seconde car il ne nécessite aucun trafic réseau.
Il existe également un paramètre de contrôle du cache d'origine qui permet de gérer le cache du CDN depuis le serveur web d'origine. Cette fonctionnalité est particulièrement intéressante pour les utilisateurs avancés qui savent manipuler les en-têtes et les utiliser pour configurer le cache Edge.
Fonctionnalités « Bypass Cache on Cookie » et « Edge Cache TTL » de Cloudflare
Il existe plusieurs façons d'aborder les problèmes décrits ci-dessus, mais dans ce cas, nous avions besoin d'une solution simple qui ne nécessitait pas trop de ressources de développement.
Dans cet excellent article sur la mise en cache HTML pour les sites e-commerce , Hamlet Batista suggère qu'une solution pour les éléments de contenu dynamiques, comme le nom d'utilisateur connecté, consiste à ajouter cette information à la page via JavaScript, plutôt que de l'inclure dans le code HTML d'origine. Ainsi, les fichiers HTML sans éléments dynamiques, compatibles avec tous les utilisateurs, pourraient être mis en cache, et les éléments dynamiques ajoutés individuellement pour chaque utilisateur côté client. Le problème avec cette approche, bien qu'elle paraisse idéale, est qu'elle nécessiterait une modification importante de la programmation de certains éléments de la boutique.
Une alternative suggérée par Hamlet est d'activer la mise en cache HTML uniquement pour les utilisateurs qui ne sont pas connectés. Si nous appliquons cette idée à notre cas, avec des éléments de contenu dynamiques pour les utilisateurs connectés et pour les utilisateurs qui ont ajouté des produits à leurs paniers, cela signifierait que nous devrions trouver un moyen d'activer le cache HTML uniquement pour les utilisateurs qui sont pas connecté et qui n'ont rien ajouté à leur panier.
Cloudflare propose une solution de mise en cache des pages HTML personnalisée appelée « Bypass Cache on Cookie » (disponible pour les utilisateurs des forfaits Business et Enterprise ). Pour utiliser cette fonctionnalité, vous devez uniquement ajouter un cookie à votre site web. Ce cookie est créé à chaque fois que vous souhaitez exclure un utilisateur de la mise en cache HTML. Dans notre cas, nous avions besoin d'un cookie créé à chaque ajout de produit au panier ou connexion de l'utilisateur, et supprimé lorsque le panier est vidé ou que l'utilisateur se déconnecte.
Selon le CMS ou le système de commerce électronique que vous utilisez, il existe plusieurs façons de définir des cookies : vous pouvez même avoir de la chance et les cookies dont vous avez besoin existent déjà. Si vous ne savez pas comment paramétrer les cookies nécessaires pour implémenter la mise en cache HTML sur votre site Web, par exemple cône avec Google Tag Manager
La durée de vie du cache Edge de Cloudflare nous permet de définir un intervalle de temps après lequel le cache est vidé et Cloudflare récupère une nouvelle version de la page depuis le serveur d'origine lors de la prochaine requête d'un utilisateur. Nous avons choisi d'utiliser cette fonctionnalité pour que le cache de Cloudflare expire aussi fréquemment que les tarifs du site web sont mis à jour, soit toutes les 30 minutes.
L'utilisation des fonctionnalités « Contourner le cache sur les cookies » (pour exclure les utilisateurs connectés et les utilisateurs qui ont des produits dans le panier de la mise en cache HTML) et « Edge Cache TTL » (pour faire expirer le cache après un certain laps de temps).
Comment vider le cache Cloudflare
Commençons par savoir comment éviter de supprimer le cache, si vous voulez toujours conserver les meilleures performances possibles.
Le bouton « Tout supprimer » est très pratique, mais il a un impact considérable sur les performances. Ce bouton est très efficace et fait exactement ce qu'il promet : il supprime tous les éléments mis en cache pour l'ensemble de la zone (domaine) sur chaque nœud CDN du réseau Cloudflare. Cela signifie que tous les nœuds CDN doivent reconstruire leur cache en récupérant toutes les ressources depuis l'origine. Cette opération prend du temps et réduit les performances pour l'utilisateur final.
Par conséquent, la meilleure option consiste à utiliser la fonction de suppression personnalisée , si possible. Cette fonction invalide uniquement les chemins d'accès spécifiques, plutôt que d'invalider tous vos éléments statiques et toutes vos autres pages HTML.
Supprimer automatiquement via des plugins.
Certains plugins sont capables de le faire en s'accrochant à des actions qui sont effectuées chaque fois que vous mettez à jour une publication, une page, un produit ou tout autre type de publication. Nous faisons la même chose lorsque vous mettez à jour des termes de taxonomie tels que des catégories, des catégories de produits, des balises, etc.
La vraie magie est qu'en plus de supprimer le message lui-même, nous supprimons également les termes auxquels il appartient. De cette façon, vous pouvez vous assurer que, par exemple, la page de catégorie de produit est à jour si vous mettez à jour le prix d'un produit dans cette catégorie.
Comment remplacer CloudFlare par une alternative pour faire du HTML Caching ?
Comme nous venons de le voir, CloudFlare met en cache le contenu statique comme les images et les fichiers CSS, mais pas les pages HTML. Le vernis peut cacher les deux. Cela signifie que si vous utilisez CloudFlare en tant que CDN, vous aurez toujours besoin de Varnish pour des performances optimales.
Cloudflare est un réseau mondial de diffusion de contenu (CDN). Ce n'est pas tout à fait la même chose qu'un service de mise en cache comme Varnish.
Essayer d'utiliser Cloudflare pour la mise en cache peut causer des problèmes car il ne met pas en cache les pages HTML.
Le vernis, quant à lui, est un service de mise en cache. Il met en cache les pages HTML et ne les remet pas en cache à moins que vous ne leur disiez de le faire.
Cloudflare peut vous aider à accélérer votre site Web, mais uniquement si vous avez beaucoup de trafic. Si vous n'avez pas assez de trafic, Cloudflare réduit les performances de votre site Web, car il devra faire plus de requêtes à votre serveur pour obtenir le contenu.
Varnish est un proxy Web de mise en cache. Il se trouve devant votre serveur et tout trafic Web peut être mis en cache afin que l'utilisateur n'ait pas à attendre qu'il arrive du serveur d'applications. Varnish est connu pour être plus rapide que les autres solutions de mise en cache, car il est plus proche de l'utilisateur final et a une latence plus faible.
La différence entre Varnish et Cloudflare est que Cloudflare ne met pas en cache les pages HTML. C'est pourquoi Varnish pourrait être le meilleur remplaçant de Cloudflare.
