Supprimer les ressources CSS inutilisées

Vous voyez toujours la recommandation Réduire le CSS inutilisé dans PageSpeed ?

Il est possible que le CSS utilisé n'a pas encore été appliqué à vos pages, veuillez vous référer à ce guide pour plus d'informations.

Et, lorsque le CSS utilisé est déjà appliqué, l'audit peut être présent, mais il aura un impact négligeable sur les résultats.

Remarque : il est important de réduire l'utilisation des éléments de la safelist et des exceptions. Veuillez envisager de réduire les exceptions afin de donner la priorité aux performances.

L'option Supprimer les Ressources CSS inutilisés permet de supprimer les CSS et feuilles de style qui ne sont pas utilisés, tout en ne conservant que le CSS utilisé pour chaque page.

Cette option peut être activée sous l'onglet Optimisation des fichiers, à l'intérieur de l'option Optimiser le chargement du CSS, comme suit :

Supprimer les ressources CSS inutilisées est la méthode recommandée pour optimiser votre CSS. Si vous avez des difficultés avec cette option, vérifiez le statut ici: https://status.wp-rocket.me/, et/ou essayez Chargement Asynchrone du CSS à la place.

L'option Supprimer les ressources CSS inutilisées répond à la recommandation PageSpeed suivante :

Le rapport PageSpeed analysera toutes les feuilles de style de votre site web et s'il trouve un fichier CSS contenant plus de 10 Ko de code inutilisé, il affichera cette recommandation.

Avoir du code CSS inutilisé :

• Augmenter les transferts de données inutiles,
• Ralentir le rendu de la page, car le navigateur devra lire toutes les CSS avant de les appliquer.

Vous pouvez lire davantage sur cette recommandation ici : https://web.dev/unused-css-rules/.

Avantages de la fonctionnalité

• Réduction de la taille globale d'une page.
• Réduction du nombre de feuilles de style CSS à charger (moins de requêtes HTTP).
• Réduction du temps de chargement des pages.
• Améliorer les Core Web Vitals
• Éliminez les ressources CSS qui bloquent le rendu

Pour ce faire, il effectue automatiquement :

1. Génération du CSS utilisé nécessaire au rendu de votre site web.
2. Suppression de tout le CSS inutilisé.

Conditions requises pour que ça fonctionne

1. Vous devez avoir une licence WP Rocket valide.
2. Votre site doit être accessible publiquement pour que l'outil fonctionne, ce qui signifie qu'il ne fonctionnera pas sur les sites bloqués au public par une authentification htaccess , par un "mode maintenance", ou similaire. Il fonctionnera sur les sites hébergés localement.
   
   
   Note: Cette fonction est automatiquement désactivée sur les environnements où la constante WP_ENVIRONMENT_TYPE est définie comme locale, car elle doit établir une connexion avec l'outil de WP Rocket pour générer le CSS utilisé.
