Résoudre les problèmes avec Supprimer les ressources CSS inutilisées

Cette documentation a pour but de vous apprendre à identifier et à résoudre les problèmes de mise en page causés par la fonction Supprimer les ressources CSS inutilisées.

Attention ! Il s'agit d'un document de niveau avancé destiné aux utilisateurs expérimentés, aux développeurs et, d'une manière générale, aux personnes à l'aise avec les CSS et les outils de développement du navigateur.

Si vous avez besoin d'une assistance supplémentaire ou si vous préférez simplement, vous pouvez contacter le support de WP Rocket.

Dans ce document

Premiers pas
Liste des exceptions CSS
Exceptions CSS: Étapes de la résolution des problèmes
Alternatives aux exceptions CSS
Fonctionnalités tierces incompatibles
CSS incompatible
Compatibilité automatique

Premiers pas

Il est important de s'assurer que Supprimer les ressources CSS inutilisées est bien la cause du problème de mise en page de votre site. Pour le confirmer, chacun des éléments suivants doit être vérifié :

Le problème survient lorsque Supprimer les ressources CSS inutilisées est la seule fonctionnalité activée (test avec toutes les autres options de WP Rocket désactivées).
Le problème ne se pose pas lorsque l'option Supprimer les ressources CSS inutilisées est désactivée.
Le problème persiste alors que vous avez déjà régénéré le CSS utilisé.

Problèmes seulement sur mobile

Si votre problème de mise en page n'est lié qu'à la version mobile de votre page, vous devriez également essayer l'option Créer un fichier de cache à part pour les mobiles de WP Rocket dans l'onglet Cache avant de faire quoi que ce soit d'autre.

Liste des exceptions CSS

La plupart des problèmes de mise en page liés à Supprimer les ressources CSS inutilisées sont dus au fait que certains styles nécessaires ont été accidentellement omis dans le CSS utilisé (ou Used CSS) au cours du processus d'optimisation du CSS.

L'option Supprimer les ressources CSS inutilisées comprend une zone de texte Liste des exceptions CSS qui peut être utilisée pour s'assurer que les styles manquants sont inclus dans le CSS utilisé en ajoutant l'un des éléments suivants associés aux styles manquants :

Classes CSS
ID CSS
Fichiers CSS
Familles de Font

Par exemple, si le CSS suivant était absent d'une page après l'optimisation Supprimer les ressources CSS inutilisées :

.my-class .other-class { background-color: green; }

L'un des éléments suivants permettrait d'établir une liste d'exception pour ce style afin de s'assurer qu'il est inclus dans le CSS utilisé (les sélecteurs universels - (.*) - peuvent être utilisés pour sélectionner n'importe quel texte) :

.my-class .other-class
.my-class(.*)
(.*).other-(.*)

Préserver les familles de polices est légèrement différent. Si vous remarquez qu'une de vos polices web n'est pas appliquée, vous pouvez la mettre sur liste en utilisant @nom-de-police :

@Poppins

Exceptions CSS: Étapes de la résolution des problèmes

Si la création d'une liste d'exceptions CSS permet généralement de résoudre le problème, il arrive parfois que ce ne soit pas le cas. Il convient donc de commencer par vérifier si la création d'une liste d'exceptions fonctionne dans votre cas.

Commencez par ajouter (.*) dans la zone de la liste d'exceptions afin de préserver tous les styles possibles et enregistrer les réglages. Attendez ensuite que le CSS utilisé se régénère pour voir si le problème est résolu.
Si le problème n'est pas résolu, cela signifie que la liste d'exceptions ne fonctionnera pas. Dans ce cas, vous pouvez essayer les options alternatives dans les sections ci-dessous, ou contacter le support WP Rocket pour plus d'assistance.
Si vous confirmez que la la liste d'exceptions fonctionne, supprimez le (.*) de la liste et suivez les étapes suivantes pour utiliser les Outils de développement de votre navigateur afin de trouver les CSS qui doivent être préservés

