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.

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

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.

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.

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.

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.

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 : a, 9 et 2. Le reste du hachage est utilisé comme nom de fichier : f2f40a719d9df1fffad70a63f1c1a.