Lazy Loading en 2026 : ce que les navigateurs gèrent nativement vs ce qui nécessite un module

Lazy Loading en 2026 : ce que les navigateurs gèrent nativement vs ce qui nécessite un module

Le lazy loading est une technique d'optimisation des performances qui diffère le chargement des ressources hors écran jusqu'à ce que l'utilisateur défile vers elles. En 2026, le support natif du lazy loading par les navigateurs a considérablement mûri, mais il existe encore des scénarios où les propriétaires de boutiques PrestaShop ont besoin de modules supplémentaires ou d'implémentations personnalisées. Ce guide explique exactement ce que les navigateurs gèrent seuls, quelles lacunes subsistent et comment implémenter la meilleure stratégie de lazy loading pour votre boutique PrestaShop.

Ce que le lazy loading natif couvre en 2026

L'attribut HTML loading="lazy" est maintenant supporté par plus de 95% des navigateurs dans le monde. Cela inclut Chrome (depuis v77), Firefox (depuis v75), Safari (depuis v15.4), Edge (depuis v79) et tous les navigateurs basés sur Chromium.

Comment fonctionne le lazy loading natif

Ajouter loading="lazy" à une balise <img> ou <iframe> indique au navigateur de différer le chargement de cette ressource jusqu'à ce qu'elle soit à une certaine distance du viewport.

<img src="image-produit.jpg" 
     loading="lazy" 
     width="800" 
     height="600" 
     alt="Nom du produit">

Ce que les navigateurs gèrent nativement

Ce que les navigateurs NE gèrent PAS

Implémenter le lazy loading natif dans PrestaShop

Pour les thèmes PrestaShop 8.x et 9.x

Les thèmes PrestaShop modernes (comme Hummingbird pour PS 9) incluent souvent le lazy loading natif par défaut. Pour vérifier ou l'ajouter, éditez vos fichiers de template.

{* Avant - pas de lazy loading *}
<img src="{$product.cover.bySize.home_default.url}" 
     alt="{$product.name}">

{* Après - avec lazy loading natif *}
<img src="{$product.cover.bySize.home_default.url}" 
     loading="lazy" 
     width="{$product.cover.bySize.home_default.width}"
     height="{$product.cover.bySize.home_default.height}"
     alt="{$product.name}">

Règle critique : ne jamais lazy loader les images above-the-fold

L'erreur de lazy loading la plus courante est de l'appliquer aux images visibles sans défilement. Cela nuit en fait aux performances car le navigateur retarde le chargement du contenu que l'utilisateur voit immédiatement. Les Core Web Vitals de Google vous pénaliseront avec un score LCP plus élevé.

Images qui ne doivent PAS être lazy loadées :

• Le logo de votre boutique
• Les images hero/bannière en haut de page
• Les 1-2 premières images produits sur les pages catégorie

<img src="hero-banner.jpg" 
     loading="eager" 
     fetchpriority="high" 
     width="1200" 
     height="400" 
     alt="Bannière promotion été">

Quand vous avez besoin d'un module : images d'arrière-plan CSS

Les thèmes PrestaShop utilisent fréquemment des images d'arrière-plan CSS pour les sliders, bannières et en-têtes de catégorie. L'attribut loading="lazy" ne fonctionne pas pour les fonds CSS. Vous avez besoin de JavaScript.

document.addEventListener('DOMContentLoaded', function() {
    const lazyBackgrounds = document.querySelectorAll('[data-bg]');
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.style.backgroundImage = 'url(' + entry.target.dataset.bg + ')';
                observer.unobserve(entry.target);
            }
        });
    }, { rootMargin: '200px 0px' });
    lazyBackgrounds.forEach(function(bg) { observer.observe(bg); });
});

Quand vous avez besoin d'un module : effets de placeholder

• Effet blur-up (LQIP) - Chargez d'abord une version minuscule et floue
• Écrans squelettes - Blocs de placeholder gris correspondant aux dimensions
• Placeholders de couleur dominante - Utilisez la couleur dominante de l'image comme fond

Impact sur la performance et les Core Web Vitals

• LCP - Le lazy loading des images above-the-fold NUIT au LCP
• CLS - Les images sans attributs width/height causent des décalages de mise en page
• INP - Moins de ressources chargées simultanément améliorent l'interactivité

Indispensable : attributs width et height

<!-- MAUVAIS - cause un décalage de mise en page -->
<img src="produit.jpg" loading="lazy" alt="Produit">

<!-- BON - réserve l'espace -->
<img src="produit.jpg" loading="lazy" 
     width="400" height="400" alt="Produit">

Recommandations spécifiques PrestaShop

Pages de liste de produits

Lazy loader toutes les images produits sauf la première rangée. Appliquer fetchpriority="high" à la première rangée.

Pages de détail produit

L'image principale doit être chargée en eager avec fetchpriority="high". Les miniatures de la galerie peuvent être lazy loadées.

Page d'accueil

Les images du slider above the fold doivent être chargées en eager. Les blocs de modules below the fold doivent utiliser le lazy loading.

Résumé : Module vs. Natif