Perfmatters a ajouté une nouvelle fonctionnalité dans sa version 1.8.5 du 19 janvier pour supprimer les CSS inutilisés. Je ne me lasserai jamais de recommander ce plugin, qui est devenu un incontournable si vous voulez améliorer les performances de votre blog.
Pour le 25 dollars d'une année, il offre un outil puissant auquel ils ne cessent d'apporter des améliorations.
Je l'ai déjà testé sur WordPress 5.8 et 5.9-RC et rien n'a été cassé jusqu'à présent. Bien que je maîtrisais déjà très bien le CSS inutilisé grâce au Gestionnaire de script de ce plugin, le simple fait d'activer cette option permet d'économiser au moins quelques requêtes et quelques Ko.
pourquoi supprimer les CSS inutilisés ?
Les avertissements habituels dans PageSpeed de"Supprimer les CSS inutilisés" ou"Réduire le contenu CSS inutilisé" apparaissent généralement lorsque les CSS chargés par un plugin ou un modèle ne sont pas nécessaires ou ne sont pas utilisés sur une page particulière
Les développeurs ne mettent normalement une feuille de style en file d'attente que si elle est utilisée. Cependant, on ajoute souvent des styles supplémentaires qui ne sont peut-être pas nécessaires. Il en résulte beaucoup de CSS inutilisés, ce qui ralentit le chargement
Occasionnellement, cela peut aussi donner lieu à des avertissements"Supprimer les ressources qui bloquent le rendu".
Au-delà du placebo que constitue l'obtention d'un meilleur score PageSpeed, la suppression des CSS inutilisés a un impact majeur sur la diminution du temps nécessaire entre le début du chargement de la page et le moment où une partie du contenu de la page est rendue à l'écran(FCP), du temps nécessaire au contenu principal d'une page Web pour être téléchargé et entièrement prêt pour l'utilisateur(LCP) et du temps nécessaire entre le début du chargement de la page et le moment où elle est entièrement interactive(TTI). En bref, vous savez, une partie importante de l'histoire de la Core Web Vitals.
comment trouver les CSS inutilisés ?
La façon la plus simple de trouver les CSS inutilisés est de tester l'URL avec PageSpeed. S'il y a du CSS inutilisé, vous verrez l'avertissement, qui ne sera déclenché que s'il est supérieur au seuil de ce que Google considère comme suffisamment important pour émettre un avertissement. Donc, si la vitesse de chargement perçue (la vitesse réelle que vous expérimentez) est bonne, ne vous y attardez pas trop.
L'autre moyen de trouver les CSS inutilisés est d'utiliser Chrome DevTools. Ouvrez l'inspecteur dans Chrome (Ctrl+Shift-I), appuyez sur Shitft+Control+P, tapez "Couverture" et vous y trouverez les octets inutilisés pour CSS et JS. En rouge les inutilisés et en bleu/vert les utilisés.
À partir de là, et étant entendu que vous reconnaissez chaque CSS, ce qu'il fait et si vous pouvez le supprimer ou le désactiver à partir de la page où vous mesurez, il existe plusieurs options, comme remplacer certains plugins par d'autres plus légers, revoir ou envisager de modifier le modèle, utiliser le gestionnaire de scripts pour désactiver sélectivement JS et CSS, etc.
La façon la plus simple d'éliminer les avertissements PageSpeed est d'activer la fonction"Supprimer les CSS inutilisés" dans Perfmatters, qui fait tout cela automatiquement. Ils affirment l'avoir testé sur des centaines d'URL (avec différents modèles et configurations) et rapportent ces résultats :
Diminution moyenne du PCF de 15,20 %.
Diminution moyenne du LCP de 19,66%.
Diminution moyenne de l'ITT
de 14,95 %.
Cependant, n'oubliez pas qu'il est encore en phase bêta et que les résultats peuvent ne pas être ceux souhaités ou même casser quelque chose. Il est donc conseillé de le tester dans un environnement de test, même lorsqu'il sort de la phase bêta.
Avant d'activer
L'historique de Perfmatters recommande, avant d'activer cette option, de supprimer tout préchargement CSS existant qui a été configuré dans Perfmatters (à l'exception des feuilles de style locales du google Fonts) et NE PAS fusionner le CSS.
La fusion CSS est une technique d'optimisation dépréciée depuis HTTP/2. Dans certains cas, la fusion CSS peut même être préjudiciable aux performances. Une fois encore, n'oubliez pas que chaque page se comportera différemment selon sa configuration et qu'il est préférable de tester et d'observer jusqu'à ce que vous trouviez le meilleur résultat sans erreur pour votre cas.
Vous devez également être conscient des configurations possibles d'autres plugins de performance ou de mise en cache que vous utilisez et qui peuvent entrer en conflit ou être remplacés par l'activation des mêmes fonctions.
Une fois activé, vous trouverez deux options avec deux réglages :
1- Método CSS utilizado
par défaut) : le CSS utilisé apparaît aligné au-dessus du pli dans le code source du site. Cette option est la meilleure pour les scores PageSpeed.par défaut) : le CSS utilisé apparaît aligné au-dessus du pli dans le code source du site. Cette option est la meilleure pour les scores PageSpeed.
2- Comportement de la feuille de style
2.1- Delay (celle par défaut et recommandée).
Votre CSS était auparavant en ligne et toutes les feuilles de style CSS (CSS non utilisées) sont retardées et chargées avec l'interaction de l'utilisateur.
2.2- Async
Votre CSS utilisé est converti en inline, et toutes les feuilles de style CSS (CSS non utilisées) sont chargées de manière asynchrone. Cette méthode peut contribuer à éviter le pop-in, car les feuilles de style sont exécutées de manière asynchrone pendant le chargement de la page. Cette méthode entraînera un LCP/FCP légèrement plus élevé que le comportement de délai précédent.
2.3- Remove
Votre CSS utilisé devient inline, et toutes les feuilles de style CSS originales (CSS inutilisées) sont supprimées. Il s'agit de la méthode la plus agressive, mais elle est également susceptible de nécessiter l'ajout d'exceptions. Elle n'est recommandée qu'aux utilisateurs avancés.
Une fois activé, les pages et les entrées se comporteront différemment.
Toutes les CSS utilisées et générées par Perfmatters seront stockées localement dans ce chemin :
/wp-content/cache/perfmatters/votredomaine.com/css/
Voici à quoi ressemble le CSS généré par Perfmatters, pour les pages, les articles, les catégories, les balises, les recherches, la page d'accueil ou les 404.
Dans la case"Feuilles de style exclues", vous pouvez exclure des feuilles de style spécifiques de la fonction "Supprimer les CSS inutilisés" en ajoutant l'URL source complète (siteweb.css), ou en ajoutant une seule partie de l'URL source. Format : un par ligne.
Dans la case suivante"Sélecteurs exclus", vous pouvez exclure certains CSS (sélecteurs) de la fonction "Supprimer les CSS inutilisés" en ajoutant l'id de l'élément, le nom de la classe, etc. (#id, .class). Formatage : un par ligne.
Il est probable qu'à un moment donné, vous devrez supprimer les CSS utilisés. Par exemple, après la refonte d'une page ou après l'ajout d'un nouvel élément. Pour supprimer le CSS généré et le faire recréer lors des visites suivantes, il suffit de cliquer sur l'option en bas de "Effacer le CSS utilisé".
Vous pouvez exclure un article individuel, une page ou un type d'article personnalisé de l'utilisation de la fonction Effacer le CSS inutilisé. Dans l'éditeur, sur le côté droit, décochez "CSS inutilisé".
Cela exclura la page entière et peut être utile, par exemple, pour un panier, une caisse ou une page de contact qui pourrait avoir plus de problèmes que le reste du site.
Vous pouvez également utiliser le filtre perfmatters_remove_unused_css pour modifier l'endroit où les CSS inutilisés sont supprimés sur votre site. Cet exemple désactiverait les CSS inutilisés sur les pages uniquement.
add_filter(‘perfmatters_remove_unused_css’, function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
