Comment forcer Cloudflare à mettre en cache vos pages HTML

http://korben.info/comment-forcer-cloudflare-a-mettre-en-cache-vos-pages-html.html
Peu de gens le savent, mais par défaut Cloudflare met en cache uniquement les fichiers images, CSS et JavaScript. Ne comptez donc pas dessus pour mettre vos pages HTML en cache… Ça explique aussi pourquoi lorsque votre site est en carafe, vous voyez quelque chose comme ça : Et pas votre site mis en cache.…

Petite amélioration des règles dans le cas où votre site est en HTTPS (flexible ou full) : https://imgur.com/W8OPhdC

Désolé pour l’image mais on est limité à 2 liens et vu que mon exemple en est bourré…

Edit: j’ai fait comme j’avais besoin dans mon cas (site Bootstrap avec redirection des fichiers .html virée des URLs).

Petite question de profane : est-ce que d’un point de vue technique, ça ne va pas impliquer que le serveur utilisé sera vu comme un serveur Cloudfare, donc américain, si je ne m’abuse ? Ce qui, d’un point de vue SEO et Google, serait un signal un peu moins positif pour un site .fr et/ou en français que s’il était hébergé en France (même si on a bien localisé le site en tant que français dans Google Webmaster Tools) ?
Si oui, cela signifierait qu’il faudrait choisir entre la vitesse d’affichage et la localisation du serveur, 2 des nombreux facteurs SEO. A moins qu’un acteur français concurrent de Cloudfare ne voit le jour, ou que Cloudfare ait des serveurs en France.

Salut Paul,

La location du serveur n’a aucune incidence sur le SEO. Ce qui importe, c’est que l’optimisation soit faite grâce à la langue du site, hreflang tags, etc. Tu n’as aucun soucis à te faire pour ça.

Si tu utilises CloudFlare, active le SSL Flexible et ajoute les règles comme je l’ai montré sur le screenshot. Cela donnera un petit avantage par rapport à un site équivanlent non sécurisé.

Si tu as d’autres questions, n’hésite pas !

Mais comment se fait il que CloudFare existe, c’est bien un service gratuit?

Quelle sorte d’information peut il recevoir sur les utilisateurs qui visitent le site web? ont ils autant d’information que le site en question? dans ce cas on pourrait peut-être porter sur l’hypothèse que le gouvernement de U.S subventionnent ce service. C’est une des raison que je n’ai jamais intégré CloudFare dans mes site web et aucun CDN. Bon enfin si quelqu’un a des information se serait intéressant.

@Yenko Je comprends pas. Il y a bien un service gratuit qui est “plus” limité dans les services offerts (évidemment) et en cas de problème, n’ont pas la même priorité que les comptes PRO ou Business dans la vitesse de résolution ou du retour du service.

A propos du gouvernement US, tu sais, ça change plus grand chose. D’ailleurs, tous les gouvernements ont des programmes similaires à ceux des Américains. Si tu cherches un service à CloudFlare qui est prouvé mille fois plus sécurisé, vas voir du côté de Incapsula.com A partir du moment où tu mets un truc en ligne… (quoique, pas seulement xD). Bref, c’est ridicule.

C’est juste dommage de ne pas profiter du service gratuit quand c’est possible.

Excellente ton astuce pour https ! merci

Merci Grand Chef. J’ai tripoté un bon moment avant de trouver la bonne configuration. Autant partager les astuces :slight_smile:

Pour les autres, si vous avez des questions, n’hésitez pas à les poser ici :slight_smile:

Top l’info merci !

Superbe astuce Korben, merci !

@Yoav, j’en profite pour te demander : le cache de Cloudflare combiné à WP Touch Pro pose problème pour mon site. En effet, il propose du coup la version desktop par moment sur le mobile et inversement.

Aurais-tu par hasard une idée pour empêcher ça ? :slight_smile:

Salut @JeromeTavernier !

J’ai eu le même soucis avec la version gratuite : WPtouch Mobile Plugin. La vérité, c’est que CloudFlare n’avait rien à voir avec !

