Bedienungsanleitung Modul-Funktionen

Modul-Installation und -Konfiguration

Lazyloading und Testen im Browser

Browser Testing: Firefox

  • Navigieren Sie zum Browser >> Firefox

  • Öffnen Sie bitte Firebug >> Netzwerkanalyse >> Grafiken

  • Sichtbaren Bereich neu laden und scrollen

  • Dabei sollten dann schrittweise in der Netzwerkanalyse die nachgeladenen Bilder angezeigt werden im Analyse Tool

Browser Testing: Firefox

Browser Testing: Chrome

  • Navigieren Sie zum Browser >> Chrome

  • Öffnen Sie bitte Developer Tool und navigieren zu Developer Tool >> Network >> img

  • Sichtbaren Bereich neu laden und scrollen

    • Dabei sollten dann schrittweise in der Netzwerkanalyse die nachgeladenen Bilder angezeigt werden im Network Tool

Browser Testing: Chrome

Konfigurativer Ausschluss einzelner Bilder

  1. Navigieren Sie im Magento Admin Panel zur Seitenübersicht Content >> Pages

  2. Wählen Sie eine die Seite aus und editieren Sie diese mit PageBuilder

  3. Wählen Sie ein Bild auf der Seite aus und setzen Sie bei den Optionen unter Advanced als CSS-Klasse nolazyload

    Konfigurativer Ausschluss einzelner Bilder
    Konfigurativer Ausschluss einzelner Bilder
  4. Das Element ist nun vom Lazyloading ausgeschlossen

Lazyload Strategie

  1. Navigieren Sie im Magento Admin Panel zu den Moduleinstellungen TechDivision >> Performance & Images >> Lazyload

  2. Wählen Sie die gewünschte Einstellung der Option Use HTML-Lazyload

    Seit Version 2.2.0/3.1.0 kann die Lazy-Load-Strategie konfigurativ eingestellt werden.

  3. Das Lazyloading wird wie folgt umgesetzt und der HTML-Dom gerendert:

    HTML Attribut Javascript
    <span class="product-image-container product-image-container-99" style="width: 240px;">
        <span class="product-image-wrapper">
            <img class="product-image-photo"
                 src="https://lazy/99.jpg"
                 loading="lazy"
                 width="240" height="300"
                 alt="Simple Product 99">
        </span>
    </span>
    <span class="product-image-container product-image-container-99" style="width: 240px;">
        <span class="product-image-wrapper">
            <img class="product-img lazyloaded"
                 src="https://lazy.test/99.jpg"
                 width="240" height="300"
                 alt="Simple Product 99"
                 data-src="https://lazy/99.jpg">
        </span>
    </span>

    Mit der HTML-Strategie wird das HTML-Attribut loading gesetzt. Das Nachladen übernimmt dann der Browser selbst.

    Diese Option wird nicht vollumfänglich von allen Browser unterstützt!

    Hier eine Übersicht für die Unterstützung.

    Der Vorteil dieser Strategie ist eine Performance-Verbesserung, da weniger Javascript-Dateien geladen und ausgeführt werden.

    Mit der Javascript-Strategie wird die data-src gesetzt. Nachdem der DOM geladen wurde, setzt das Javascript die src sobald das Bild im Sichtbereich des Browsers ist. Des Weiteren wird noch die CSS-Klasse lazyloaded gesetzt.

    Der Vorteil dieser Strategie ist die Kompatibilität zu allen Browsern.

Lazyloading of Youtube iframes

  1. Navigieren Sie im Magento Admin Panel zur Seitenübersicht Techdivision >> Lazyload

  2. Öffnen Sie die YouTube iframe Section

  3. Aktivieren Sie LazyLoading für Youtube-IFrames.

  4. Falls Sie die Videos erst beim Click auf das Video laden möchten aktivieren Sie Load YouTube iframe on click

  5. Falls Sie möchten, dass das Vorschaubild von YouTube geladen wird, aktivieren Sie Load YouTube Preview Image from YouTube

Lazyloading of Background images

  1. Navigieren Sie im Magento Admin Panel zur Seitenübersicht `Techdivision >> Lazyload `

  2. Aktivieren Sie die Konfiguration Enable lazy loading of background images unter der Section Background Images