Le lazy loading (chargement différé) est une technique qui consiste à ne charger les images et ressources d'une page web que lorsqu'elles sont sur le point d'être affichées à l'écran, plutôt que de tout charger d'un coup au moment du premier rendu. Pour les boutiques e-commerce avec des dizaines ou centaines d'images de produits, cette optimisation réduit drastiquement le poids initial de la page et améliore les performances perçues par les visiteurs.
Comment fonctionne le lazy loading ?
Sans lazy loading, le navigateur télécharge toutes les images présentes dans le HTML dès le chargement initial — y compris celles situées en bas de page que le visiteur ne verra peut-être jamais. Avec le lazy loading, seules les images visibles dans la fenêtre d'affichage (viewport) ou à proximité immédiate sont chargées. Les autres restent en attente jusqu'à ce que l'utilisateur fasse défiler la page vers elles.
Le résultat est immédiat : la page s'affiche plus vite, moins de données sont consommées, et le serveur reçoit moins de requêtes simultanées. Sur une page de listing de produits PrestaShop avec 40 articles, cela peut réduire le nombre d'images chargées au départ de 40 à 6 ou 8 seulement — un gain de poids considérable.
Le lazy loading natif HTML : l'attribut loading="lazy"
Depuis 2019-2020, tous les navigateurs modernes supportent nativement le lazy loading via un simple attribut HTML sur la balise img : `loading="lazy"`. Il suffit d'ajouter cet attribut pour que le navigateur gère automatiquement le chargement différé, sans JavaScript ni bibliothèque tierce.
Exemple : `
`. La spécification des attributs width et height est importante : elle permet au navigateur de réserver l'espace dans la mise en page avant que l'image ne soit chargée, ce qui évite les décalages visuels (CLS — Cumulative Layout Shift).
L'approche JavaScript : l'API Intersection Observer
Avant le support natif, et encore aujourd'hui pour des cas d'usage avancés, le lazy loading était implémenté via l'API JavaScript Intersection Observer. Cette API permet de détecter précisément quand un élément du DOM entre dans le viewport, et de déclencher alors le chargement de l'image. Cette approche offre plus de contrôle : on peut définir une marge de déclenchement (par exemple, commencer à charger 300px avant que l'image entre à l'écran) pour éliminer tout effet de « flash » visuel.
Ne jamais lazy-loader les images above-the-fold !
Impact sur les Core Web Vitals
Le lazy loading bien appliqué améliore plusieurs métriques Core Web Vitals. Il réduit le poids total chargé au départ, ce qui améliore le LCP (Largest Contentful Paint) pour les images above-the-fold — le navigateur consacre sa bande passante aux ressources prioritaires au lieu de la disperser sur toutes les images de la page. Il réduit aussi le TBT (Total Blocking Time) en diminuant les traitements réseau initiaux.
En revanche, mal appliqué — notamment en lazy-loadant l'image hero — il peut faire exploser le LCP. C'est l'une des erreurs les plus fréquentes constatées sur les boutiques PrestaShop auditées : un thème qui applique loading="lazy" à toutes les images sans distinction, dégradant ainsi précisément la métrique qu'on cherche à améliorer.
Google indexe-t-il les images en lazy loading ?
Oui. Googlebot est capable de voir et d'indexer les images chargées en lazy loading. Google a confirmé que son crawler exécute le JavaScript et attend le déclenchement des chargements différés. Il est toutefois recommandé d'utiliser le lazy loading natif HTML (attribut loading) plutôt qu'une implémentation JavaScript personnalisée pour garantir une indexation optimale.
Lazy loading et CDN : une combinaison gagnante
Lazy loading dans PrestaShop
PrestaShop ne propose pas de lazy loading natif activable en un clic dans le back-office. La mise en place dépend du thème utilisé. Les thèmes récents (Classic 1.7+, Hummingbird) intègrent généralement l'attribut loading="lazy" sur les images de listing. Si votre thème ne le prévoit pas, il faut soit modifier les templates Smarty concernés, soit installer un module dédié.
- Images de listing (catégories, recherche, nouveautés) : idéales pour le lazy loading — elles sont souvent en dehors du viewport initial
- Image principale de la fiche produit : NE PAS lazy-loader — c'est souvent le LCP de la page
- Miniatures dans le panier ou les blocs « produits associés » : lazy loading recommandé
- Bannières hero en page d'accueil : NE PAS lazy-loader, utiliser fetchpriority="high"
- Images dans les avis clients ou contenus accordéon : lazy loading recommandé