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 ?wpr_imagedimensions=1&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 aux aux fonctionnalités SaaS. 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

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.

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'URL de chaque page est envoyée à notre API qui visitera l'URL et créera le CSS utilisé pour cette page.

WP Rocket vérifiera toutes les 60 secondes avec l'API pour trouver lesquelles des URLs qui ont été envoyées ont utilisé le CSS créé pour elles.

Pour ceux pour qui le CSS a été créé, WP Rocket le fera :

1. Stocke le CSS utilisé sur le disque du serveur, dans le dossier /cache/used-css/1/. Si vous utilisez WordPress Multisite, le dossier nommé /1/ changera pour refléter le numéro du site.
   
   Le fichier CSS résultant sera compressé à l'aide de l'algorithme de compression GZIP. Les fichiers CSS utilisés stockés sur le disque porteront l'extension .css.gz.
2. Vide le cache de l'URL et le précharger si la fonction "Précharger" est active.
3. Supprimez toutes les feuilles de style et les feuilles de style CSS en ligne du code HTML, et ajoutez la feuille de style CSS utilisée en tant qu'élément CSS interne après la balise </title> .
   
   Les balises <style> seront conservées dans le code source pour des raisons de compatibilité, mais leur contenu sera supprimé, à l'exception des balises celles qui sont automatiquement conservées.

Si la génération du CSS utilisé échoue, WP Rocket réessayera de générer le CSS jusqu'à 5 fois supplémentaires.

Pour éviter de surcharger l'unité centrale, le temps d'attente entre chaque nouvelle tentative sera progressivement augmenté.

Si la génération échoue après la cinquième tentative, WP Rocket tentera à nouveau de générer le CSS utilisé dans ces cas :

1. Après un délai de 3 jours.
2. Le CSS utilisé pour une URL spécifique est effacé à l'aide de l'élément de menu "Effacer le CSS utilisé de cette URL" de la barre d'administration lors de la visite de l'URL dans le back-end.
3. L'ensemble du CSS utilisé est effacé en utilisant l'élément de menu "Clear Used CSS" de la barre d'administration lors de la visite de la page des paramètres de WP Rocket.
4. La Suppression automatique des feuilles de calcul utilisées ai lieu.

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 le cache mobile

Avec le cache mobile, WP Rocket créera des CSS utilisés spécifiques au mobile ainsi que des CSS utilisés pour le desktop. Les deux fichiers CSS seront stockés sur le disque du serveur dans /cache/used-css/

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.

La propriété display=swap sera appliquée aux polices dans le CSS utilisé résultant.

De plus, l'attribut data-rocket-preload sera ajouté aux polices préchargées, afin d'identifier WP Rocket comme son propriétaire.

Enfin, un indice de préchargement des polices ajouté par l'option Supprimer les ressources CSS inutilisées ressemblera à ça :

<link rel="preload" data-rocket-preload as="font" href="htpps://votredomaine.com/fonts.woff2" crossorigin>

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 ?wpr_imagedimensions=1&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