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 Chrome Blue Button ou vous pouvez utiliser cet outil externe. 
2. Entrez l'URL de la page avec le problème CSS, et ajoutez ?nowprocket à l'URL, par exemple exemple.com/about/?nowprocket.
3. Cela contournera toutes les optimisations de WP Rocket, ainsi vous pouvez trouver toutes les URLs originales (non modifiées par WP Rocket) de tous les fichiers CSS.
4. Cliquez sur List Assets et vous verrez alors une liste de tous les fichiers CSS et JavaScript de la page :
   

   

5. Copiez la liste des fichiers CSS, 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 :

   

   Exclusion des fichiers des domaines externes
   Les fichiers provenant de domaines externes peuvent être exclus soit par le nom de domaine ou via l'URL complète du fichier.
   Exemple pour exclure : https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
   
   Vous pouvez utiliser : stackpath.bootstrapcdn.com
   ou https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

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.

Vous pouvez également utiliser l'extension Chrome Blue Button pour obtenir la liste des fichiers CSS et JavaScript internes et externes de votre site. Voici à quoi cela ressemble :