Supprimez les CSS inutilisés dans WordPress

 
 

Supprimez les CSS inutilisés dans WordPress

Perfmatters a ajouté une nouvelle fonctionnalité, actuellement en version bêta, 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 ?

Supprimez les CSS inutilisés dans WordPress


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.

Supprimez les CSS inutilisés dans WordPress

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es remove-unused-css-perfmatters.jpg

Une fois activé, vous trouverez trois options :

1- Delay (par défaut et recommandé).

Votre CSS utilisé devient inline et toutes les feuilles de style CSS (CSS non utilisées) sont retardées et chargées avec l’interaction de l’utilisateur.


2- Asyn

Votre CSS utilisé devient inline, et toutes les feuilles de style CSS (CSS non utilisées) sont chargées de manière asynchrone. Cette méthode permet d’é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 donnera lieu à un LCP/FCP légèrement plus élevé que le comportement de retardement précédent.


3- Delete

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. Recommandé uniquement aux utilisateurs avancés

Une fois activée, les pages et les messages se comporteront différemment.

Les pages ont tendance à avoir beaucoup de CSS uniques, et donc le CSS utilisé sera généré et inlined séparément par page lors de la première visite.
Cependant, les entrées, comme elles ont tendance à partager beaucoup de CSS, le CSS utilisé ne sera généré qu’une seule fois, lors de la première visite, et deviendra inline. La différence des entrées par rapport aux pages est que la génération du CSS utilisé n’a lieu qu’une fois.

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/

Supprimez les CSS inutilisés dans WordPress

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.

Supprimez les CSS inutilisés dans WordPress

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.

Supprimez les CSS inutilisés dans WordPress

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.

Supprimez les CSS inutilisés dans WordPress

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

Supprimez les CSS inutilisés dans WordPress


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;
});



Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados