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