Mise en œuvre du chargement différé des images de produits dans OpenCart

Dans le monde actuel, dominé par Internet, les utilisateurs s’attendent à ce que les sites web se chargent instantanément. Les clients souhaitent que les pages se chargent rapidement lorsqu’ils visitent votre site. OpenCart Si le chargement de vos pages produits est trop long, notamment sur les appareils mobiles où la connexion internet est plus lente, vos clients risquent de s’irriter et votre entreprise de perdre des revenus.

Les images volumineuses ou nombreuses sont souvent la principale cause de la lenteur du chargement des pages. Les photos de produits peuvent être des fichiers volumineux, mais elles sont un élément essentiel de tout site e-commerce. Le chargement différé peut y remédier.

Le défi de la performance sur les sites de commerce électronique

Les publicités e-commerce de Moment sont véritablement visuelles. Un livreur de commandes standard peut avoir

• 20 à 50 photos du produit
• Bannières
• Vignettes et icônes
• Sections sur les produits connexes

Si toutes les images sont chargées simultanément, le navigateur devra charger chaque image avant que la page ne soit totalement interactive. Cela entraîne :

• First Contentful Paint (FCP) à un rythme plus lent
• Temps d’interaction accru 
• Performances médiocres sur les appareils mobiles
• Une charge serveur plus élevée
• Augmentation des taux de rebond

L’expérience utilisateur sera fortement impactée, notamment sur les réseaux plus lents.

Qu’est-ce que le chargement paresseux?

La technique dite de « chargement différé » retarde le chargement des images (ou autres contenus) jusqu’à ce qu’elles soient réellement nécessaires, généralement lorsque l’utilisateur est prêt à les visualiser en faisant défiler la page. Le chargement différé attend que l’utilisateur soit prêt à afficher l’image avant de la charger, contrairement au chargement de toutes les images simultanément.

Le chargement différé présente les avantages suivants :

• Conservation de la bande passante
• Performances améliorées sur les appareils mobiles
• Référencement amélioré et éléments web essentiels
• Chargement rapide de la première page

Lorsque de nombreuses images peuvent se charger simultanément sur les pages produits, le chargement différé est particulièrement utile.

Pourquoi le chargement différé est important

Imaginez que vous consultiez un catalogue de produits. Même si les images des produits se trouvent loin en bas de page, votre navigateur tentera de toutes les charger simultanément avec le chargement traditionnel. Seules les images situées dans ou à proximité de la partie visible de l’écran seront chargées initialement avec le chargement différé. Les autres images se chargeront progressivement au fur et à mesure du défilement de la page.

Vos clients et les moteurs de recherche comme Google, qui apprécient les sites web à chargement rapide, bénéficieront d’une expérience plus rapide et plus fluide.

Exemple concret : page de catégorie sans chargement différé

Prenons cet exemple:

24 produits sur une page de catégorie, Chaque vignette = 150 Ko, Poids total de l’image = 3.6 Mo

Avant même de charger les bannières, le CSS et le JavaScript, le navigateur doit télécharger près de 4 Mo d’images.

Imaginons maintenant que le visiteur n’ait fait défiler la page que jusqu’à la moitié. La moitié des images n’ont jamais été vues, mais ont tout de même été téléchargées. Par conséquent, tIl s’agit de bande passante gaspillée et de 0C’est là qu’intervient le chargement différé.

Chargement différé et éléments essentiels du Web

Éléments vitaux du Web. Les éléments suivants sont directement impactés par les images de grande taille :

• Peinture à très grande contenance (LCP)
• Décalage dans la configuration cumulative (CLS)
• Interaction de peinture suivante (INP)

Le chargement progressif et correct des images améliorera les indicateurs de performance, notamment sur les pages de listes de produits et de catégories.

Il y a toutefois une chose importante à garder à l’esprit

 Les images situées au-dessus de l’emballage, comme l’image principale du produit sur une fiche produit détaillée, ne doivent pas être chargées de manière différée.

Quand appliquer le chargement différé ?

Le chargement différé est particulièrement adapté à :

• pages de liste de produits
• Pages de catégorie
• Pages de liste de blogs
• Pages des fabricants
• sections de vente incitative

Cela pourrait ne pas convenir à :

• Bannières de héros au-dessus du pli
• Image principale du produit sur la page produit
• Éléments visuels essentiels de l’image de marque

Comment implémenter le chargement différé dans OpenCart

Méthode 1 : Chargement différé dans les navigateurs natifs

Les navigateurs modernes utilisent la propriété loading=”lazy” pour fournir un chargement différé intégré.

Exemple :

<img src=”image.jpg” chargement=”paresseux” alt=”Image du produit”>

Étapes d’OpenCart :

• Ouvrez votre fichier de thème :

• Localisez l’image du produit Étiquette.
• Modifiez-le comme suit :

Avant:

<img src="{{ product.thumb }} alt="{{ product.name }}"  width="300"  height="300"

     titre="{{ nom.produit }}">

