Tag: OpenCart-Geschwindigkeit verbessern

Implementierung von Lazy Loading für Produktbilder in OpenCart

In der heutigen internetgeprägten Welt erwarten Nutzer, dass Websites sofort laden. Kunden wünschen sich, dass Seiten schnell geladen werden, wenn sie Ihre Website besuchen. OpenCart Website. Kunden könnten verärgert reagieren und Ihr Unternehmen könnte Umsatzeinbußen erleiden, wenn Ihre Produktseiten zu lange zum Laden benötigen, insbesondere auf Mobilgeräten, wo die Internetgeschwindigkeit möglicherweise langsamer ist.

Große oder zahlreiche Grafiken sind häufig die Hauptursache für langsame Seitenladezeiten. Produktfotos können zwar große Dateien sein, sind aber ein wesentlicher Bestandteil jeder E-Commerce-Website. Lazy Loading kann hier Abhilfe schaffen.

Die Leistungsherausforderung bei E-Commerce-Websites

Die E-Commerce-Spots von Moment sind ausgesprochen visuell. Ein normaler Auftragsbearbeiter kann haben

  • 20-50 Bilder des Produkts
  • Banner
  • Miniaturansichten und Symbole
  • Abschnitte zu verwandten Produkten

Wenn alle Bilder gleichzeitig geladen werden, muss der Browser jedes Bild einzeln laden, bevor die Seite vollständig interaktiv ist. Dies führt zu Folgendem:

  • First Contentful Paint (FCP) in langsamerem Tempo
  • Erhöhte Interaktionszeit 
  • Schlechte Leistung auf Mobilgeräten
  • Eine höhere Serverlast
  • Erhöhte Abprallraten

Das Nutzererlebnis wird dadurch erheblich beeinträchtigt, insbesondere in langsameren Netzwerken.

Was ist Lazy Loading?

Die Technik des sogenannten „Lazy Loading“ verzögert das Laden von Bildern (oder anderen Inhalten), bis diese tatsächlich benötigt werden, typischerweise dann, wenn ein Nutzer sie durch Scrollen in den sichtbaren Bereich verschieben möchte. Im Gegensatz zum gleichzeitigen Laden aller Bilder wartet Lazy Loading, bis der Nutzer bereit ist, das Bild anzuzeigen.

Lazy Loading bietet folgende Vorteile:

  • Bandbreitenerhaltung
  • Bessere Leistung auf Mobilgeräten
  • Verbesserte Suchmaschinenoptimierung und wichtige Webelemente
  • Schnelles Laden der ersten Seite

Wenn auf Produktseiten viele Bilder gleichzeitig geladen werden müssen, ist Lazy Loading besonders hilfreich.

Warum Lazy Loading wichtig ist

Stellen Sie sich vor, Sie blättern durch einen Produktkatalog. Selbst wenn sich die Produktbilder weit unterhalb des sichtbaren Bereichs befinden, versucht Ihr Browser beim herkömmlichen Laden, sie alle gleichzeitig zu laden. Beim Lazy Loading werden zunächst nur die Bilder geladen, die sich im oder in der Nähe des sichtbaren Bildschirmbereichs befinden. Die restlichen Bilder werden nach und nach geladen, während der Betrachter scrollt.

Sowohl Ihre Kunden als auch Suchmaschinen wie Google, die Webseiten bevorzugen, die schnell laden, profitieren von einem schnelleren und reibungsloseren Nutzererlebnis.

Praxisbeispiel: Kategorieseite ohne Lazy Loading

Betrachten Sie dieses Beispiel:

24 Produkte auf einer Kategorieseite, Jedes Vorschaubild = 150 KB, Gesamtbildgewicht = 3.6 MB

Bevor überhaupt Banner, CSS und JavaScript geladen werden, muss der Browser fast 4 MB an Bildern herunterladen.

Nehmen wir nun an, der Besucher hat nur bis zur Hälfte der Seite gescrollt. Die Hälfte der Bilder wurde nie angesehen, aber trotzdem heruntergeladen. Daher ist tDas ist verschwendete Bandbreite und 0Hier kommt das Lazy Loading ins Spiel.

