Supprimer les ressources CSS inutilisées

💡 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://wprocket1.statuspage.io/, et/ou essayez Chargement Asynchrone du CSS à la place.

In this article

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

Recommandations Réduire les CSS inutilisées

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. La page non mise en cache ne devrait pas prendre plus de 15 secondes à charger, ou elle sera désactivée dans le SaaS de WP Rocket.
  4. Les adresses IP suivantes doivent ĂŞtre autorisĂ©es par votre serveur, votre pare-feu ou votre extension de sĂ©curitĂ© :
    • 141.94.254.72
    • 141.94.252.17
    • 51.178.134.82
    • 135.125.180.130
    • 141.95.202.69
    • 162.19.138.231
    • 162.19.73.17
    • 141.94.133.225
    • 141.94.134.63
    • 15.235.11.139
    • 15.235.14.231
    • 15.235.50.215
    • 15.235.50.217
    • 15.235.66.211

    • 15.235.82.194

    • 15.235.82.233
    • 15.235.115.62
    • 15.235.80.19
    • 2001:41d0:306:2ab4::/64
    • 2001:41d0:306:2611::/64
    • 2001:41d0:403:5c58::/64
    • 2607:5300:203:a613::/64
    • 2607:5300:203:a5d3::/64
    • 2607:5300:203:a8c2::/64
    • 2607:5300:203:a8e9::/64
    • 2607:5300:203:b03e::/64
    • 2607:5300:203:988b::/64
    • 2607:5300:203:9ed7::/64
    • 2001:41d0:307:1100::/56
    • 2001:41d0:403:3b52::/64
    • 2001:41d0:700:4e82::/64
    • 2001:41d0:306:1b45::/64
    • 2001:41d0:700:6ae7::/64
    • 2001:41d0:203:b0e1::/64
    • 2001:41d0:203:b13f::/64
    • 2607:5300:203:9be7::/64
    • 2607:5300:203:9ed9::/64
  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

Paramètres de Supprimer les ressources CSS inutilisés

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

La page d'accueil sera traitée automatiquement. En plus, lorsque l'option Créez un fichier de cache à part pour les mobiles est utlisée, la page d'accueil spécifique aux mobiles sera également traitée automatiquement.

Les autres pages 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é

À l'exception de la page d'accueil, 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 avis administratifs

Après avoir activé la fonction Supprimer les Ressources CSS inutilisés, vous verrez apparaître un avis d'administration 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.

Avis du compte Ă  rebours

Une fois la page d'accueil terminée, Supprimer les ressources CSS inutilisées continuera à traiter et à générer le CSS utilisé pour toutes les autres 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 du Sitemap pour de meilleurs résultats. Pour en apprendre plus sur le processus, consultez notre documentation.

Page d'accueil traitée avis d'administration

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

Remarque : le préchargement ne déclenchera la génération de CSS utilisé que pour les pages qui ne sont pas mises en cache lors de son exécution. Pour le reste des pages, la génération de Used CSS s'exécutera lorsque leur cache sera vidé et ensuite préchargé ou visité.
Par consĂ©quent, vous pouvez vider le cache de l'ensemble du site et exĂ©cuter le prĂ©chargement après avoir activĂ© la suppression des ressources CSS inutilisĂ©es pour la première fois ou après avoir supprimĂ© le CSS utilisĂ©. Pour les sites de grande taille, vous pouvez Ă©viter de surcharger votre serveur en attendant que toutes les pages aient la possibilitĂ© de gĂ©nĂ©rer le CSS utilisĂ© grâce au vidage automatique du cache de WP Rocket.  

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.

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 Used CSS 

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.

Safelist box

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

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 { déclarations CSS ici... }

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

Pour mettre les attributs CSS dans la liste des exceptions, par exemple title dans l'exemple suivant :

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

vous devez l'ajouter comme suit dans la zone de texte de la liste des exceptions CSS :

[title]

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 : a9 et 2. Le reste du hachage est utilisĂ© comme nom de fichier : f2f40a719d9df1fffad70a63f1c1a

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.