Réglages CSS dans vos plugins de cache pour optimiser le CLS

[tibiz]

Je me disais que cela serait sympa d'avoir plus retours à partager ensemble à propos des CLS, car faire des tests prend du temps, quand l'on voit le grand nombre d'option des plugins de cache comme Wp-Rocket ou Litespeed. Désactiver une option, vider le cache, tester, désactiver une option, vider le cache, tester... Bref vous avez compris.

Quels sont les réglages CSS qui vous ont permis de réduire le CLS sur votre site ?

A priori il est déconseillé d'utiliser le chargement asynchrone du CSS. Pour le reste j'aimerai avoir des éclaircissements, on lit tout et son contraire sur internet. La combinaison des CSS serait également déconseillé en 2024.

Je vous rappelle le but de ce post : faire baisser nos scores CLS. Car il me paraît évident que le référencement est directement lié à ce paramètre. Et indirectement, à travers le taux de rebond par exemple.

Merci à vous !

 

[Marie-Aude]

Je recommande la lecture de cet excellent article, très complet

https://www.easyhoster.com/pagespeed-wp-rocket-alternatives/

Il y a un peu d'autopromo par son auteur, c'est normal, mais tout est hyper détaillé... et fonctionne chez tous les bons hébergeurs !

 

[pomination]

Bonjour,
A mon sens, dès lors que l'on est pas le développeur de la solution (typiquement, usage d'un thème WP), c'est un exercice délicat pour optimiser le CSS et le JS.
Je ne connais pas d'outils qui permette d'afficher, à coup sûr, les CSS ou JS non utilisés sur une page donnée.
Par exemple, avec la fonctionnalité Coverage de Chrome Dev Tools, il ne suffit pas de charger la page, il faut l'afficher dans toutes les dimensions possibles, utiliser tous les menus, etc. pour que Chrome détecte réellement ce qui est utilisé ou non.

Donc, au final, dès lors qu'on utilise un thème WP, on reste fortement dépendant de la qualité du dev et de la sensibilité des dev à tenir compte de cette optimisation.

La combinaison des CSS c'est en effet plus utile avec HTTP2, et c'est contre productif si on veut effectivement sélectionner les CSS autorisés ou non sur une page.
Je sais que, Divi, par exemple, intègre une fonctionnalité de génération des CSS à la volée pour n'embarquer que le code nécessaire à une page donnée mais je ne sais pas si c'est efficace.
Le plugin de cache LiteSpeed propose quelque chose de similaire avec sa fonctionnalité UCSS, mais, pour avoir essayé, c'est très casse gueule, et ça demande un gros travail d'analyse pour affiner et faire en sorte que tout fonctionne, avec, souvent, peu de gains à la clé..

 

[tibiz]

ok merci pour vos retours

Effectivement c'est fastidieux, d'où la création de ce post... L'UCCS prend un peu de temps à être généré en plus je crois, ce qui complique encore plus la tâche pour tester tout cela...