Lazy Loading und Core Web Vitals

Web Vitals. Folgende Bereiche sind von großen Bildern direkt betroffen:

  • Farbe mit dem größten Inhaltsstoff (LCP)
  • Verschiebung im kumulativen Layout (CLS)
  • Nächste Farbinteraktion (INP)

Das korrekte, langsame Laden von Bildern verbessert die Leistungskennzahlen, insbesondere auf Produkt- und Kategorielistenseiten.

Dennoch gibt es eine wichtige Sache zu beachten.

 Bilder oberhalb der Verpackung, wie beispielsweise das Hauptproduktbild auf einer Produktdetailseite, sollten nicht verzögert geladen werden.

Wann sollte man Lazy Loading anwenden?

Lazy Loading eignet sich am besten für:

  • Produktlistenseiten
  • Kategorieseiten
  • Blog-Übersichtsseiten
  • Herstellerseiten
  • Upselling-Abschnitte

Es ist möglicherweise nicht die beste Lösung für:

  • Heldenbanner oberhalb der Falz
  • Hauptproduktbild auf der Produktseite
  • Wichtige visuelle Elemente der Markenbildung

Wie man Lazy Loading in OpenCart implementiert

Methode 1: Lazy Loading in nativen Browsern

Moderne Browser verwenden die Eigenschaft “loading=”lazy”, um integriertes verzögertes Laden zu ermöglichen.

Ejemplo:

<img src=”image.jpg” Laden=”faul” alt=”Produktbild”>

OpenCart-Schritte:

  • Öffnen Sie Ihre Designdatei:
Version Dateipfad
OpenCart 2.x catalog/view/theme/your_theme/template/product/category.tpl
OpenCart 3.x catalog/view/theme/your_theme/template/product/category.twig
OpenCart 4.x catalog/view/template/product/category.twig
  • Suchen Sie das Produktbild -Tag.
  • Ändern Sie es wie folgt:

Vorher:

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

     title="{{ product.name }}">

Nach:
<img src="{{ product.thumb }}"Laden="faul"  alt="{{ product.name }}" width="300" height="300"     title="{{ product.name }}">

Das ist alles. JavaScript ist nicht erforderlich. Außerdem ist dies der einfachste und sauberste Weg.

Methode 2: Verwendung von lazysizes (Am besten geeignet für die Unterstützung älterer Browser)

Schritte:

  1. Füge das lazysizes-Skript hinzu:
     
    

    2. 

  2.  Öffnen Sie Ihre Theme-Datei entsprechend der in Methode 1 genannten OpenCart-Version und aktualisieren Sie das Bild-Markup:
    3. 



    

  • Vorher:
    
    

    

    • 

  • Nach:
    
    

    

    • 



Methode 3: Verwendung der Intersection Observer API (Erweiterte Steuerung)




Moderne JavaScript-API für bessere Kontrolle.


Ejemplo:


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


const observer = new IntersectionObserver((entries, observer) => {


  entries.forEach(entry => {


if (entry.isIntersecting) {


   const img = entry.target;


   img.src = img.dataset.src;


      observer.unobserve(img);


}


  });


});


 


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


Diese Methode ermöglicht die vollständige Kontrolle über das Ladeverhalten.


Wichtig: AJAX-basierte Produktfilterung


Wenn Produkte dynamisch per AJAX geladen werden:


Ureinwohner Laden=”faul” Funktioniert automatisch.


Wenn Sie jedoch verwenden lazysizes, Kreuzungsbeobachter dann Sie müssen das Lazy Loading erneut auslösen, nachdem die AJAX-Inhalte geladen wurden.


Ejemplo:


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

    lazySizes.autoSizer.checkElems();

});

Andernfalls werden neu eingefügte Bilder möglicherweise nicht korrekt geladen.


Die besten Methoden für Lazy Loading in OpenCart


✔ Vermeiden Sie es, Bilder oberhalb des sichtbaren Bereichs zu laden.


