Comment ajouter un lazy load sur les images dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment optimiser le chargement des images dans Webflow avec le lazy loading natif.

1. Activez le lazy load natif dans Webflow

Dans le Designer Webflow, sélectionnez votre image. Dans le panneau Settings, réglez le champ Loading sur Lazy. C'est la méthode la plus simple et la plus performante : aucun JavaScript requis.

2. Optimisez les images above-the-fold

Les images visibles immédiatement au chargement (hero, logo) doivent être en Loading: Eager pour ne pas retarder leur affichage. Le lazy load est contre-productif sur ces éléments et peut dégrader votre score LCP.

3. Ajoutez une animation d'apparition au chargement

Pour un effet fade-in au chargement des images lazy, ajoutez ce CSS dans un embed :

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

document.querySelectorAll('img[loading="lazy"]').forEach(function(img) {
  img.addEventListener('load', function() { img.classList.add('loaded'); });
  if (img.complete) img.classList.add('loaded');
});

Conclusion

Le lazy loading réduit le temps de chargement initial et améliore les Core Web Vitals. Cas d'usage :

• Pages avec de nombreuses images (portfolio, galerie)
• Pages de blog avec images dans les articles
• Collections CMS avec thumbnails