Une capture d’écran envoyée par un visiteur, popup grande ouverte au chargement de la page d’accueil, alors qu’elle ne devait s’afficher qu’après quinze secondes de navigation. C’est ce signal, remonté deux jours après l’activation de Cloudflare APO (Automatic Platform Optimization) sur un site utilisant plusieurs popups Elementor Pro, qui a déclenché l’investigation décrite ici.
APO met en cache la page HTML complète, y compris son état au moment de la génération côté serveur, directement au niveau du edge Cloudflare, ce qui inclut par défaut le markup des popups Elementor Pro tel qu’il existait lors de la première requête ayant rempli le cache.
Symptôme observé
Sur ce projet, une popup de bienvenue avec inscription à la newsletter était configurée pour s’ouvrir après un délai de quinze secondes ou au déclenchement d’une intention de sortie. Après activation d’APO, un visiteur sur trois signalait la voir apparue immédiatement, parfois déjà fermée, parfois bloquée en position ouverte quelle que soit l’action effectuée sur la page.
Le comportement erratique tenait à ce que différents visiteurs recevaient une version de page HTML mise en cache à des instants différents du cycle de vie JavaScript de la popup : APO capturait la page côté edge avant que le script d’Elementor Pro n’ait fini d’initialiser l’état masqué de la popup pour ce visiteur précis.
Diagnostic pas à pas
Étape 1 : confirmer que le HTML est bien mis en cache
Une inspection des en-têtes de réponse HTTP, via l’onglet réseau du navigateur, a confirmé la présence de l’en-tête cf-cache-status: HIT sur les pages concernées, preuve qu’APO servait bien une version statique du HTML généré côté serveur.
Étape 2 : identifier le rôle du cookie de fermeture
Elementor Pro utilise un mécanisme côté client (généralement du localStorage ou un cookie selon la configuration du déclencheur) pour se souvenir qu’une popup a déjà été fermée par un visiteur. Le problème ne venait donc pas du cookie lui-même, correctement géré côté client, mais du markup HTML figé qui affichait la popup dans un état visuel incohérent avant même que le script de gestion d’état n’ait eu le temps de s’exécuter sur une page servie depuis le cache edge.
Étape 3 : reproduire en navigation privée
En vidant le cache local et en testant depuis plusieurs localisations géographiques différentes (donc plusieurs nœuds edge Cloudflare), certains renvoyaient une version de page capturée pendant une phase de test où la popup avait été temporairement forcée en affichage permanent depuis l’éditeur, ce qui confirmait que le cache HTML avait figé un état transitoire.
Le correctif appliqué
La solution ne consiste pas à désactiver APO, dont les gains de performance restent réels sur ce projet, mais à exclure du cache de page les URL contenant certains paramètres liés à l’aperçu Elementor, et surtout à forcer une purge systématique du cache APO à chaque publication ou modification d’un template contenant une popup.
# Règle de cache Cloudflare (Page Rule) ciblée
URL : exemple.fr/*
Paramètre à exclure du cache : elementor-preview
Cache Level : Bypass sur ce paramètre uniquement
# Purge automatique après modification d'un template popup
wp cache flush
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
-H "Authorization: Bearer TOKEN" \
-H "Content-Type: application/json" \
--data '{"purge_everything":false,"files":["https://exemple.fr/"]}'
Prévention pour la suite
- Purger systématiquement le cache APO après toute modification d’un Popup Elementor Pro
- Exclure les paramètres d’aperçu Elementor du cache edge
- Tester l’ouverture d’une popup en navigation privée après chaque déploiement de template
Ce correctif ne couvre volontairement pas l’optimisation d’images Cloudflare ni le réglage du cache serveur WordPress classique (objet, page), deux sujets traités séparément dans l’infrastructure de ce site.
Un cache de page à l’échelle du edge ne connaît rien de l’état JavaScript d’un visiteur : toute logique d’affichage conditionnelle mérite d’être testée explicitement une fois ce cache activé.
En résumé
Une popup Elementor Pro figée en position ouverte après activation d’APO n’est pas un bug d’Elementor : c’est la conséquence attendue d’un cache HTML complet qui capture un état transitoire. La correction passe par une exclusion ciblée et une discipline de purge, pas par un abandon des gains de performance qu’APO apporte par ailleurs.
