22 décembre 2021

Cache HTML CDN CloudFlare ?

Voyons ensemble quelques limitations et fonctionnalités de CloudFlare

Cache HTML CloudFlare

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 ?

  1. 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.
  2. 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.

  1. 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.
  2. 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.
  3. Cliquez sur l'onglet sommier dans la fen√™tre d'inspection, puis s√©lectionnez l'actif du site Web dans le panneau de gauche.
  4. 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 cf-ray , 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).
  5. 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.
  6. 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.
  7. 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.

  1. 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. éviter.

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 :

  1. Une fa√ßon de dire √† Cloudflare quoi mettre en cache. Pour la plupart des configurations, cela se fait en activantcache everythingen combinaison avecbypass on cookieune r√®gle de page qui correspond √† chaque page de votre site.
  2. 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 bypassstandard.
  3. 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.

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_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) :

WooCommerce Cloud Flare

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

Nettoyer le cache CloudFlare

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.

Vous avez des doutes ? Vous ne savez pas par o√Ļ commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos syst√®mes sans avoir √† migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Remonter en haut