Forum Info & Tech

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 ?

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 !

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

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

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

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' ?

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