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, essayez Chargement Asynchrone du CSS à la place.

Dans cette documentation :

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

Bénéfices de l'option :

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

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 de base pour que l'option fonctionne :

  1. 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.
  2. L'adresse IP suivante doit être autorisée par votre serveur, votre pare-feu ou votre extension de sécurité :
    • 135.125.83.218
  3. WP-CRON ou une réelle tâche CRON serveur doit pouvoir fonctionner.

Aperçu de l’option

Lorsque vous cliquez sur Supprimer les ressources CSS inutilisés, les CSS utilisés seront générés pour votre site web en arrière-plan et ajoutés au HTML de chaque page traitée.

WP Rocket collectera toutes les feuilles de style et les scripts trouvés sur une page et les enverra à notre outil externe pour les traiter. L'outil 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ées seront enregistrées dans la base de données.

Les CSS inutilisés seront supprimés du HTML, et les CSS utilisés seront ajoutés en tant que CSS en ligne avec le balisage suivant si l’option Optimiser le Chargement du CSS est désactivée. Optimiser le Chargement du CSS est désactivée :

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

Attention ! Le processus de gĂ©nĂ©ration du CSS utilisĂ© n'est pas immĂ©diat et peut prendre du temps. Il dĂ©pendra de la file d'attente du service et de la complexitĂ© de votre site web. Veuillez consulter Notes techniques pour plus de dĂ©tails.

Pendant que le CSS est traité, vous verrez une barre de progression. Pendant ce temps, vous ne verrez pas d'amélioration de PageSpeed. Dans la plupart des cas, cela devrait prendre quelques minutes, mais nous continuerons à essayer de traiter les fichiers jusqu'à une heure.

Lorsque le processus est terminĂ©, vous verrez un message de confirmation : 

Ă€ ce stade, vous pouvez effectuer un test PageSpeed pour voir les avantages de cette fonctionnalitĂ©. 


Quand effacer les CSS utilisés

Lorsque vous apportez des modifications aux feuilles de style, ou ajoutez / modifiez le 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 de WP Rocket :

Lorsque vous effacez le CSS utilisé :

  • Le CSS utilisĂ© existant est supprimĂ© de la base de donnĂ©es.
  • Les nouveaux CSS utilisĂ©s seront rĂ©gĂ©nĂ©rĂ©s lors de la prochaine visite d'une page..

Les CSS utilisés seront automatiquement effacés pour toutes les pages.:

  • Lorsque vous changez de thème;
  • Un fichier CSS ou JS est ajoutĂ©/supprimĂ© d'une page.

Les CSS utilisés seront automatiquement effacés pour des pages spécifiques (c'est-à-dire une régénération partielle) :

  • lorsque vous supprimez ou mettez Ă  la corbeille un message;
  • lorsque le cache du poste est effacĂ© ;
  • lorsqu'un commentaire est ajoutĂ©/supprimĂ© ;
  • lorsque le poste n'est pas consultĂ© pendant 1 mois.


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

Les fichiers et les motifs peuvent ĂŞtre exclus de l'option en utilisant la zone de texte Liste des exceptions CSS de la page de configuration :

Toutes les feuilles de style et tous les sélecteurs CSS contenus dans la liste de sécurité seront automatiquement ajoutés au CSS utile généré.
Par exemple, si un fichier est ajouté dans la zone de texte et que ce fichier est présent sur la page actuelle, son contenu complet est ajouté dans le CSS utile.
Si vous avez besoin d'un sélecteur CSS plus complexe, tel que celui-ci, vous pouvez utiliser une liste de sûreté :
.projects_masonry_holder.portfolio_one_by_one article.show {
css declarations here...
}

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

.projects_masonry_holder
.portfolio_one_by_one
.show


Notes techniques

  • Le processus de gĂ©nĂ©ration des CSS utilisĂ©s peut prendre un certain temps. Une fois la gĂ©nĂ©ration des CSS utilisĂ©s lancĂ©e, le processus d'arrière-plan utilisera Cron pour vĂ©rifier toutes les 30 minutes s'il existe des fichiers CSS non traitĂ©s. Il s'exĂ©cutera 3 fois. Lorsque toutes les tentatives sont terminĂ©es, tous les fichiers non traitĂ©s seront ajoutĂ©s au CSS utilisĂ©.
  • Si, Ă  la fin du processus de gĂ©nĂ©ration du CSS utilisĂ©, il reste du CSS inutilisĂ©, cela signifie que la ressource n'Ă©tait pas prĂ©sente lorsque le processus a Ă©tĂ© lancĂ© ou qu'il y a eu des erreurs liĂ©es Ă  la ressource .
  • Des CSS utilisĂ©es sĂ©parĂ©es seront gĂ©nĂ©rĂ©es pour les appareils mobiles lorsque l'option CrĂ©er un fichier de cache Ă  part pour les mobiles est activĂ©e dans l'onglet Cache .
  • Afin d'Ă©viter les contenus pĂ©rimĂ©s, les CSS utilisĂ©s seront automatiquement nettoyĂ©s et rĂ©gĂ©nĂ©rĂ©s tous les 30 jours.
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.