Un menu de navigation qui ne réagit plus au clic, une accordéon qui reste figée, un bouton « voir plus » muet : ces symptômes apparaissent souvent le jour même où Rocket Loader est activé sur un site qui utilise déjà Autoptimize pour différer son JavaScript. Les deux outils partagent la même intention — retarder le chargement des scripts non essentiels pour améliorer les métriques de performance — mais ils l’appliquent chacun à leur manière, et cette manière se contredit.
Ce qu’on observe
Autoptimize, configuré pour agréger et différer le JavaScript, réécrit les balises <script> du site en modifiant leur attribut type pour retarder leur exécution jusqu’à l’interaction ou jusqu’au chargement complet de la page. Rocket Loader, fonctionnalité de Cloudflare, applique exactement la même logique côté CDN, en réécrivant à la volée les balises <script> qui transitent par son réseau, sans savoir qu’Autoptimize les a déjà modifiées.
Le résultat : certains scripts se retrouvent doublement réécrits, ou dans un ordre d’exécution différent de celui prévu par le développeur du thème ou de l’extension. Un script qui attend qu’un élément du DOM soit disponible s’exécute parfois avant que cet élément n’existe, faute d’attendre le bon événement.
Pourquoi c’est un problème
Le problème ne vient d’aucun des deux outils pris isolément : chacun fonctionne correctement seul. C’est leur superposition qui casse le comportement attendu, car ils opèrent à deux niveaux différents de la chaîne (serveur d’origine pour Autoptimize, périphérie du réseau pour Rocket Loader) sans mécanisme de coordination entre eux.
- Autoptimize modifie le HTML avant qu’il ne quitte le serveur d’origine
- Rocket Loader réécrit à nouveau ce même HTML au niveau du CDN, en périphérie
- Le navigateur reçoit un script transformé deux fois, parfois dans un état incohérent
Identifier laquelle désactiver
La méthode la plus fiable consiste à désactiver Rocket Loader temporairement (case à cocher dans l’onglet Speed du tableau de bord Cloudflare) et à observer si le menu redevient fonctionnel. Si oui, la coexistence des deux outils est bien en cause, et non un conflit avec un thème ou une autre extension.
Quoi faire
La règle à retenir : ne jamais laisser deux outils réordonner le même JavaScript à deux niveaux différents de la chaîne de livraison. Il faut choisir lequel des deux prend en charge le différé de script, et désactiver l’autre sur cette responsabilité précise.
- Désactiver l’option de différé JavaScript dans Autoptimize si Rocket Loader reste actif au niveau Cloudflare
- Ou, à l’inverse, désactiver Rocket Loader et laisser Autoptimize gérer seul le différé, ce qui offre plus de contrôle fin par script
- Ne jamais activer les deux niveaux d’optimisation JS en même temps, même « pour tester »
- Documenter le choix retenu dans les notes techniques du site, pour éviter qu’une prochaine intervention ne réactive l’autre par réflexe
Sur nos projets, la règle qui évite ce genre d’incident est simple : un seul outil est responsable du différé JavaScript, jamais deux, quel que soit le niveau de la chaîne où ils opèrent.
D’autres doublons du même type
Ce type de conflit ne se limite pas à ce couple d’outils précis : la même logique s’applique à la minification CSS lorsqu’elle est activée à la fois côté extension WordPress et côté CDN, ou à la compression d’images lorsqu’un plugin et un service de périphérie tentent chacun de leur côté de reconvertir les mêmes fichiers. Le principe de diagnostic reste identique : désactiver un outil à la fois pour isoler lequel des deux introduit réellement la régression observée.
- Compression d’images côté extension et côté CDN activées simultanément
- Minification CSS appliquée deux fois, parfois avec des règles de purge de classes contradictoires
- Mise en cache de page gérée à la fois par une extension et par un module serveur, avec des durées de validité différentes
En résumé
Ce doublon d’optimisation JavaScript illustre un antipattern plus général : empiler des outils de performance sans vérifier qu’ils n’interviennent pas sur la même couche. Le correctif ne demande aucune ligne de code, seulement une décision claire sur qui, d’Autoptimize ou de Rocket Loader, gère le différé — et la discipline de ne jamais revenir en arrière sur ce choix sans le documenter, y compris lors d’une future intervention par une autre personne de l’équipe.
