Résoudre les problèmes avec la Minification / Combinaison CSS

Pour résoudre les problèmes d'affichage pouvant survenir lorsque les options Minifier / Combiner les fichiers CSS sont actives, procédez comme suit :

  1. Installez l'extension Blue Button pour Chrome : https://chrome.google.com/webstore/detail/blue-button-the-webpage-x/ahbcoeleapdfhmlnjglbiaddohfncace?hl=fr-FR
  2. Visitez la page de votre site avec le problème de CSS, et ajoutez ?nocache à son URL, par exemple exemple.fr/about?nocache.
    Cela vous fournira une page non mise en cache, vous pourrez donc retrouver les URLs originales (non modifiées par WP Rocket) de tous vos fichiers CSS. 
  3. Cliquez sur le Blue Button dans la barre d'outils de Chrome, et cliquez sur Stylesheets : 
  4. Vous obtiendrez ainsi la liste de tous les fichiers CSS chargés sur cette page. 

  5. Copiez cette liste de fichiers, et rendez vous aux réglages de WP Rocket > Optimisation des fichiers puis collez cette liste dans le champs de texte de l'option Fichiers CSS à exclure :

  6. Sauvegardez et vérifiez votre site, en étant déconnecté ou en mode incognito. Tout devrait s'afficher normalement désormais.
  7. Maintenant supprimez chaque fichier un à un de cette liste. Après chaque suppression, sauvegardez et vérifiez votre site. Répétez cette opération jusqu'à ce que le site soit à nouveau cassé.
  8. Lorsque le site est cassé à nouveau, remettez la dernière URL supprimée dans la liste et continuez jusqu'à la fin.

Remarque : cette méthode peut être utiliser aussi pour la Minification / Combinaison des fichiers JS (en choisissant Scripts dans Blue Button), mais cette autre méthode est plus rapide.