Quand LiteSpeed ​​Cache et WP Rocket entrent en collision : à l'intérieur du bug étrange qui a cassé mon menu mobile et comment je l'ai résolu

Si vous avez déjà expérimenté des plugins de mise en cache WordPress avancés, vous savez qu'ils peuvent soit faire monter en flèche la vitesse de votre site, soit le plonger dans le chaos. Pour un utilisateur sans méfiance, la collision entre LiteSpeed ​​Cache et WP Rocket a entraîné un problème bizarre où le menu mobile du site a tout simplement cessé de fonctionner. Ce qui a suivi a été un voyage frustrant mais éducatif à travers les couches de cache, les reports JavaScript et les bizarreries des plugins. Voici comment le problème s’est déroulé et comment il a finalement été résolu.

TL;DR (trop long, je n'ai pas lu)

Lorsque LiteSpeed ​​Cache et WP Rocket étaient actifs sur le site WordPress, le menu mobile a cessé de fonctionner en raison de fonctionnalités d'optimisation qui se chevauchent affectant les fichiers JavaScript. En désactivant des fonctionnalités spécifiques et en choisissant un plugin de mise en cache plutôt qu'un autre, le problème a été résolu. Le coupable était une combinaison de chargement JS différé et de règles de cache dupliquées en conflit avec le script de menu du thème. Restez fidèle à un seul optimiseur, auditez soigneusement les exclusions et videz toujours le cache pendant les tests.

La mystérieuse disparition du menu mobile

Le site fonctionnait correctement depuis des mois, grâce aux fonctionnalités d'optimisation robustes de WP Rocket. Tout, de la minification au chargement paresseux, était étroitement configuré. Puis vint une nouvelle expérience : passer à LiteSpeed ​​Cache pour tirer parti des améliorations au niveau du serveur offertes par LiteSpeed ​​Web Server. Au début, cela semblait être une bonne décision, jusqu'à ce qu'un matin, le menu du mobile ne s'ouvre plus.

Le problème n'était pas immédiatement évident. Le site avait l'air bien sur un ordinateur de bureau, mais plusieurs utilisateurs ont commencé à signaler que l' icône du menu mobile ne faisait rien lorsqu'on cliquait dessus . Pas de liste déroulante, pas d'animation, juste… rien. Une vérification rapide sur les téléphones portables a confirmé le problème.

Enquêter sur le problème

Le site utilisait un thème personnalisé conçu dans un souci de réactivité et le JavaScript responsable du menu mobile chargé en bas de la page. Le suspect initial était le thème. Peut-être qu'une mise à jour récente a cassé le script ? Mais la vérification de la console n'a montré aucune erreur. De plus, le menu fonctionnait lorsque tous les caches étaient désactivés en mode navigation privée ou lorsque vous étiez connecté en tant qu'administrateur. Cela l'a encore réduit.

L'inspection du navigateur a révélé que les fichiers JavaScript étaient réduits et différés à la fois par LiteSpeed ​​Cache et WP Rocket. Essentiellement, les deux plugins se disputaient les mêmes ressources. Le script du menu mobile, essentiel à l'interactivité du frontend, était différé ou mal combiné . Le résultat ? Il s'est chargé trop tard, voire pas du tout.

Couche par couche : identifier le coupable

Voici un aperçu de ce qui s'est passé ensuite :

• Tout d’abord, tout le cache a été effacé de LiteSpeed, WP Rocket et du navigateur.
• Le menu fonctionnait bien lorsque l'optimisation JS était désactivée sur les deux plugins.
• La réactivation de l'optimisation JS uniquement dans WP Rocket a ramené le problème.
• L'activation de l'optimisation dans LiteSpeed ​​mais pas dans WP Rocket a également provoqué des problèmes inattendus tels que des animations cassées.

Les deux plugins tentent de gérer des fonctions similaires :

• Minification et combinaison JavaScript
• Différer et retarder le chargement de JS
• Optimisation HTML et CSS
• Mise en cache du CDN et du navigateur

Utiliser les deux en même temps sans exclusions précises équivalait à demander à deux chefs de cuisiner le même plat, ce qui conduisait à un gâchis culinaire. Les bugs les plus rares peuvent provenir d'optimisations dupliquées.

Comment le bug a été corrigé

La solution finale impliquait des tests systématiques avec ces étapes :

1. Désactivez un plugin à la fois. Lorsque WP Rocket a été désactivé, le menu a repris vie sous la direction de LiteSpeed.
2. Videz complètement tous les caches. Depuis LiteSpeed, Cloudflare CDN et même des caches d'objets comme Redis.
3. Désactivez les paramètres de report JavaScript. Plus précisément dans le plugin, ce n’était pas le principal choix d’optimisation.
4. Excluez le script de menu mobile de l'optimisation. Dans LiteSpeed ​​Cache, le fichier JS qui contrôlait le basculement de menu a été ajouté aux listes « Exclure de JS Combine » et « Exclure du délai de chargement ».

Finalement, LiteSpeed ​​Cache a été conservé pour des avantages en termes de performances et WP Rocket a été entièrement désactivé. Le menu mobile a commencé à fonctionner comme prévu.

Conseils préventifs pour éviter les conflits de plugins de cache

Pour aider les autres à éviter cet étrange bug, voici quelques bonnes pratiques générales :

• N'exécutez pas deux plugins de mise en cache ou d'optimisation simultanément à moins de savoir exactement ce que chacun fait.
• Excluez manuellement les fichiers JS et CSS critiques des optimisations qui pourraient retarder leur chargement.
• Videz régulièrement le cache lorsque vous apportez des modifications aux plugins ou aux thèmes.
• Utilisez des environnements de test pour tester les paramètres du plugin de mise en cache avant de les mettre en ligne.
• Surveillez de près les modifications du frontend après avoir activé des fonctionnalités telles que « Defer JS » ou « Lazy Load Scripts ».

Comprendre le problème principal : lorsque les optimiseurs se chevauchent

LiteSpeed ​​Cache et WP Rocket sont des outils incroyables lorsqu'ils sont utilisés indépendamment. Mais le dilemme surgit lorsque leurs moteurs d’optimisation interagissent de manière imprévisible. Les fichiers sont réduits, différés ou même supprimés en fonction d'une logique conditionnelle qui ne convient pas toujours aux thèmes personnalisés ou à l'interactivité basée sur JavaScript comme les menus mobiles.

Ce conflit n'était pas dû à un bug dans un plugin spécifique mais plutôt à la combinaison de deux outils puissants essayant d'optimiser les mêmes ressources sans coordination.

Conclusion : choisissez un outil et personnalisez-le

En fin de compte, la conclusion à retenir de ce fiasco du menu mobile est simple : choisissez une solution de mise en cache principale et laissez-la gérer toute l'optimisation. Que vous optiez pour LiteSpeed ​​Cache ou WP Rocket, les deux sont d'excellents choix. Mais ils ne sont pas conçus pour fonctionner côte à côte sur les mêmes couches.

Prendre le temps de configurer correctement les paramètres, de tester sur différents appareils et d'exclure de manière sélective des scripts importants a permis de résoudre le problème, sans toucher à une seule ligne de code. À l’ère actuelle des expériences Web optimisées en termes de performances, la flexibilité n’est un atout que si vous ne la chevauchez pas accidentellement.

FAQ

Puis-je utiliser LiteSpeed ​​Cache et WP Rocket ensemble ?

Techniquement, oui, mais ce n'est pas recommandé. Les deux plugins remplissent des fonctions similaires et peuvent entrer en conflit, notamment dans les optimisations JavaScript et CSS. Il est préférable d'en choisir un et de désactiver les fonctionnalités qui se chevauchent dans l'autre si vous devez utiliser les deux.

Pourquoi mon menu mobile a-t-il cessé de fonctionner ?

Il est probable que le JavaScript critique pour votre menu mobile ait été différé, réduit ou combiné d'une manière qui a interrompu sa fonction. Cela se produit souvent lorsque plusieurs plugins de mise en cache sont utilisés simultanément ou lorsque les paramètres d'optimisation sont trop agressifs.

Comment savoir quel fichier JavaScript contrôle mon menu ?

Vous pouvez inspecter le code à l'aide de Chrome DevTools (ou de tout autre outil de développement de navigateur). Recherchez les fonctions qui se déclenchent en cliquant sur le bouton de menu et tracez les scripts chargés. Ensuite, excluez ce script spécifique du délai ou combinez les paramètres.

Ce problème affectera-t-il tous les thèmes ou uniquement les thèmes personnalisés ?

Bien que les thèmes personnalisés soient plus sensibles à de tels problèmes en raison de leur structure unique, même les thèmes populaires peuvent rencontrer des problèmes si l'exécution critique de JS est entravée par des outils de mise en cache.

Quel est le meilleur plugin de mise en cache pour les serveurs LiteSpeed ?

Si vous hébergez sur un serveur LiteSpeed, LiteSpeed ​​Cache est généralement la meilleure option car il est optimisé pour l'architecture du serveur. Il offre des fonctionnalités avancées telles que la mise en cache au niveau du serveur et l'intégration QUIC.cloud.