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

Cet article a pour but de vous apprendre à identifier et à résoudre les problèmes de mise en page causés par la fonction Suppression des feuilles de style CSS inutilisées.

Attention ! Ce document de niveau avancé s'adresse 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 aide supplémentaire ou si vous préférez simplement, vous pouvez contacter le support de WP Rocket.

Premiers pas

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

• Le problème survient lorsque Supprimer les ressources CSS inutilisées est la seule fonction activée (tester avec toutes les autres options de WP Rocket désactivées).
• Le problème ne se produit pas lorsque Supprimer les ressources CSS inutilisées est désactivé.
• Le problème persiste après que vous ayez déjà régénéré le CSS utilisé.

Problèmes spécifiques aux mobiles

Si votre problème de mise en page ne concerne que la version mobile de votre page, veuillez :

• A partir de WP Rocket 3.16 : Assurez-vous que l'option Mobile Cache est activée depuis l'onglet Tools.
• Dans les versions de WP Rocket antérieures à 3.16 : Activez l'option Cache séparé pour les appareils mobiles..

Liste des exceptions CSS

La plupart des problèmes de mise en page liés à la suppression des feuilles de style CSS inutilisées sont dus au fait que certains styles nécessaires ont été accidentellement omis dans les feuilles de style CSS utilisées au cours du processus d'optimisation des feuilles de style CSS.

Les Remove Unused CSS dans votre page de configuration du plugin WP Rocket comprend une zone de texte CSS Safelist 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
• Identifications CSS
• Fichiers CSS
• Familles de polices

Par exemple, si le CSS suivant était absent d'une page après l'optimisation Remove Unused CSS :

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

L'un des éléments suivants mettrait ce style sur liste de sécurité pour 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-(.*)

La mise en liste sécurisée des familles de polices est légèrement différente. Si vous remarquez qu'une de vos polices web n'est pas appliquée, vous pouvez la mettre en liste sécurisée en utilisant @font-name :

@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

1. 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
2. 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é.
3. 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 :
   
4. 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.

5. 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 ! La mise sur liste de sécurité 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, de sorte que 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 ( Info supplémentaire).

Assurez-vous que la génération des feuilles de style CSS utilisées est terminée et appliquée en recherchant la balise wpr-usedcss dans le code source de votre site. Une fois que cela 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.

Préserver certains CSS lors de l'utilisation de Supprimer les ressources CSS inutilisées

Supprimer tout le CSS provenant de sources spécifiques

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 Remove Unused CSS 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, toute feuille de style ou CSS en ligne avec les attributs skip_me ou skip_me_too ne sera pas ajouté au CSS utilisé :

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

Dans ce cas, les règles CSS dans le 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>

De même, 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"><br>

Si vous n'êtes pas sûr de savoir comment faire, vous pouvez utiliser notre guide à propos de l'ajout d'extraits de code pour votre site.

Préserver le CSS dans sa source originale tout en l'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é.

CSS cassée de manière aléatoire

Ce type de problème spécifique se produit seulement parfois, presque au hasard, et la présentation de la page est gravement endommagée parce que la plupart des styles sont manquants.

Le problème est probablement dû au fait que notre outil de génération de CSS utilisé a rencontré une erreur de type " firewall ou bot challenge page sur votre site. Cela entraîne la génération et l'application ultérieure d'une feuille de style CSS incorrecte.

L'effacement des CSS utilisés sur les URL concernées peut constituer une solution temporaire, mais les solutions à long terme sont les suivantes :

• Rate-limiting : Vérifiez si votre site utilise une quelconque forme de règles de limitation de la vitesse des robots, et autorisez également nos IP à y figurer. Ces règles peuvent être définies au niveau du serveur ou via un plugin WordPress. Par exemple, si vous utilisez Wordfence, leur fonction de limitation du taux peut interférer avec la génération CSS utilisée.
• Allow IPs: Assurez-vous que les IPs trouvées dans cette liste sont autorisées par votre serveur, pare-feu ou plugin de sécurité.
• Utilisez un plugin d'aide pour écarter les tentatives "échouées"
  WP Rocket | RUCSS Définir la taille minimale acceptable
  
  .
  Ce plugin fixera la taille minimale pour que le CSS utilisé soit considéré comme valide à 10KB. Tout ce qui est inférieur à cette taille sera rejeté pour éviter de casser vos pages.

Si le problème persiste, veuillez copier le code HTML de la page défectueuse dans un fichier texte et l'envoyer à notre équipe en indiquant votre ticket d'assistance.

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 :

• RapidLoad Power-Up d'Autoptimize
• Remove Unused CSS de Perfmatters

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 la 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.

Note: 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.