Après:

<img src="{{ product.thumb }}"chargement="paresseux"  alt="{{ product.name }}" width="300" height="300"     titre="{{ nom.produit }}">

C’est tout. JavaScript n’est pas nécessaire. De plus, c’est la méthode la plus simple et la plus propre.

Méthode 2 : Utilisation de lazysizes (Idéale pour la compatibilité avec les navigateurs plus anciens)

Étape:

1. Ajoutez le script lazysizes :
   

2. Ouvrez votre fichier de thème en fonction de la version d’OpenCart mentionnée dans la méthode 1 et mettez à jour le balisage de l’image :

• Avant:
  

• Après:
  

Méthode 3 : Utilisation de l’API Intersection Observer (Contrôle avancé)

API JavaScript moderne pour un meilleur contrôle.

Exemple :

const images = document.querySelectorAll(“img[data-src]”);

const observer = new IntersectionObserver((entrées, observer) => {

  entrées.forEach(entrée => {

si (entrée.isIntersecting) {

   const img = entrée.cible;

   img.src = img.dataset.src;

      observer.désobserver(img);

}

  });

});

images.forEach(img => observer.observe(img));

Cette méthode permet un contrôle total du comportement de chargement.

Important : Filtrage des produits basé sur AJAX

Lorsque les produits sont chargés dynamiquement via AJAX :

Originaire chargement=”paresseux” fonctionne automatiquement.

Cependant, si vous utilisez tailles paresseuses, Observateur d’intersection puis Vous devez réactiver le chargement différé après le chargement du contenu AJAX.

Exemple :

document.addEventListener('ajaxComplete', function() {

    lazySizes.autoSizer.checkElems();

});

Sinon, les images nouvellement injectées risquent de ne pas se charger correctement.

Les meilleures méthodes pour le chargement différé dans OpenCart

✔ Évitez de charger les images situées au-dessus de la ligne de flottaison.

✔ Assurez-vous que vos images sont de la bonne taille ; évitez d’utiliser des vignettes trop grandes.

✔ Utilisez toujours PageSpeed ​​Insights pour tester ; optimisez les images au format WebP.

✔ Testez toujours avec PageSpeed ​​Insights

✔ Après avoir modifié le modèle, videz le cache d’OpenCart.

Mesurer les performances avant et après la mise en œuvre

Pour évaluer l’impact du chargement différé, suivez ces étapes :

Avant la mise en œuvre

Testez votre page de catégorie et enregistrez les indicateurs suivants :

• Taille de la page
• Temps de chargement de la page
• Scores Core Web Vitals

Après la mise en œuvre

Relancez les mêmes tests et comparez les résultats. Vous devriez observer :

• Temps de chargement initial réduit
• Temps de blocage total réduit (TBT)
• Amélioration du score de performance de Lighthouse

Les options d’implémentation décrites dans ce guide, des attributs HTML natifs au chargement différé et à l’API Intersection Observer, offrent des solutions adaptées à tous les niveaux de complexité technique. Que vous gériez une petite boutique ou un catalogue multi-catégories à fort trafic, il existe une approche qui répond à vos besoins. Commencez par la méthode 1 pour des résultats immédiats, puis passez à des méthodes plus avancées à mesure que vos besoins évoluent. L’optimisation des performances est un processus continu et non une action ponctuelle. Combinez le chargement différé avec la compression d’images, la conversion WebP et une mise en cache appropriée pour exploiter pleinement le potentiel de votre boutique OpenCart.

À propos de Knowband

Knowband est un fournisseur de plugins et d’extensions e-commerce de confiance, fort d’une longue expérience dans l’accompagnement des e-commerçants pour la création de boutiques en ligne plus rapides, plus intelligentes et plus riches en fonctionnalités. Que votre boutique soit hébergée sur [plateforme manquante], Knowband est là pour vous. PrestaShop, OpenCartShopify, WooCommerce, MagentoQue ce soit pour Android ou toute autre plateforme majeure, Knowband propose une vaste gamme de plugins et d’extensions prêts à l’emploi qui vous permettent d’améliorer les fonctionnalités, les performances et l’expérience d’achat, sans avoir à tout développer de zéro. Au-delà des plugins, Knowband propose également une solution complète. développement de sites web et développement d’applications mobiles Services. Que vous ayez besoin d’une boutique en ligne entièrement personnalisée, d’une application mobile d’achat sur mesure pour iOS et Android, ou d’une intégration personnalisée à vos systèmes existants, l’équipe de développeurs de Knowband possède l’expertise nécessaire pour concrétiser votre vision. Si vous souhaitez optimiser davantage votre boutique OpenCart ou toute autre plateforme e-commerce, explorez la plateforme de plugins Knowband ou contactez notre équipe pour discuter d’une solution personnalisée adaptée à vos objectifs commerciaux. Contactez-nous à l’adresse suivante : [email protected] pour le développement de plugins personnalisés, le développement de sites web et les services de développement d’applications mobiles.