Vérifie que :

  1. Charger WPtouch pour : Toutes les URL de mon site

  2. Sauvegarde le fichier htaccess de côté et supprime le de ton serveur. Vide le cache présent dans CloudFlare et dans ton browser, et renvoie le fichier htaccess.

  3. Installe le plugin suivant : CloudFlare

  4. Dans mon htaccess pour Wordpress, j’ai ajouté cette ligne après celles de WP. Attention, elle est faite pour mon VPS et, surtout, elle redirige en HTTPS :

    RewriteEngine On
    RewriteCond %{HTTP:X-Forwarded-Proto} =http
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

A la limite, tu peux switcher le development mode de CloudFlare, comme ça, du coup il bypass les accélérations et le cache.

Fais une sauvegarde avant.

Tiens-moi au courant !

Hello @Yoav,

Merci beaucoup !! J’ai fait ce que tu m’as conseillé et tout m’a l’air de fonctionner comme sur des roulettes !

Je n’ai pas fait de modif particulière pour le htaccess excepté laisser “RewriteEngine On” n’y connaissant pas plus que ça en commandes serveur. Cela te semble bon ?

En tout cas, en espérant que ça dure !

Super :smile:

Je n’ai pas fait de modif particulière pour le htaccess excepté laisser “RewriteEngine On” n’y connaissant pas plus que ça en commandes serveur. Cela te semble bon ?
Oui si tu restes en HTTP, non si tu as HTTPS.

Dans le cas où tu as le SSL d’activé, tu dois prendre en compte plusieurs choses supplémentaires. Si non, tu dois avoir le plugin du même nom d’installé.

Je pourrais écrire un tuto rapide les plugins que j’utilise et qui sont recommandés pour optimiser Cloudflare et Wordpress.

@Yoav Ah bah écoute si tu es chaud pour un petit tuto je ne cracherais pas dessus !

Par contre le problème de WP Touch et Cloudflare qui était parti est … revenu … donc si tu as une solution alternative je suis preneur ^^

En tout cas merci encore pour ton aide !

@JeromeTavernier Ah zut :frowning: Dans mon cas, le soucis n’est jamais réapparu. Peut-être qu’il faut désactiver/réactiver le plugin ? Je ne sais pas :confused:

Pour le tuto, voici les plugins que j’utilise pour faire marcher WordPress et Cloudflare avec SSL :

Sauvegardez la totale : fichiers et base de données.

  1. Dans le panel de Cloudflare, il faut assurer que le certificat est activé (flexible) dans la plupart des cas.
  2. Installez les plugin de Cloudflare officiel pour WordPress.
    3) Sauvegardez la totale : fichiers et base de données. Faites vos tests avec une installation identique mais différente de votre site.
  3. Une fois la sauvegarde effectuée, vérifiez que toutes les ressources présentes dans ton thème sont SSL friendly : par exemple, change tous les “http://” par “//” (sans les guillemets). Je vous recommande de lire l’article suivant : https://blog.cloudflare.com/flexible-ssl-wordpress-fixing-mixed-content-errors/
  4. Installez les plugins suivants : CloudFlare Flexible SSL, Sunny (Connecting CloudFlare and WordPress) et SSL Insecure Content Fixer. Je ne rentre pas dans les détails ni n’explique l’utilité de chaque plugin car il suffit de cliquer sur les liens pour en apprendre plus.
  5. Naviguez sur votre site avec : https://domaine.fr Soyez certain qu’aucunes ressources ne se retrouvent bloquées, etc. Testez chaque pages, formulaires,etc.
  6. Une fois certain, procédez aux modifications sur votre site en production. Dans les “Réglages généraux”, ne touchez pas aux permaliens de WordPress !
  7. Comme cité dans mon message précédent, il faut ajouter les règles de Cloudflare pour forcer l’accès des fichiers statiques en SSL seulement (très important pour le SEO) : https://imgur.com/W8OPhdC. Ignorez la règle n°3 comme vue dans le screenshot, seules les deux premières sont importantes.

Disclaimer: le ou les administrateurs du site et moi-même ne pourront pas être tenus comme responsables en cas de casse.

Si vous utilisez cette méthode de cache et que vous avez un CMS vous avez intérêt à déporter ou utiliser un système de commentaire externe, sinon les commentaires eux aussi seront mis en cache…