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. 🎄✨
L'article présente une technique CSS pour créer des placeholders d'images flous (LQIP) avec un minimum de balisage, nécessitant seulement une propriété CSS personnalisée. Cette méthode utilise un entier pour encoder les informations de couleur et de luminosité, permettant de générer des placeholders sans JavaScript ni éléments supplémentaires. L'approche est minimaliste et efficace, bien que les résultats soient très flous comparés à d'autres solutions. L'article explore également différentes techniques de LQIP et explique comment cette méthode CSS se distingue par sa simplicité et son intégration facile.
Tout est dans le titre
Utilisation des placeholder pendant le chargement du contenu de votre site (via https://stephaniewalter.design/fr/blog/semaine-pixels-5-aout-2016/ )
Le principe du skeleton-screen est d'afficher des placeholders le temps de récupérer les données d'une page - c'est utile surtout pour les SPA
Tout est dans le titre
Tout est dans le titre (via https://blog.stephaniewalter.fr/semaine-pixels-17-novembre-2017/ )
Un truc génial : vous définissez un attribut placeholder, et lorsque l'internaute clique sur le champ à remplir, le contenu de l'attribut se retrouve visible au dessus (via inpixelwetrust)