3. WP Rocket atteindra la version non mise en cache de la page pour analyser le CSS. Pour ce faire, il accédera aux pages de votre site auxquelles la chaîne de requête ?nowprocket=1&no_optimize=1 a été ajoutée. Cette chaîne de requête doit être autorisée. La page non mise en cache ne devrait pas prendre plus de 45 secondes à charger, ou elle sera désactivée dans le SaaS de WP Rocket.
4. Votre serveur, votre pare-feu et/ou votre plugin de sécurité doivent autoriser :
   • Ces deux agents utilisateurs :
     • Desktop: WP-Rocket/SaaS Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
     • Mobile: WP-Rocket/SaaS Mozilla/5.0 (Linux; Android 13; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36

   • Et/ou les IPs de cette liste.
     
     

   Lorsque WP Rocket ne peut pas accéder à votre site, la notification suivante sera affichée : 
   

   

   Il semble qu'un plugin de sécurité ou le pare-feu du serveur empêche WP Rocket d'accéder au générateur Suppression des ressources CSS inutilisées. Les IPs listées ici dans notre documentation devraient être ajoutées à vos listes d'autorisation :
   
   - Dans le plugin de sécurité, si vous en utilisez un
   - Dans le pare-feu du serveur. Votre hébergeur peut vous aider à cet égard

5. WP-CRON ou une réelle tâche CRON serveur doit pouvoir fonctionner. Ce point est une condition nécessaire pour que la génération du CSS utilisée fonctionne correctement.
6. Si vous utilisez Wordfence, activez le mode d'apprentissage comme décrit ici.
7. Le Bot Fight Mode de Cloudflare doit être désactivé.

Aperçu de l’option

Supprimer les ressources CSS inutilisées collecte toutes les feuilles de style et les scripts trouvés sur une page et les envoie à notre outil externe pour les traiter.

L'outil externe traitera les informations et générera le CSS utilisé, qui correspond au CSS effectivement utilisé dans vos pages.

AVERTISSEMENT! Le processus de génération et d'application du CSS utilisé n'est pas immédiat, il est asynchrone.

Les pages de votre site devront être visitées pour déclencher la génération du CSS utilisé et son application.

La génération et l'application du CSS utilisé dans votre site se déroule comme suit :

Génération du CSS utilisé

Seule la visite d'une page, qu'elle soit manuelle ou issue du préchargement, déclenchera le processus de génération et d'application du CSS utilisé.

L'outil Supprimer les Ressources CSS inutilisés sélectionnera tout ce qui peut être identifié comme un sélecteur CSS. Plus tard, il comparera le code HTML de la page avec les données sélectionnées pour déterminer quels sélecteurs CSS sont réellement utilisés sur la page. Seuls les sélecteurs CSS correspondants seront conservés et enregistrés en tant que CSS utilisés.

Les entrées CSS utilisé générées seront enregistrées dans la base de données de votre site, et le cache de la page concernée sera vidé.

Application du CSS utilisée

Lors de la prochaine visite de la page, déclenchée par le préchargement ou un visiteur, toutes les ressources CSS inutilisées seront supprimées du HTML, et le CSS utilisé sera ajouté comme élément CSS en ligne.

Comment vérifier si la fonction Supprimer les Ressources CSS inutilisés fonctionne ?

Vous devez voir le balisage suivant dans le code source de votre page :

<style id="wpr-usedcss">.css-class{example: 0;}</style>

L'élément en ligne avec le wpr-usedcss contiendra le CSS utilisé résultant pour la page.

À ce stade, vous pouvez effectuer un test PageSpeed pour voir les avantages de cette fonctionnalité.

Note: Alors que la taille globale de la page va diminuer, la taille du corps de la réponse HTML va augmenter. Cela est dû au fait que la fonctionalité Supprimer les Ressources CSS inutilisés ajoutera le CSS utilisé en tant qu'élément en ligne dans le document HTML. Au final, Supprimer les Ressources CSS inutilisés diminuera le total à télécharger.

Vous pouvez également passer à la section Notes techniques de cet article pour obtenir des informations détaillées sur cette approche asynchrone.

Avis d'avancement et notifications

Après avoir activé Supprimer les Ressources CSS inutilisés, vous verrez apparaître une notification avec un compte à rebours et le texte suivant :

WP Rocket: Veuillez patienter 52 secondes. Le service Supprimer les ressources CSS inutilisées analyse vos pages.

Supprimer les ressources CSS inutilisées traitera et à générera le CSS utilisé pour toutes les pages de votre site, par groupes de 100 URL maximum par 60 secondes.

Le message suivant apparaîtra dans ; la page des paramètres de WP Rocket :

WP Rocket: Le CSS utilisé de votre page d'accueil a été généré. WP Rocket va continuer de générer le CSS jusqu'à 100 URLs par 60 seconde(s). Nous suggérons d'activer le Préchargement pour de meilleurs résultats. Pour en apprendre plus sur le processus, consultez notre documentation.

Veuillez noter que, bien que la fonction Supprimer les ressources CSS inutilisées soit prête à fonctionner pour vos autres pages lorsque cet avis s'affiche, seule une visite des pages déclenchera la génération et l'application ultérieure du CSS utilisé. C'est pourquoi l'utilisation du Préchargement de la Sitemap est fortement recommandée. Pour en savoir plus sur le fonctionnement de la fonction avec Préchargement, consultez la section suivante de cet article.

Vous verrez les avis d'administration dans les scénarios ci-dessous:

• Ajout ou suppression de valeurs dans le box Liste des exceptions CSS
• Changer de thème
• Purger le CSS utilisé
• Modifier l'option Activer le Content Delivery Network
• Mise à jour de WP Rocket

Utilisation Supprimer les ressources CSS inutilisées avec le Préchargement

L'activation de la fonction de Préchargement est fortement recommandée pour avoir une application plus pratique de Supprimer les ressources CSS inutilisées, car elle automatisera certaines étapes du processus.

Lorsque le préchargement est actif, il simulera une visite de vos pages en créant les fichiers de cache, ce qui permettra également :

• Déclencher la génération du CSS utilisé,
• Appliquez le CSS utilisé résultant dans la page.

Voici ce qui se produit lorsque vous activez pour la première fois la fonction Supprimer les ressources CSS inutilisées et lorsque le CSS utilisé est purgé.

Si le préchargement n'est pas activé, toutes les pages de votre site devront être visitées pour déclencher la génération du CSS utilisé, puis une autre visite pour que le CSS utilisé soit appliqué.

Vous pouvez également voir plus de détails dans la section Notes techniques de cet article.

Utilisation de Supprimer les ressources CSS inutilisées avec Créer un fichier de cache à part pour les mobiles

Si la fonction Créer un fichier de cache à part pour les mobiles est activée, le CSS utilisé spécifique au mobile se déclenchera également pour la version du cache spécifique au mobile.

En plus, il y aura une entrée spécifique dans la base de données pour les valeurs CSS utilisées spécifiques au mobile.

Utilisation de Supprimer les ressources CSS inutilisées avec Précharger les polices

Lorsque l'option Supprimer les ressources CSS inutilisées est activée, la fonction Précharger les polices est désactivée.

En revanche, toutes les polices trouvées dans le CSS utilisé résultant seront préchargées et insérées dans la page avant le bloc CSS. Cela ne s'applique qu'aux polices trouvées dans le CSS utilisé, et non aux polices ajoutées dans la case Précharger les polices.

En plus, la propriété display=swap sera appliquée aux polices dans le CSS utilisé résultant.

Veuillez noter que les familles de polices qui sont chargées lors d'une certaine action après le chargement de la page ne seront pas ajoutées au CSS utilisé résultant. Seules les polices chargées directement lors du chargement de la page sont conservées dans le bloc de  CSS utile, celles que vous pouvez voir dans l'onglet Réseau des outils de développement.

Exclure des polices spécifiques du préchargement

Si nécessaire, vous pouvez exclure des polices spécifiques du préchargement lorsque vous utilisez Supprimer les ressources CSS inutilisées. Pour ce faire, ajoutez ce snippet personnalisé à votre site :

add_filter( 'rocket_exclude_rucss_fonts_preload', function( $fonts ) {
  //Partial match, matching all fonts under specific directory
  $fonts[]='woocommerce/assets/fonts';
  //Exact match
  $fonts[]='woocommerce/assets/fonts/font.woff2';
  return $fonts;
} );

Cette modification peut être utile si, par exemple, vous devez arrêter le préchargement d'une police qui n'est utilisée que dans le pied de page de votre site.

Désactiver le préchargement des polices

Si vous en avez besoin, vous pouvez utiliser le code suivant pour désactiver le préchargement des polices CSS utilisées :

add_filter( 'rocket_enable_rucss_fonts_preload', '__return_false' ); 

Vous pouvez ajouter ce code comme expliqué ici.

Vous pouvez également installer le plugin d'aide suivant à cette fin :

📥   Télécharger (.zip):  WP Rocket | Disable Used CSS Fonts Preload
Développeurs : vous trouverez le code de de plugin sur GitHub.

Utilisation de la fonction Supprimer les ressources CSS inutilisées avec Combiner les fichiers CSS

Lorsque la fonction Supprimer les ressources CSS inutilisées est activée, la fonction Combiner les fichiers CSS sera automatiquement désactivée et apparaîtra en grisé dans la page des paramètres de WP Rocket.

Le bloc CSS utilisé qui en résulte remplacera tous les fichiers CSS existants, y compris celui qui a été combiné.

Utiliser Supprimer les ressources CSS inutilisées avec le thème Divi

Supprimer les ressources CSS inutilisées est compatible avec l'option Critical CSS de Divi.

Cependant, le CSS dynamique de Divi sera automatiquement désactivé lorsque l'option Supprimer les ressources CSS inutilisées est activée, car elles ne sont pas compatibles.

Utiliser Supprimer les ressources CSS inutilisées avec Autoptimize et Perfmatters

Supprimer les ressources CSS inutilisées est automatiquement désactivée quand les options RapidLoad Power-Up d'Autoptimize et Remove Unused CSS de Perfmatters sont actives sur un site. Dans ce cas, la description de Supprimer les ressources CSS inutilisées affichera les textes suivants en conséquence :

 Supprimer les ressources CSS inutilisées est actuellement activée dans RapidLoad Power-Up d'Autoptimize. Si vous voulez utiliser l'option Supprimer les ressources CSS inutilisées de WP Rocket, désactivez le plugin RapidLoad Power-Up de Autoptimize.

 L'option Supprimer les ressources CSS inutilisées  est actuellement activée dans Perfmatters. Si vous voulez utiliser l'option Supprimer les ressources CSS inutilisées de WP Rocket, désactivez cette option dans Perfmatters.

Effacement automatique du CSS utilisé

Les CSS utilisés seront automatiquement effacés (c'est-à-dire que l'effacement complet) pour toutes les pages dans les cas suivants :

• Changement de thème
• Modification des éléments ajoutés à la zone de texte Liste des exceptions CSS.
• Mise à jour de WP Rocket

Le CSS utilisé sera automatiquement supprimé pour certaines pages (suppression partielle du CSS utilisé) dans les cas suivants :

• Modification d'un article/page
• Modification/suppression de termes
• Lorsque le nombre de commentaires change
• 3 jours après un échec de génération du CSS utilisé

L'action d'effacer le CSS utilisé effacera également le cache des pages.

Quand effacer le CSS utilisé

Lorsque vous apportez des modifications aux feuilles de style, ou que vous ajoutez/modifiez un CSS personnalisé via le Customizer de WordPress (ou un plugin), vous devez effacer manuellement le CSS utilisé via le menu de la barre d'outils WP Rocket:

Ou en utilisant le bouton Nettoyer le CSS utilisé de cet URL dans la barre supérieure pour un article spécifique :

Lorsque vous effacez le CSS utilisé, le CSS utilisé existant est supprimé de la base de données.

Le nouveau CSS utilisé sera :

• régénéré lors de la prochaine visite de la page et
• appliquée à la page lors d'une seconde visite.

Comment exclure des fichiers de cette optimisation / conserver les règles CSS sélectionnées sur une page

Les fichiers et les modèles peuvent être exclus de l'option en utilisant la zone de texte Liste des exceptions CSS sur la page des paramètres.

Toutes les feuilles de style et tous les sélecteurs CSS contenus dans la liste des exceptions seront automatiquement ajoutés au CSS utilisé généré.

Par exemple, si un fichier est ajouté dans la zone de texte et que le fichier est présent sur la page actuelle, son contenu complet est ajouté dans le CSS utilisé.

Sélecteurs CSS multiples

Si vous avez besoin d'un sélecteur CSS plus complexe, tel que le suivant, vous pouvez utiliser l'exception CSS suivante :

.projects_masonry_holder.portfolio_one_by_one article.show { css declarations here... }

L'approche correcte serait d'établir une liste d'exceptions de toutes les classes dans le sélecteur, une par ligne, comme ceci :

.projects_masonry_holder.portfolio_one_by_one article.show

Vous pouvez également utiliser des caractères génériques avant et/ou après les sélecteurs, comme indiqué ci-dessous :

(.*).show(.*)

.projects_masonry_holder .portfolio_one_by_one  #pop-up

Attributs CSS

Pour établir une liste d'exceptions des attributs CSS, par exemple le titre dans l'exemple suivant :

.my-class img[title="fancy image"] { ... }

Vous devez l'ajouter comme suit dans la zone de texte de la liste de sécurité :

.my-class img[title="fancy image"]

Polices de caractères

Pour exclure une police, vous pouvez utiliser le @ suivi du nom de la famille de polices.

Par exemple, pour :

@font-face{font-family:swiper-icons;src:('http://example.com/font/myfont.tff')}

vous devez ajouter ce qui suit à la liste des  exceptions CSS :

@swiper-icons

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

Exclure les styles de l'ajout à la feuille de style CSS utilisée

Cette correction est utile dans les cas où certains styles ne doivent être appliqués que dans des conditions spécifiques et où le fait de les conserver dans le CSS utilisé entraînerait des problèmes pour le site.

Vous pouvez trouver plus d'informations ici (Anglais).

Utilisation de Supprimer les ressources CSS inutilisées avec Combine CSS files

Supprimer les ressources CSS inutilisées désactive automatiquement la fonction Combiner les fichiers CSS, qui n'est disponible que dans les versions de WP Rocket antérieures à la 3.15 .

En effet, le bloc CSS utilisé qui en résulte remplacera tous les fichiers CSS existants, y compris celui qui a été combiné.  ;

Utilisation de Supprimer les ressources CSS inutilisées avec le thème Divi

WP Rocket's  ; Remove Unused CSS est compatible avec le thème Divi Critical CSS.

Cependant, les CSS de Divi  ; Dynamic CSS sera automatiquement désactivé lorsque Remove Unused CSS est activé car ils ne sont pas compatibles.

Dépannage

Si le CSS utilisé n'est pas généré/appliqué à votre page, veuillez vérifier l'adresse suivante Dépannage des problèmes de génération de Used CSS.

Et si la suppression des feuilles de style CSS inutilisées perturbe la mise en page de votre site, vous pouvez suivre le guide suivant Dépannage des problèmes liés à la suppression des feuilles de style CSS inutilisées.

Notes techniques

• Le processus de génération et d'application du CSS utilisé est asynchrone, comme suit :
• • La génération de CSS utilisée nécessite une première visite de la page, soit par le Préchargement, soit par un visiteur.
  • Un cron vérifiera toutes les 60 secondes s'il y a des fichiers CSS non traités.
  • Le planificateur d'actions gère les tâches asynchrones après la visite.
  • Vous pouvez voir plus d'informations dans l'article suivant.
• Afin d'éviter les contenus obsolètes, les CSS utilisés seront automatiquement nettoyés et régénérés tous les 30 jours.
• Si le CSS utilisé résultant est plus petit que 150 octets (150 caractères), parce que, par exemple, le SaaS de WP Rocket est bloqué par un plugin de sécurité ou un captcha, alors il sera considéré comme un CSS invalide et WP Rocket ne l'appliquera pas à vos pages. Dans ce cas, vos pages continueront à utiliser le CSS original. 
• Le CSS utilisé résultant sera stocké dans la base de données dans la table wpr_rucss_used_css.
• Il y aura une entrée CSS utilisé pour chaque page du site mise en cache. Chaque variation du cache (WebP, Mobile) aura également sa propre entrée de CSS Utilisé.
• Le chemin spécifique où le CSS utilisé est stocké dépend de son hash. 

  Exemple : pour un hash tel que a92f2f40a719d9df1fffad70a63f1c1a le chemin d'accès et le nom du fichier CSS utilisé seront:
  
  /cache/used-css/1/a/9/2/f2f40a719d9df1fffad70a63f1c1a.css.gz
  
  Il y a 3 sous-dossiers, chacun nommé d'après les 3 premières lettres du hachage :  a, 9 et 2. Le reste du hachage est utilisé comme nom de fichier : f2f40a719d9df1fffad70a63f1c1a. 

• L'outil de génération du CSS utilisé enverra des requêtes aux pages non mises en cache pour analyser le CSS, de sorte qu'il devrait y avoir la chaîne de requête attachée aux URL ?nowprocket=1&no_optimize=1 dans vos logs serveur.
• Les requêtes de génération du CSS utilisé utiliseront les agents utilisateurs suivants :
  • Desktop: WP-Rocket/SaaS Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
  • Mobile: WP-Rocket/SaaS Mozilla/5.0 (Linux; Android 13; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36