Andrea Verlicchi, expert en performance web, aborde dans cet article l’optimisation du Cumulative Layout Shift (CLS) pour les pages utilisant le défilement infini ou le bouton « Charger plus ». Il identifie deux causes majeures de CLS : les bannières promotionnelles retardées et le chargement dynamique de contenu (typique des sites e-commerce), qui déplace le pied de page hors de la vue et dégrade l’expérience utilisateur.
Pour le défilement infini, la solution consiste à insérer des squelettes (placeholders) dès le début de la requête, réservant ainsi l’espace nécessaire avant l’affichage du contenu réel, évitant tout saut de mise en page. Pour le bouton « Charger plus », bien qu’un délai de 500 ms après le clic soit toléré, il recommande aussi d’utiliser des squelettes pour garantir une stabilité visuelle, quel que soit le temps de réponse du réseau.
La règle d’or ? Ne jamais déplacer le contenu visible pendant le défilement et toujours réserver l’espace à l’avance, sauf après une interaction utilisateur explicite (clic), en respectant la fenêtre de 500 ms. Une approche simple mais efficace pour améliorer les Core Web Vitals et l’expérience utilisateur. 🎄✨
