Séparation gratuite de la connexion WordPress et de la mise en cache des visiteurs : le tutoriel ultime pour la version gratuite de Cloudflare

Veux faireWordPressComment dissocier complètement la mise en cache dynamique des connexions de la mise en cache statique des visiteurs ? Ce tutoriel vous apprend à optimiser la mise en cache des cookies avec la version gratuite de Cloudflare, sans aucun frais, pour améliorer la vitesse de votre site web et l’expérience utilisateur. Un guide indispensable pour les webmasters !

Guide ultime sur la mise en cache gratuite des cookies avec Cloudflare : Réaliser une séparation dynamique entre les connexions et les visiteurs statiques sans aucun coût

99 % des propriétaires de sites WordPress utilisant la version gratuite de Cloudflare gaspillent plus de la moitié des performances de leur serveur.

J'ai vu trop de gens tomber dans deux extrêmes.

Soit vous ne mettez pas du tout le HTML en cache et vous récupérez les données depuis le serveur d'origine à chaque visite.

Vous pouvez aussi mettre en cache l'intégralité de la page HTML, ce qui entraîne des problèmes tels que des identifiants utilisateur incorrects, l'absence d'affichage des commentaires et l'échec des opérations backend.

Beaucoup de gens pensent que la distinction entre le cache et les cookies est une fonctionnalité exclusive aux abonnements payants.

En effet, Cloudflare indique officiellement que seuls les forfaits Business et Enterprise permettent de contourner la mise en cache HTML en présence de cookies.

L'abonnement Business commence à 200 dollars par mois, ce qui est totalement inutile pour les propriétaires de sites web individuels et les petits blogs.

Jusqu'en avril 2023, j'ai découvert une astuce technique que la plupart des gens négligeaient.

Cette technique est la première à démontrer pleinement comment obtenir exactement le même effet de mise en cache basé sur les cookies que le plan payant en utilisant les opérateurs pris en charge par la version gratuite.

J'ai utilisé cette méthode pour configurer plus d'une douzaine de sites web, et les résultats ont dépassé mes attentes.

La charge du processeur de mon serveur de blog personnel est passée d'une moyenne de 45 % à 12 %.

Le temps de chargement initial de la page a été réduit de 5 secondes.

La consommation mensuelle de bande passante des serveurs a diminué de 68 %.

Cependant, la mise en œuvre initiale présentait deux lacunes évidentes.

Il ne prend en charge qu'un seul domaine HTTPS et ne prend pas en charge les domaines génériques.

Cela ne tient pas compte du fait que de nombreux sites web utilisent encore des redirections HTTP ou prennent en charge à la fois HTTP et HTTPS.

J'ai effectué des optimisations complètes à partir de l'approche originale et j'ai résolu ces deux problèmes.

Je vais maintenant cibler *.etUfoVoici un guide complet sur la configuration d'un domaine générique comme .org qui prend en charge à la fois HTTP et HTTPS.

Pourquoi la version gratuite peut-elle offrir la même fonction de mise en cache par cookies que la version payante ?

Beaucoup de gens ignorent que la principale différence entre les versions gratuite et payante de Cloudflare ne réside pas dans la possibilité d'implémenter ou non une fonctionnalité donnée.

Tout réside dans la facilité avec laquelle on peut obtenir le même résultat.

La version payante offreMatchesLes opérateurs d'expressions régulières peuvent être utilisés pour identifier tous les cookies à contourner en une seule ligne d'expression régulière.

Cependant, la version gratuite ne prend pas en charge cet opérateur, et vous recevrez un message d'erreur « non autorisé : l'utilisation de l'opérateur Matches n'est pas autorisée » lors de son utilisation.

La documentation officielle de Cloudflare indique clairement que...MatchesLes opérateurs doivent disposer d'un plan Business ou d'un plan WAF Advanced pour utiliser ce plan.

C’est pourquoi la plupart des tutoriels en ligne vous indiquent que vous devez passer à un abonnement payant pour utiliser la mise en cache des cookies.

Mais après de nombreux tests et recherches, j'ai fait une découverte capitale.

Les cookies de connexion WordPress et WooCommerce ont tous deux un préfixe fixe.

Préfixe des cookies WordPress :

Nous n'avons pas besoin d'utiliser d'expressions régulières pour faire correspondre tous les cookies ; nous n'avons besoin d'utiliser que celles prises en charge par la version gratuite.containsL'opérateur vérifie si le cookie contient ces préfixes fixes.

Cette idée est très astucieuse.

Elle contournait les fonctionnalités exclusives de la version payante et obtenait exactement le même résultat en utilisant les opérateurs les plus basiques.

De plus, ses performances sont supérieures à celles de la correspondance par expression régulière carcontainsLa surcharge de calcul des opérateurs est bien moindre que celle de la correspondance par expression régulière.