En utilisant une fenêtre incognito du navigateur, affichez la page concernée avec ?nowprocket en plus (https://votredomaine.fr/?nowprocket). Cela permitter de contourner le cache et les optimisations de WP Rocket pour voir la version non mise en cache de la page avec le CSS appliqué normalement.
Ouvrez un autre fenêtre incognito et chargez le site https://votredomaine.fr/ normalement avec WP Rocket et Supprimer les ressources CSS inutilisées appliqué.
Cliquez avec le bouton droit de la souris sur l'élément concerné pour ouvrir le menu contextuel, puis cliquez sur "Inspecter" pour afficher le balisage HTML et CSS de l'élément (faites-le pour les deux fenêtres ouvertes afin de pouvoir les comparer l'une à l'autre).

Veuillez visionner la vidéo ci-dessous à titre de rappel :
L'objectif est de rechercher toute différence dans les classes CSS, les sélecteurs, les valeurs, etc. entre chaque page. Il est fort probable que vous trouviez des feuilles de style CSS appliquées à la page ?nowprocket qui sont absentes de la page sur laquelle l'option Supprimer les ressources CSS inutilisées a été appliquée.
Astuce : Les classes CSS concernées ne se trouvent pas toujours dans la balise de l'élément concerné. Dans certains cas :
• Plusieurs classes CSS peuvent être concernées.
• Les classes peuvent également être situées dans des éléments de plus haut niveau du DOM.
Une fois que vous avez trouvé les styles manquants, la dernière étape consiste à ajouter les sélecteurs CSS correspondants à la Liste des exceptions CSS, comme suit :

Attention ! L'application des ces exceptions n'est pas instantanée.

Si vous visitez la page immédiatement après avoir ajouté un élément de la liste de sauvegarde et enregistré les modifications, le CSS utilisé mettra un certain temps à se régénérer. Ainsi, même si vous n'avez pas trouvé la bonne solution, le problème semblera résolu jusqu'à ce que le nouveau CSS utilisé soit appliqué à la page. ( Plus d'infos).

Assurez-vous que la génération du CSS utilisées est terminée et appliquée en recherchant le bloc CSS wpr-usedcss dans le code source de votre site. Une fois que ce point est confirmé, vérifiez si le problème a été résolu.

Alternatives aux exceptions CSS

Préserver tous les CSS provenant de sources précises

Dans certains cas, il peut s'avérer nécessaire de préserver l'intégralité des styles en ligne et/ou des feuilles de style externes sur la page. Voici quelques cas courants :

Lorsque le CSS contient des sélecteurs dynamiques où la valeur numérique ou alphanumérique des classes et des ID change à chaque chargement de page.
Lorsque le JavaScript s'appuie sur la présence d'une feuille de style ou d'un style en ligne sur la page.

Les guides suivants sont disponibles pour ces scénarios :

Pour les feuilles de style : Empêcher des fichier CSS d'être supprimés par l'option Supprimer les CSS inutilisées.
Pour le CSS en ligne : Empêcher les styles inline d'être supprimés par l'option Supprimer les CSS inutilisées.

Lorsqu'ils sont utilisés, le CSS des styles externes et/ou en ligne associés sera également inclus dans le CSS utilisé.

Supprimer tout le CSS provenant de sources spécifiques

Depuis WP Rocket 3.14.1, le filtre rocket_rucss_skip_styles_with_attr peut être utilisé pour cibler les attributs HTML appliqués aux éléments <style> et <link> qui effectue toutes les opérations suivantes pendant que l'optimisation Supprimer les ressources CSS inutilisées est appliquée :

Si un fichier CSS est ciblé, il est supprimé de la page et son contenu n'est pas inclus dans le CSS utilisé.
Si une balise <style> en ligne est ciblée, elle supprime ces styles de la page et son contenu n'est pas ajouté au CSS utilisé.

Cela peut s'avérer utile lorsque certains styles ne doivent être appliqués que dans des conditions spécifiques. Par exemple, le fait de conserver certains styles dans certaines conditions peut entraîner une mauvaise mise en page.

Exemple

Avec l'extrait suivant, tout CSS en ligne ou feuille de style avec l'attribut skip_me ou skip_me_too ne seront pas ajoutés au CSS utilisé :

add_filter( 'rocket_rucss_skip_styles_with_attr', function( $skipped_attributes ){
		$skipped_attributes = ['skip_me', 'skip_me_too'];
		return $skipped_attributes;
	});

Dans ce cas, les règles CSS du style en ligne suivant ne seront pas incluses dans le CSS utilisé et seront également supprimées de leur emplacement d'origine dans la source HTML de la page :

<style skip_me="1" id="testid">
	div{display:none;}
</style>

En outre, le fichier suivant sera supprimé de la page et ses règles CSS ne seront pas incluses dans le CSS utilisé :

<link href="example.com/rocket-test-data/styles/rucss_styles7.css" rel="stylesheet" skip_me_too="1">

Si vous ne savez pas comment faire, vous pouvez utiliser notre guide sur comment ajouter des extraits de code à votre site.

Préserver les CSS dans leur source d'origine tout en les excluant du CSS utilisé

Vous pouvez combiner les effets des deux sections précédentes. Si vous les utilisez toutes deux pour cibler un fichier CSS commun ou un bloc CSS en ligne, le résultat est qu'il restera appliqué aux pages comme il l'est normalement, tout en excluant ses styles du CSS utilisé.

Fonctionnalités tierces incompatibles

Veuillez désactiver toutes les optimisations CSS d'une tierce partie (plugin ou thème), car elles peuvent souvent entrer en conflit avec le fonctionnement de. Supprimer les ressources CSS inutilisées de WP Rocket. Effacez le CSS utilisé après la désactivation et vérifiez si votre problème est résolu.

La liste suivante est une liste de fonctionnalités tierces connues pour être conflictuelles (cette liste n'est pas exhaustive), assurez-vous donc de ne pas utiliser l'une d'entre elles :

CSS incompatible

Si le CSS de base de votre site est invalide (c'est à dire qu'il contient des erreurs de parse ou de valeur détectées par ce validateur CSS officiel), il peut causer des problèmes avec l'analyseur CSS de WP Rocket. Si votre CSS ne peut pas être analysé correctement, cela peut entraîner l'inclusion d'un CSS incorrect dans le CSS utilisé, ce qui peut également entraîner une mise en page cassée, ou un CSS utilisé non généré.

Notre outil peut traiter certaines erreurs de syntaxe, mais si vous rencontrez des problèmes, il est recommandé de vérifier les erreurs d'analyse CSS à l'aide de l'outil de test suggéré ci-dessus. Corrigez-les si nécessaire, puis régénérez le CSS utilisé et vérifiez si le problème est résolu.

À noter ! Vous êtes invités à contacter le support de WP Rocket si :

Vous êtes bloqué à n'importe quelle étape de ce processus.
La liste d'exceptions CSS ne fonctionne pas, c'est-à-dire que les CSS concernés sont toujours supprimés.
Vous souhaitez faire part de vos conclusions, car il est également dans notre intérêt de disposer d'un registre de tous les CSS concernés.

Compatibilité automatique

Nous maintenons et appliquons une compatibilité automatique pour chaque nouveau problème de mise en page que nous découvrons afin que les mêmes problèmes ne continuent pas à se produire pour d'autres personnes utilisant les mêmes thèmes et plugins.

Remarque : Toute combinaison de CSS/JavaScript par d'autres plugins/thèmes doit être désactivée car le processus de liste d'exception utilise les fichiers CSS et JavaScript d'origine comme conditions pour établir la liste de sécurité automatique.