Lazy Loading
Technique chargeant les images et médias uniquement quand l'utilisateur scrolle jusqu'à leur position.
Le lazy loading (chargement différé) est une technique de performance web qui retarde le chargement des images et médias hors écran jusqu'à ce que l'utilisateur scrolle vers eux.
Comment l’implémenter proprement
L’attribut loading égal lazy sur les balises image et iframe couvre la majorité des besoins sans script. Pour les contenus plus lourds, carrousels, cartes ou vidéos intégrées, un observateur d’intersection déclenche le chargement quelques centaines de pixels avant l’entrée dans l’écran. Prévoyez toujours une largeur et une hauteur déclarées pour réserver l’espace. Contrôlez ensuite le rendu sur un réseau bridé, pas uniquement en local.
Pourquoi ça peut dégrader le LCP
Différer l’image principale du bandeau est le contresens le plus répandu : le navigateur la découvre tard et votre plus grand élément visible s’affiche après coup. Règle simple : tout ce qui est visible sans scroll se charge normalement, voire en priorité haute, et le différé commence sous la ligne de flottaison. Vérifiez ensuite le LCP mobile sur les gabarits à fort trafic.
Cas limites à surveiller
Attention aux images placées dans un contenu injecté par script, parfois invisibles pour les robots d’indexation. Attention aussi aux listes très longues où le chargement au scroll fait sauter la page, et aux clients de messagerie qui ignorent l’attribut. Enfin, testez le comportement en connexion lente : un placeholder qui ne se remplit jamais vaut moins qu’une image compressée.
Exemple concret
Une boutique affiche 45 visuels par page de catégorie, soit 4,2 Mo. En différant tout ce qui se trouve sous la ligne de flottaison, le poids initial tombe à 1,1 Mo et le LCP mobile passe de 4,1 à 2,4 secondes, sous le seuil recommandé.
Termes associés
LCP
Largest Contentful Paint. Mesure la vitesse de chargement du contenu principal d'une page. Google recommande < 2,5 secondes.
Core Web Vitals
Signaux web essentiels. Métriques Google mesurant la performance UX : LCP, INP et CLS.
Cache
Stockage temporaire de données pour accélérer les chargements suivants et réduire la charge serveur.
Responsive Design
Design adaptatif s'adaptant automatiquement à toutes les tailles d'écran.
Mobile-First
Approche de conception priorisant l'expérience mobile avant le desktop.
Mockup
Maquette visuelle. Représentation haute-fidélité du design final d'une page.
Lazy Loading en pratique : UX & Design
Pour aller au-delà de la définition, découvrez notre expertise conversion et parcours.