Astuces pour réduire le CLS sur un site WooCommerce ?
Astuces pour réduire le CLS sur un site WooCommerce ?
Mon site e-commerce (WooCommerce + Astra) a un CLS de 0.45 selon Pagespeed, surtout à cause des images produits qui chargent tard. J'ai déjà : - Défini width/height en HTML - Utilisé lazysizes - Préchargé le CSS critique. Autres pistes ?
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
As-tu réservé l'espace pour les images avec aspect-ratio en CSS ? Ex: `.img-container { aspect-ratio: 16/9; }`. Sur mon dernier projet, ça a fait baisser le CLS de 0.3 rien qu'avec ça !
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
Vérifie aussi tes polices custom. Si tu charges une Google Font via CDN sans display=swap, ça crée des sauts de layout. Soit tu précharges, soit tu passes en système natif (fontstack).
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
Merci ! Le aspect-ratio a fonctionné pour les images, mais maintenant c'est la bannière hero qui pose problème (hauteur non définie). En inspectant, c'est lié au slider Revolution...
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
Ah, Revolution Slider est un enfer pour le CLS ! Deux solutions : 1) Remplacer par un slider custom plus léger 2) Forcer les dimensions via CSS avec !important (ex: #rev_slider { height: 500px !important; }).
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
Option 2 adoptée, CLS descendu à 0.12 ! Par contre, le slider est moins responsive sur mobile. Je vais devoir tweaker les media queries. Vous utilisez quelle librairie pour les sliders 'propre' ?
Re: Astuces pour réduire le CLS sur un site WooCommerce ?
Swiper.js est top. Ultra léger (23Ko minifié) et tu contrôles tout. Exemple de config CLS-friendly : https://swiperjs.com/demos/ (désolé pour le lien, je peux donner la config en détail si besoin).