Pour *.etUfoÉtapes complètes de configuration pour .org (applicables à HTTP et HTTPS)

L'ensemble du processus de configuration ne nécessite que la création de 3 règles de mise en cache.

L'ordre des règles est très important et doit être strictement respecté dans l'ordre que j'ai indiqué.

Si l'ordre est incorrect, toute la logique de mise en cache échouera.

Règle 1 : Contourner les chemins qui doivent être dynamiques (priorité maximale)

Cette règle a pour but de garantir que le backend, la page de prévisualisation, le centre utilisateur et la page de recherche ne soient jamais mis en cache.

Ces pages doivent récupérer leur contenu depuis le serveur d'origine en temps réel, sous peine de graves problèmes de fonctionnement.

Mon expression optimisée prend en charge tous les sous-domaines et les protocoles HTTP/HTTPS.

Vous n'avez pas besoin de créer des règles distinctes pour chaque sous-domaine.

Il n'est pas nécessaire de créer des règles distinctes pour HTTP et HTTPS.

L'expression est la suivante :

ends_with(http.host, ".etufo.org") and (starts_with(http.request.uri.path, "/wp-admin/") or http.request.uri contains "preview=true" or starts_with(http.request.uri.path, "/前台用户中心/") or starts_with(http.request.uri.path, "/?s="))

Sélectionnez « Contourner le cache » comme option d'opération.

Placez cette règle tout en haut de toutes les règles de mise en cache.

Règle 2 : Contourner les utilisateurs connectés et commentant (deuxième priorité)

Cette règle a pour but de permettre aux utilisateurs connectés et commentateurs d'accéder directement au contenu dynamique à la source.

Cela permet aux utilisateurs de consulter leurs informations personnelles et aux commentaires de s'afficher en temps réel.

La première implémentation utilisait la méthode suivante :starts_with(http.request.full_uri, "https://你的域名/").

Je l'ai changé enends_with(http.host, ".etufo.org").

Ce changement est au cœur de toute l'optimisation.

http.hostIl ne comprend que le nom de domaine, pas le protocole ni le chemin d'accès.

用ends_with匹配.etufo.orgIl s'adaptera automatiquementetufo.org,www.etufo.org,blog.etufo.orgTous les sous-domaines.

Il prend automatiquement en charge les protocoles HTTP et HTTPS sans nécessiter de configuration supplémentaire.

Expressions natives de WordPress :

ends_with(http.host, ".etufo.org") and (http.cookie contains "wordpress_sec_" or http.cookie contains "wordpress_logged_in" or http.cookie contains "comment_")

Si vous utilisez WooCommerceE-commerceLe plugin nécessite l'ajout du préfixe de cookie WooCommerce.

Expressions améliorées WooCommerce :

ends_with(http.host, ".etufo.org") and (http.cookie contains "wordpress_sec_" or http.cookie contains "wordpress_logged_in" or http.cookie contains "comment_" or http.cookie contains "woocommerce_")

L'opération doit également être configurée sur « Contourner le cache ».

Placez cette règle sous la règle 1.

Règle 3 : Mettre en cache le code HTML statique pour les visiteurs non connectés (priorité la plus basse)

Cette règle a pour but de permettre aux visiteurs non connectés de récupérer directement les pages HTML mises en cache depuis le CDN de Cloudflare.

Il s'agit de l'étape la plus cruciale pour améliorer la vitesse du site web et réduire la charge du serveur.

De même, j'ai utiliséends_with(http.host, ".etufo.org")Il a remplacé le format original protocole + nom de domaine.

La compatibilité automatique avec les domaines génériques et les protocoles doubles a été assurée.

Expressions natives de WordPress :

ends_with(http.host, ".etufo.org") and not http.cookie contains "wordpress_sec_" and not http.cookie contains "wordpress_logged_in" and not http.cookie contains "comment_"

Expressions améliorées WooCommerce :

ends_with(http.host, ".etufo.org") and not http.cookie contains "wordpress_sec_" and not http.cookie contains "wordpress_logged_in" and not http.cookie contains "comment_" and not http.cookie contains "woocommerce_"

Sélectionnez « Répond aux critères de cache » pour l'opération.

Nous vous recommandons d'activer les options suivantes :

Armure de dissimulation de cache.

Les contenus obsolètes ne sont pas fournis lors des mises à jour.

Placez cette règle tout en bas de toutes les règles de mise en cache.

Trois étapes de vérification doivent être effectuées après la configuration.

Après la configuration, ne fermez pas la page immédiatement.

Vous devez effectuer trois validations simples pour vous assurer que les règles fonctionnent correctement.

