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.

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 CDN
• 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 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.
• Lors de l'activation ou de la désactivation de la fonctionnalité Auto-héberger les Google Fonts.

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 CSS utilisé généré sera stocké sur le disque du serveur, dans le dossier /cache/used-css/1/.
• La progression de la génération du CSS utilisé sera gérée dans la table wp_wpr_rucss_used_css.
• Le processus de génération et d'application du CSS utilisé est asynchrone, comme suit :
• La génération du CSS utilisé nécessite une première visite de la page, soit par le préchargement, soit par un visiteur.
• Les URL seront ajoutées à la table wpr_rucss_used_css.
• L'événement cron rocket_rucss_on_submit_jobs déterminera combien d'URL peuvent être envoyées au générateur.
• Un cron vérifiera toutes les 60 secondes si le CSS utilisé pour les URL envoyées au générateur est prêt.
• Le planificateur d'actions gère les tâches asynchrones après la visite. Vous pouvez voir le hook rocket_rucss_job_check_status dans le tableau de bord des actions planifiées.
• L'événement cron rocket_rucss_pending_jobs enverra les URL au générateur par lots.
• Le paramètre rocket_rucss_max_pending_jobs définit le nombre maximum d'URL pouvant être programmées pour l'optimisation à tout moment.
• Vous pouvez consulter plus d'informations dans cet article.
• Pour éviter le contenu obsolète, le CSS utilisé sera automatiquement nettoyé et régénéré tous les 30 jours.
• Si le CSS utilisé généré est inférieur à 150 octets (150 caractères), par exemple si le SaaS de WP Rocket est bloqué par un plugin de sécurité ou un captcha, il sera considéré comme invalide et ne sera pas appliqué à vos pages. Dans ce cas, vos pages continueront d'utiliser le CSS d'origine.
• Le hachage du CSS utilisé se trouve dans la table wp_wpr_rucss_used_css.
• Le chemin spécifique où le CSS utilisé est stocké dépend de son hachage.
  
  Exemple : pour un hachage tel que a92f2f40a719d9df1fffad70a63f1c1a, le chemin 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 du fichier : f2f40a719d9df1fffad70a63f1c1a.
• Il y aura une entrée CSS utilisée pour chaque page mise en cache du site. Cependant, des fonctionnalités comme la compatibilité WebP ou le cache mobile auront leur propre entrée CSS utilisée.
• Un fichier CSS utilisé peut être partagé par plusieurs URL si elles ont le même contenu CSS utilisé. Elles auront la même valeur de hachage dans la base de données.
• L'outil de génération de CSS utilisé enverra des requêtes aux pages non mises en cache pour analyser le CSS, il est donc normal de voir des journaux serveur avec la chaîne de requête ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 attachée aux URL.
• Les requêtes de génération de 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