✔ Achten Sie darauf, dass Ihre Bilder die richtige Größe haben; vermeiden Sie die Verwendung von zu großen Vorschaubildern.


✔ Verwenden Sie immer PageSpeed ​​Insights zum Testen; optimieren Sie Bilder für das WebP-Format.


✔ Testen Sie immer mit PageSpeed ​​Insights.


✔ Nach der Änderung der Vorlage sollte der OpenCart-Cache geleert werden.


Leistungsmessung vor und nach der Implementierung


Um die Auswirkungen von Lazy Loading zu bewerten, befolgen Sie diese Schritte:


Vor der Implementierung


Testen Sie Ihre Kategorieseite und erfassen Sie die folgenden Kennzahlen:


    

  • Seitengröße
    • 

  • Ladezeit der Seite
    • 

  • Core Web Vitals-Werte
    • 



Nach der Implementierung


Führen Sie die gleichen Tests erneut durch und vergleichen Sie die Ergebnisse. Sie sollten Folgendes beobachten:


    

  • Verkürzte anfängliche Ladezeit
    • 

  • Niedrigere Gesamtblockierungszeit (TBT)
    • 

  • Verbesserte Lighthouse-Leistungsbewertung
    • 



Die in diesem Leitfaden beschriebenen Implementierungsoptionen – von nativen HTML-Attributen über Lazy Loading bis hin zur Intersection Observer API – bieten Lösungen für jeden technischen Komplexitätsgrad. Egal, ob Sie einen kleinen Boutique-Shop betreiben oder einen stark frequentierten Katalog mit mehreren Kategorien verwalten: Es gibt einen Ansatz, der Ihren Bedürfnissen entspricht. Beginnen Sie mit Methode 1 für sofortige Ergebnisse und erweitern Sie Ihre Anforderungen mit komplexeren Methoden. Leistungsoptimierung ist keine einmalige Aufgabe, sondern ein kontinuierliches Engagement. Kombinieren Sie Lazy Loading mit Bildkomprimierung, WebP-Konvertierung und effizientem Caching, um das volle Geschwindigkeitspotenzial Ihres OpenCart-Shops auszuschöpfen.


Über Knowband


Knowband ist ein vertrauenswürdiger Anbieter von E-Commerce-Plugins und -Erweiterungen mit jahrelanger Erfahrung in der Unterstützung von Online-Händlern beim Aufbau schnellerer, intelligenterer und funktionsreicherer Shops. Egal, ob Sie Ihren Shop auf einer Webplattform betreiben. PrestaShop, OpenCartShopify, WooCommerce, MagentoOb für iOS oder andere gängige Plattformen – Knowband bietet eine breite Palette an sofort einsatzbereiten Plugins und Erweiterungen, mit denen Sie die Funktionalität verbessern, die Leistung steigern und ein besseres Einkaufserlebnis bieten können, ohne von Grund auf neu entwickeln zu müssen. Neben Plugins bietet Knowband auch umfassende Softwarelösungen. Webseitenentwicklung und mobile App-Entwicklung Knowband bietet Ihnen umfassende Dienstleistungen. Ob Sie einen komplett individuell gestalteten Onlineshop, eine maßgeschneiderte Shopping-App für iOS und Android oder eine individuelle Integration in Ihre bestehenden Systeme benötigen – das Entwicklerteam von Knowband verfügt über das nötige Knowband-Knowband, um Ihre Vision Wirklichkeit werden zu lassen. Möchten Sie Ihren OpenCart-Shop oder eine andere E-Commerce-Plattform weiter optimieren? Dann entdecken Sie den Plugin-Marktplatz von Knowband oder kontaktieren Sie unser Team, um eine individuelle Lösung zu besprechen, die perfekt auf Ihre Geschäftsziele zugeschnitten ist. Kontaktieren Sie uns unter support@knowband.com für Dienstleistungen in den Bereichen individuelle Plugin-Entwicklung, Webseitenentwicklung und Entwicklung mobiler Apps.