La première étape de vérification consiste à contrôler l'état du cache lorsque l'utilisateur n'est pas connecté.

Activez le mode navigation privée de votre navigateur.

Appuyez sur F12 pour ouvrir les outils de développement et accédez à l'onglet Réseau.

Visitez la page d'accueil de votre site web.

Vérifiez les en-têtes de réponse.cf-cache-statuschamp.

Si affichéHITCela indique que le cache a été atteint et que la règle fonctionne correctement.

La deuxième étape de vérification consiste à contrôler la mise en cache de l'état de connexion.

Connectez-vous à votre navigateur dans une fenêtre de navigateur classique.Moteur WordPress.

Appuyez sur F12 pour ouvrir les outils de développement.

Visitez la page d'accueil du site web.

Vérifiez les en-têtes de réponse.cf-cache-statuschamp.

Si affichéDYNAMICCela indique que l'utilisateur connecté a réussi à contourner le cache.

La troisième étape de vérification consiste à contrôler l'état de la mise en cache des utilisateurs qui commentent.

Postez un commentaire en utilisant un autre navigateur ou le mode navigation privée.

Actualisez la page.

Vérifiez les en-têtes de réponse.cf-cache-statuschamp.

Si affichéDYNAMICCela indique que l'utilisateur qui a commenté a également réussi à contourner le cache.

Si la validation échoue, vérifiez d'abord si l'ordre des règles est correct.

Vérifiez ensuite s'il existe d'autres règles de page ou règles de mise en cache qui entrent en conflit avec ces trois règles.

Lors de mes tests, j'ai constaté que les règles de page ont une priorité plus élevée que les règles de mise en cache et qu'elles remplacent les paramètres de ces dernières.

Questions fréquentes et optimisations avancées

Beaucoup de gens me demandent quelle doit être la durée de validité du cache.

Je recommande de configurer la durée d'expiration du cache des fichiers HTML sur le serveur d'origine à 1 heure.

Cela garantit à la fois la fraîcheur du contenu et l'utilisation optimale des avantages de mise en cache du CDN.

Si vous publiez un nouvel article ou mettez à jour une page, vous pouvez vider manuellement le cache de la page correspondante dans l'interface d'administration de Cloudflare.

Vous pouvez également installer le package d'installation officiel de Cloudflare.Plugin WordPressCela permet un effacement automatique du cache lors de la publication de contenu.

Certaines personnes se sont également demandées si cette méthode aurait un impact sur le site web.Le SEO.

Absolument pas.

Les robots des moteurs de recherche ne sont pas connectés et récupéreront les pages en cache, tout comme les visiteurs ordinaires.

Les pages mises en cache se chargent plus rapidement, ce qui peut améliorer le classement dans les moteurs de recherche.

D’après le rapport de Google sur les indicateurs web principaux, chaque seconde supplémentaire de vitesse de chargement des pages peut entraîner une augmentation de 7 % du taux de conversion.

Le gain de vitesse offert par cette configuration améliore non seulement l'expérience utilisateur, mais génère aussi directement plus de trafic et de revenus.

Conclusion

À l’ère du numérique, où la puissance de calcul est synonyme de coût et la vitesse de compétitivité, chaque optimisation des ressources serveur apporte une valeur ajoutée aux actifs numériques.

Nombreux sont ceux qui optent pour des services payants coûteux, mais qui négligent l'énorme potentiel que recèlent les outils gratuits.

Les fonctionnalités de la version gratuite de Cloudflare sont bien plus puissantes que la plupart des gens ne l'imaginent.

La meilleure solution technique n'est jamais la plus chère, mais celle qui correspond le mieux à vos besoins.

Pour 99 % des propriétaires de sites web individuels et des petites et moyennes entreprises, cette solution de mise en cache gratuite basée sur les cookies est largement suffisante pour répondre à leurs besoins.

Vous n'avez pas besoin de payer 200 $ par mois, et pourtant, vous bénéficiez d'une amélioration des performances presque identique à celle d'un abonnement payant.

L'essence de la technologie est de résoudre des problèmes, et non d'accumuler des outils coûteux.

Nous saisissons véritablement l'essence de la technologie lorsque nous apprenons à construire des systèmes efficaces en utilisant les composants les plus basiques.

Si vous utilisez la version gratuite de Cloudflare et que votre site web est basé sur WordPress, je vous recommande vivement de suivre ce tutoriel pour la configurer.

Vous constaterez que la vitesse de votre site web connaîtra un bond qualitatif et que la charge du serveur diminuera considérablement.

Il s'agit d'une opération d'optimisation qui prend 5 minutes à mettre en œuvre et vous apporte des bénéfices pendant toute une année.

Ne laissez pas les ressources gratuites se perdre ; agissez pour optimiser la vitesse de votre site web.