Gérer un site internet, c’est souvent jongler entre deux priorités vitales : avoir un site rapide et garder vos visiteurs en sécurité.
La plupart des gens pensent qu’il faut sortir le chéquier et investir dans des solutions premium pour y arriver. Mais ce que nous avons découvert, c’est que même le plan gratuit de Cloudflare peut métamorphoser un site.
Chez Blaaaz, nous avons branché un site WordPress en production sur Cloudflare pendant 3 mois. Les résultats parlent d’eux-mêmes :
- 🚀 Des pages plus rapides, peu importe le pays du visiteur
- 💪 Un serveur qui tient la charge même en pic de trafic
- 📊 Une conformité RGPD propre et transparente
- 🤖 Une meilleure expérience utilisateur grâce à Turnstile (adieu les captchas agaçants)
Bref, Cloudflare gratuit, c’est un peu comme passer d’une Clio à une Tesla sans payer le surcoût.
Table des matières
- Introduction
- 1. Création du compte et intégration du domaine
- 2. Tableau de bord
- 3. DNS : proxifier intelligemment
- 4. SSL/TLS : Complet (strict)
- 5. Speed : activer ce qui améliore vraiment
- 6. Cache : stratégie équilibrée
- 7. Cache Rules
- 8. Tiered Cache
- 9. Règles et en-têtes de sécurité
- 10. Turnstile
- 11. Zaraz
- 12. Consentement RGPD
- 13. Customiser le bandeau de consentement
- Conclusion
1. Création du compte et intégration du domaine
Première étape : créez un compte gratuit sur Cloudflare.
Ajoutez ensuite votre domaine et laissez Cloudflare scanner vos enregistrements DNS. Enfin, remplacez vos nameservers chez votre registrar.
Pourquoi c’est indispensable de déléguer le DNS à Cloudflare ?
- Votre site bénéficie d’une protection DDoS intégrée
- Vos contenus passent par un CDN mondial
- Vous gérez tout depuis une console unique et ergonomique
👉 Astuce : la propagation DNS prend de quelques minutes à 24h. Pour vérifier l’avancée, utilisez whatsmydns.net.
2. Tableau de bord : apprendre à lire les bons chiffres
Le dashboard Cloudflare est riche en infos, mais trois indicateurs suffisent pour piloter votre optimisation :
- Le Cache Hit Ratio (le pourcentage de contenu servi directement depuis le cache)
- Les requêtes totales vs celles servies par Cloudflare
- La bande passante économisée
Notre retour d’expérience : au départ, notre cache ratio plafonnait à 30 %. Après quelques ajustements de règles, nous sommes passés à 60 % → un site plus rapide et un serveur plus léger.
👉 Astuce : Si vous voyez un pourcentage trop bas, direction les Cache Rules (chapitre 7).
3. DNS : proxifier intelligemment
Chaque enregistrement DNS peut être configuré en deux modes :
- ☁️ Proxied (nuage orange) → le trafic passe par Cloudflare : protégé, optimisé, mis en cache
- ☁️ DNS Only (nuage gris) → simple résolution DNS, sans protection ni optimisation
Notre configuration gagnante :
- Les entrées web (racine @, www, sous-domaines publics) → Proxied
- Les enregistrements liés aux mails (MX, SPF, DKIM, DMARC, autodiscover) → DNS Only
⚠️ Important : ne proxifiez jamais vos MX, sinon vos emails se perdront dans le néant.
4. SSL/TLS : le mode complet (strict), pas d’alternative
La sécurité passe par un choix simple : toujours opter pour Complet (strict).
- ❌ Flexible : chiffre seulement visiteur → Cloudflare (dangereux)
- ⚠️ Complet : accepte des certificats auto-signés (pas assez sûr)
- ✅ Complet (strict) : exige un certificat valide côté serveur = sécurité totale de bout en bout
👉 Astuce : installez un certificat Let’s Encrypt ou utilisez le certificat d’origine Cloudflare pour activer ce mode.
5. Speed : activer ce qui améliore vraiment
Voici les options que nous avons activées (et testées en production) :
- HTTP/2 et HTTP/3 (QUIC) → meilleure parallélisation des requêtes
- 0-RTT → latence réduite pour les visiteurs réguliers
- TLS 1.3 → plus rapide et plus sûr
- Toujours utiliser HTTPS → fini les redirections inutiles
- Early Hints (103) → précharge des ressources critiques
- Cloudflare Fonts → polices servies plus vite, sans appels externes lents
- Speed Brain (beta) → à tester, prometteur
- Rocket Loader → accélère le JS (à valider selon votre stack)
⚠️ Note : Rocket Loader peut casser certains scripts. Désactivez-le sur le back-office :
Expression :
starts_with(http.request.uri.path, "/wp-admin/")
or http.request.uri.path eq "/wp-login.php"
Action :
Rocket Loader → Off
6. Cache : stratégie équilibrée
Nos réglages après tests :
- Niveau de cache : Normal
- Browser Cache TTL : 4 h
- Crawler Hints : activé
- Always Online : activé
👉 Astuce : Pour un site très statique, n’hésitez pas à pousser le TTL navigateur à 1 jour (ou plus) → moins de rechargements inutiles.
7. Cache Rules : cibler pour éviter les erreurs
Le cache, c’est puissant… mais mal configuré, il peut créer des bugs (connexion impossible, contenu obsolète). La solution : les Cache Rules.
Deux règles essentielles :
- Bypass cache sur les zones dynamiques (back-office, login, API)
- Cache agressif sur le contenu statique (images, CSS, JS, polices…)
Exemple – Bypass BO :
Expression :
starts_with(http.request.uri.path, "/wp-admin/")
or http.request.uri.path eq "/wp-login.php"
or starts_with(http.request.uri.path, "/api/")
Action :
Cache → Bypass
Exemple – Cache agressif :
Expression :
starts_with(http.request.uri.path, "/wp-content/uploads/")
or ends_with(http.request.uri.path, ".css")
or ends_with(http.request.uri.path, ".js")
or ends_with(http.request.uri.path, ".woff2")
or ends_with(http.request.uri.path, ".jpg")
or ends_with(http.request.uri.path, ".png")
or ends_with(http.request.uri.path, ".webp")
or ends_with(http.request.uri.path, ".svg")
Action :
Cache TTL Edge → 7 à 30 jours
👉 Résultat : un back-office fluide, et un site public qui charge comme une fusée 🚀.
8. Tiered Cache : plus d’efficacité à l’international
Si vous avez des visiteurs hors de votre pays, activez la Tiered Cache : Cloudflare crée une hiérarchie intelligente des caches.
- Le nœud proche de votre serveur devient le “maître”.
- Les autres PoP récupèrent d’abord auprès de ce nœud, pas chez vous.
Résultat : moins de requêtes vers votre serveur, plus de rapidité pour les visiteurs lointains. Chez nous, +25 % de vitesse pour les connexions US/Asie 🌍.
9. Règles et en-têtes de sécurité
La sécurité, ce n’est pas que le SSL : ce sont aussi les headers que vous envoyez.
Ce que nous avons ajouté :
referrer-policy = strict-origin-when-cross-origin
(plus strict que la valeur par défaut)- Suppression du header
X-Powered-By - Ajout d’en-têtes anti-XSS
Exemple – forcer referrer-policy :
Header : referrer-policy
Value : strict-origin-when-cross-origin
Ces petits réglages prennent 2 minutes et renforcent sérieusement votre bouclier 🔒.
10. Turnstile : adieu les CAPTCHA lourds
Finies les épreuves frustrantes du type “cliquez sur tous les feux rouges”. Turnstile est léger et souvent invisible.
- Invisible pour la majorité des visiteurs humains
- Bloque efficacement bots et spams
- Gratuit et natif Cloudflare
Exemple d’intégration :
<form action="/contact" method="post">
<input type="text" name="name" placeholder="Nom" required>
<div class="cf-turnstile" data-sitekey="VOTRE_SITE_KEY"></div>
<button type="submit">Envoyer</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
Depuis l’activation, nos formulaires ne sont plus pollués, et les utilisateurs n’ont… rien remarqué.
11. Zaraz : une alternative légère à Google Tag Manager
GTM est puissant… mais alourdit vos pages. Avec Zaraz, l’exécution se fait côté edge/serveur.
Avantages constatés :
- Pages plus rapides (moins de JS côté client)
- Centralisation (GA4, Ads, LinkedIn, Hotjar…)
- Intégration native avec la bannière de consentement
Exclure le back-office WordPress :
Dans Zaraz → Triggers → New Trigger → Matching rule
Variable : uri.path
Opérateur : ne contient pas
Valeur : /wp-admin/
+ ajoutez : uri.path ne contient pas /wp-login.php
Exemple – GA4 via Zaraz :
Tool : Google Analytics 4
Measure. : G-XXXXXXXXXX
Option : Send a page_view automatically → ON
Trigger : All pages (sauf BO)
Chez nous, le passage GTM → Zaraz a fait gagner ~0,5 s de chargement sur certaines pages.
12. Consentement RGPD : conforme et utile
Avec Cloudflare Zaraz, vous pouvez activer le Consent Mode v2 pour contrôler finement les balises Google (GA4, Ads) en fonction du choix utilisateur.
- Par défaut : Zaraz bloque tous les cookies Analytics/Ads → conformité RGPD assurée ✅
- Après interaction : les balises sont bloquées ou déclenchées selon le consentement (Statistiques / Publicité)
1. Définir l’état par défaut (tout refusé)
Dans Zaraz → Settings → Confidentialité, activez :
« Définir l’état de Google Consent Mode v2 par défaut comme refusé ».
Cela suffit pour être conforme : au premier chargement, Google reçoit déjà un signal denied partout, sans aucune ligne de code supplémentaire.
2. Mettre à jour après interaction (optionnel mais recommandé)
Par défaut, Zaraz applique bien les règles de consentement côté blocage/autorisation des balises.
Mais Google Ads et GA4 ne voient pas les changements de statut : dans les diagnostics, les signaux restent “inactifs”.
Pour bénéficier des fonctionnalités avancées (modélisation de conversions, remarketing, audiences Google), il est recommandé d’ajouter un script qui pousse explicitement les choix vers Google.
Exemple de script :
<script>
(function () {
function toStatus(v) {
return (v === true || v === 'true' || v === 'granted') ? 'granted' : 'denied';
}
function pushGoogleConsent(p) {
if (!p) return;
var update = {};
if (typeof p.sNml !== 'undefined') {
update.analytics_storage = toStatus(p.sNml);
}
if (typeof p.XSpQ !== 'undefined') {
var v = toStatus(p.XSpQ);
update.ad_storage = v;
update.ad_user_data = v;
update.ad_personalization = v;
}
if (Object.keys(update).length) {
zaraz.set('google_consent', update);
}
}
function onReady() {
try { pushGoogleConsent(zaraz.consent.getAll()); } catch(e){}
document.addEventListener('zarazConsentChoicesUpdated', function () {
try { pushGoogleConsent(zaraz.consent.getAll()); } catch(e){}
});
}
if (window.zaraz?.consent?.APIReady) {
onReady();
} else {
document.addEventListener('zarazConsentAPIReady', onReady, { once: true });
}
})();
</script>
Où placer ce script ?
- Option 1 : dans le <head> du site (functions.php ou plugin WordPress type Code Snippets)
- Option 2 : en Custom Tool → Inline Script dans Zaraz, déclenché sur Pageview (All Pages)
Pourquoi l’ajouter ?
- Sans script : RGPD conforme ✅, mais Google ne voit que l’état initial “denied” → pas de signaux actifs, donc pas de modélisation ni remarketing.
- Avec script : les choix utilisateurs sont transmis à Google → les signaux de consentement apparaissent comme “actifs” dans GA4/Ads, et vous récupérez toutes les fonctionnalités avancées.
3. Vérification
- Dans GA4 → Admin → Flux de données → Diagnostic du consentement
- Au chargement : tout doit être denied
- Après acceptation “Statistiques” : seul analytics_storage passe à granted
- Après acceptation “Publicité” : ad_storage, ad_user_data et ad_personalization passent à granted
13. Customiser le bandeau de consentement
Un bandeau de consentement ne doit pas casser votre design. Cloudflare permet de le customiser en CSS (sans plugin).
Exemple de personnalisation :
/* Conteneur principal */
.cf_modal_container {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100vw;
overflow: hidden !important;
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Fenêtre modale */
.cf_modal {
font-family: 'Plus Jakarta Sans', sans-serif !important;
background-color: #ffffff !important;
color: #003437 !important;
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
width: 90vw;
max-width: 600px;
max-height: 95dvh;
overflow: hidden !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Titre */
#cf_modal_title {
color: #003437 !important;
font-weight: 600;
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* Texte introductif */
.cf_consent-intro {
font-size: 1rem;
color: #003437;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.cf_consent-intro a {
color: #003437 !important;
text-decoration: underline !important;
}
/* Section d’options */
.cf_consent-element h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.cf_consent-element p {
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
/* Boutons */
.cf_consent-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 16px;
background-color: #f5f5f5;
box-sizing: border-box;
margin-top: 16px;
}
/* Style global des boutons */
.cf_button {
font-family: 'Plus Jakarta Sans', sans-serif;
border: none;
border-radius: 200px;
padding: 0 24px;
height: 44px;
line-height: 44px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Boutons spécifiques */
#cf_consent-buttons__accept-all {
background-color: #deb82f;
color: #003437;
}
#cf_consent-buttons__reject-all,
#cf_consent-buttons__save {
background-color: #003437;
color: #ffffff;
}
/* Focus accessibilité */
.cf_button:focus-visible {
outline: 2px solid #deb82f;
outline-offset: 2px;
}
/* Supprimer scrollbar visible */
.cf_modal::-webkit-scrollbar,
.cf_modal_container::-webkit-scrollbar {
display: none;
}
.cf_modal,
.cf_modal_container {
-ms-overflow-style: none;
scrollbar-width: none;
}
Chez nous, un bandeau adapté à la charte a transformé un “gadget juridique” en élément intégré, rassurant et pro.
Conclusion
Après 3 mois d’utilisation intensive, notre constat est clair :
- ⚡ Vitesse : CDN, HTTP/3, Early Hints, Zaraz → un site qui réagit au quart de tour
- 🔒 Sécurité : SSL strict, headers renforcés, Turnstile → un site blindé
- 📊 Conformité : Consent Mode v2, bannière custom → RGPD propre et transparent
👉 Conseil Blaaaz : n’activez pas tout d’un coup. Testez option par option, mesurez avec Lighthouse, Web Vitals et Tag Assistant, et ne gardez que ce qui améliore réellement votre site.
Au final, un site optimisé, ce n’est pas celui qui coche toutes les cases… C’est celui qui est rapide, fiable et agréable pour vos visiteurs.
