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 :
- Installez l'extension Blue Button pour Chrome : https://chrome.google.com/webstore/detail/blue-button-the-webpage-x/ahbcoeleapdfhmlnjglbiaddohfncace?hl=fr-FR
- Visitez la page de votre site avec le problème de CSS, et ajoutez
?nowprocketà son URL, par exempleexemple.fr/a-propos?nowprocket.
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. - Cliquez sur le Blue Button dans la barre d'outils de Chrome, et cliquez sur Stylesheets :
- 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 :
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
ouhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css - Sauvegardez et vérifiez votre site, en étant déconnecté ou en mode incognito. Tout devrait s'afficher normalement désormais.
- 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é.
- Lorsque le site est cassé à nouveau, remettez la dernière URL supprimée dans la liste et continuez jusqu'à la fin.
Vous obtiendrez ainsi la liste de tous les fichiers CSS chargés sur cette page.
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.