Pourquoi le lazy loading est devenu indispensable
Chaque seconde compte sur le web. Selon Google, 53 % des visiteurs mobiles quittent une page si elle met plus de 3 secondes à s’afficher. Or, sur une page classique, les images représentent en moyenne 50 à 70 % du poids total.
Le principe du lazy loading (ou chargement différé) est simple : ne charger les ressources visuelles — images et vidéos — que lorsque l’utilisateur s’apprête réellement à les voir. Résultat :
- 40 à 60 % de données économisées au chargement initial
- Un meilleur score Largest Contentful Paint (LCP)
- Moins de requêtes serveur simultanées
- Une expérience utilisateur fluide, surtout sur mobile
Implémenter le lazy loading sur les images
La méthode native HTML (recommandée)
Depuis 2020, les navigateurs modernes supportent nativement l’attribut loading="lazy". C’est la méthode la plus simple et la plus performante :
<img src="photo-produit.webp" alt="Description du produit" width="800" height="600" loading="lazy">Trois points essentiels à respecter :
- Toujours renseigner
widthetheightpour éviter les décalages de mise en page (CLS) - Ne jamais appliquer le lazy loading aux images au-dessus de la ligne de flottaison (hero banner, logo, image LCP)
- Privilégier les formats modernes comme WebP ou AVIF pour combiner lazy loading et compression
Sur WordPress et Prestashop
WordPress applique automatiquement loading="lazy" à toutes les images depuis la version 5.5. Sur Prestashop, l’implémentation dépend du thème utilisé. Chez Lueur Externe, agence certifiée Prestashop, nous auditons systématiquement ce paramètre lors de nos optimisations e-commerce.
Pour vérifier si le lazy loading est actif sur votre site, ouvrez l’inspecteur de votre navigateur (F12) et cherchez l’attribut loading sur vos balises <img>.
Lazy loading des vidéos : le gain souvent négligé
Une iframe YouTube pèse environ 800 Ko à 1,5 Mo de ressources (scripts, images miniatures, tracking). Sur une page contenant 3 vidéos intégrées, cela représente facilement 3 à 4 Mo de chargement inutile.
Méthode 1 : l’attribut natif sur les iframes
<iframe src="https://www.youtube.com/embed/ID_VIDEO" loading="lazy" title="Titre de la vidéo"></iframe>Simple et efficace, cette approche est supportée par 92 % des navigateurs actuels.
Méthode 2 : la façade légère (lite embed)
Pour aller plus loin, remplacez l’iframe par une image miniature cliquable. L’iframe ne se charge qu’au clic de l’utilisateur. Des bibliothèques comme lite-youtube-embed (seulement 1 Ko) permettent de passer de 800 Ko à moins de 50 Ko au chargement initial.
Mesurer l’impact réel sur votre site
Après implémentation, utilisez ces outils pour quantifier les gains :
| Outil | Ce qu’il mesure |
|---|---|
| Google PageSpeed Insights | Score LCP, CLS et recommandations lazy loading |
| WebPageTest | Cascade de requêtes avant/après |
| Chrome DevTools (onglet Network) | Nombre de requêtes et poids au chargement initial |
Sur les projets que nous accompagnons chez Lueur Externe, l’activation combinée du lazy loading images + vidéos génère en moyenne une amélioration de 15 à 25 points sur le score PageSpeed mobile.
Conclusion : un quick win à ne pas négliger
Le lazy loading fait partie des optimisations à fort impact et faible effort. Quelques lignes de code suffisent pour alléger considérablement vos pages et améliorer vos Core Web Vitals.
Mais attention : mal configuré — notamment sur l’image LCP — il peut produire l’effet inverse. L’idéal reste de combiner cette technique avec un audit complet de performance.
Vous souhaitez accélérer votre site web ? Les experts de Lueur Externe réalisent un audit de performance complet et implémentent les optimisations adaptées à votre CMS. Contactez-nous pour en discuter.