Les images en lazy load affectent-elles les conversions ?

La réponse courte

Le lazy loading améliore généralement les conversions en accélérant le temps de chargement initial. Exception : les images au-dessus du fold (visibles sans scroll) doivent charger immédiatement.

Qu’est-ce que le lazy loading ?

Le lazy loading charge les images uniquement quand elles entrent dans le viewport (zone visible de l’écran).

Sans lazy load	Avec lazy load
Toutes les images chargées d’un coup	Images chargées au scroll
Page lente au départ	Page rapide au départ
Bande passante gaspillée	Ressources optimisées

Impact sur les conversions

Effets positifs

Bénéfice	Impact conversion
Temps de chargement réduit	+7% par seconde gagnée
Moins de rebond	+10-15%
Meilleure UX mobile	+5-10%
Core Web Vitals améliorés	SEO indirect

Risques potentiels (si mal implémenté)

Problème	Conséquence
Images produit en lazy load	Client voit placeholder
Hero image en lazy load	Mauvaise première impression
Pas de dimensions définies	Layout shift (CLS)

Bonnes pratiques

1. Ne PAS lazy loader au-dessus du fold

<!-- Hero image : chargement immédiat -->
<img src="hero.webp" alt="..." fetchpriority="high">

<!-- Images en dessous : lazy load -->
<img src="produit.webp" alt="..." loading="lazy">

2. Toujours définir les dimensions

<!-- Évite le layout shift -->
<img
  src="image.webp"
  alt="Description"
  loading="lazy"
  width="400"
  height="300"
>

3. Utiliser un placeholder

.lazy-image {
  background-color: #f0f0f0;
  background-image: url('placeholder-blur.webp');
  background-size: cover;
}

Implémentation

HTML natif (recommandé)

<img src="image.webp" loading="lazy" alt="Description">

Supporté par tous les navigateurs modernes.

JavaScript (pour plus de contrôle)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Cas spécifiques e-commerce

Pages catégories (grilles produits)

<!-- 4 premiers produits : visibles immédiatement -->
<img src="produit-1.webp" alt="..." fetchpriority="high">
<img src="produit-2.webp" alt="...">
<img src="produit-3.webp" alt="...">
<img src="produit-4.webp" alt="...">

<!-- Le reste : lazy load -->
<img src="produit-5.webp" alt="..." loading="lazy">
<!-- etc. -->

Page produit

Image	Lazy load ?
Image principale	Non
Galerie (autres angles)	Oui
Produits similaires	Oui
Avis clients avec photos	Oui

Mesurer l’impact

Avant/après lazy loading

Métrique	À mesurer
LCP (Largest Contentful Paint)	Doit diminuer
CLS (Cumulative Layout Shift)	Doit rester < 0.1
Taux de rebond	Doit diminuer
Temps sur page	Doit augmenter

Outils

• PageSpeed Insights : Vérifie si lazy load est recommandé
• Chrome DevTools > Network : Voir le chargement des images
• Lighthouse : Score performance

Checklist lazy loading

• Images au-dessus du fold : chargement immédiat
• Images sous le fold : loading="lazy"
• Dimensions width/height définies
• Placeholders pour éviter le vide
• Test sur mobile avec connexion lente
• Vérifier CLS dans PageSpeed

Pour aller plus loin

• Checklist CRO 2025 : les 10 optimisations incontournables
• Guide complet du CRO pour l’e-commerce
• CRO spécialisé Shopify
• Toutes les questions du guide CRO