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.
Lorsque vous avez un site lent et peu performant, l'un des comportements standard les plus adoptés est celui de Installez 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 de plus mal à la place. Pour les non-initiés, CloudFlare ne met PAS en cache les pages HTML par défaut et donc vous aurez installé CloudFlare mais vous n'aurez sûrement pas stocké le contenu HTML de votre site dans le cache CloudFlare.
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 tu utilises Cloudflare en tant que serveur CDN de votre site Web (serveur proxy HTTP), vous devez vérifier si les ressources de votre page Web (CSS, js, images, contenu Html) ont été 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 sommier 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 HTML peut réduire considérablement l'utilisation des ressources et offrir des avantages en termes d'évolutivité et de performances. Contrairement aux actifs statiques, tels que Javascript, CSS et 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 présente plusieurs pièges.
Cet article explique comment obtenir le 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 everything
en combinaison avecbypass on cookie
une 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
bypass
ostandard
. - 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 il ne met pas en cache le HTML. Pour activer la mise en cache HTML, vous devez utiliser les règles de page et, plus précisément, le paramètre Cache tout. Avec cela, vous pouvez activer la mise en cache HTML en créant une règle de page qui met tout en cache.
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
Les éléments essentiels pour faire fonctionner le cache HTML sur Cloudflare sont les règles de page et le paramètre Contourner le cache sur les cookies. Cela signifie que si vous souhaitez mettre en cache du HTML sur Cloudflare, vous recherchez le plan Affaires à partir de 200$ par mois, sans aucun module complémentaire.
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_cache
gâ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_cache
biscuit
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 Expirer la durée de vie du cache est un paramètre qui indique à Cloudflare combien de temps ils doivent conserver un actif dans leur cache. Par exemple, pour le contenu statique, c'est souvent une bonne idée de le régler au maximum (un mois). Pour HTML, vous voudrez peut-être des temps plus courts en fonction de votre cas d'utilisation. Posez-vous la question, quand et à quelle fréquence vous souhaitez que ce code HTML soit mis à jour. Une bonne chose à propos d'Edge Cache est que nous pouvons le vérifier et en supprimer des éléments si nécessaire. Cela peut être fait soit via le panneau de contrôle, soit en utilisant par exemple Servebolt Optimizer, qui mettra automatiquement à jour le contenu pertinent.
Nous pouvons également vérifier le TTL du cache de navigateur en utilisant les règles de page. Le cache du navigateur est spécial, car nous ne pouvons pas le contrôler comme Edge Cache. Il ne peut pas être supprimé en cliquant sur un bouton. Le seul moyen de contourner le cache du navigateur est de forcer une page à se recharger (ce qui entraînera le rechargement de la page du serveur vers le navigateur) ou de la laisser expirer. L'avantage du cache du navigateur est qu'il s'agit du cache le plus proche des utilisateurs, il effectuera donc le chargement du HTML en quelques fractions de seconde car il ne nécessite aucun trafic réseau.
Il y a aussi source de contrôle du cache paramètre qui vous permet de contrôler le cache CDN à partir du serveur Web source. C'est une fonctionnalité très intéressante pour les utilisateurs avancés, qui savent comment manipuler les en-têtes et former le cache Edge à l'aide d'en-têtes.
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.
Hameau Batista en cet article génial sur la mise en cache HTML pour les sites Web de commerce électronique , suggère qu'une solution pour les éléments de contenu dynamiques tels que le nom d'un utilisateur connecté serait d'ajouter ces informations à la page via JavaScript, plutôt que de les inclure dans le code HTML d'origine. De cette façon, les fichiers HTML sans éléments dynamiques qui fonctionnent pour tous les utilisateurs pourraient être mis en cache et des éléments dynamiques pourraient être ajoutés individuellement pour chaque utilisateur côté client. Notre problème avec cette approche, même si cela semble être une excellente solution, est qu'elle nécessiterait un changement important dans la façon dont certains éléments du magasin sont programmés.
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 offre un solution de mise en cache des pages HTML uniquement pour certains utilisateurs , appelé « Bypass Cache on Cookie » (disponible pour les utilisateurs du Plan d'affaires et d'entreprise ). Le seul élément supplémentaire dont vous avez besoin sur votre site Web pour utiliser cette fonctionnalité est un cookie qui est défini chaque fois que vous souhaitez exclure un utilisateur de la mise en cache HTML. Dans notre cas, nous avions besoin d'un cookie qui était défini à chaque fois qu'un utilisateur ajoutait un produit au panier ou se connectait et qui était supprimé chaque fois que le panier était vide ou que l'utilisateur se déconnectait.
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
TTL du cache périphérique Cloudflare est une fonctionnalité qui 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 du serveur d'origine la prochaine fois que la page est demandée par un utilisateur. Nous avons décidé d'utiliser cette fonctionnalité pour expirer le cache de Cloudflare aussi souvent que les prix sont mis à jour sur le site Web, 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 c'est très confortable, mais d'un autre côté c'est un tueur de performance. Le bouton est très efficace et fait exactement ce qu'il dit : il supprime chaque élément 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 le cache en récupérant à nouveau toutes les ressources de la source. Cela prend du temps et réduit les performances pour l'utilisateur final.
Par conséquent, la meilleure option est d'utiliser le suppression personnalisée , si possible. Cette fonctionnalité n'invalide que des chemins spécifiques, au lieu d'invalider également tous vos éléments statiques et toutes les 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.