Bedienungsanleitung Modul-Funktionen

Modul-Installation und -Konfiguration

Lazyloading und Testen im Browser

Browser Testing: Firefox
Browser Testing: Chrome
Konfigurativer Ausschluss einzelner Bilder
Lazyload Strategie
Lazyloading of Youtube iframes
Lazyloading of Background images

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: 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

Konfigurativer Ausschluss einzelner Bilder

Navigieren Sie im Magento Admin Panel zur Seitenübersicht Content >> Pages
Wählen Sie eine die Seite aus und editieren Sie diese mit PageBuilder
Wählen Sie ein Bild auf der Seite aus und setzen Sie bei den Optionen unter Advanced als CSS-Klasse nolazyload
Das Element ist nun vom Lazyloading ausgeschlossen

Lazyload Strategie

Navigieren Sie im Magento Admin Panel zu den Moduleinstellungen TechDivision >> Performance & Images >> Lazyload
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.

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

HTML Attribut Javascript

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.

<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

Navigieren Sie im Magento Admin Panel zur Seitenübersicht Techdivision >> Lazyload
Öffnen Sie die YouTube iframe Section
Aktivieren Sie LazyLoading für Youtube-IFrames.
Falls Sie die Videos erst beim Click auf das Video laden möchten aktivieren Sie Load YouTube iframe on click
Falls Sie möchten, dass das Vorschaubild von YouTube geladen wird, aktivieren Sie Load YouTube Preview Image from YouTube

Lazyloading of Background images

Navigieren Sie im Magento Admin Panel zur Seitenübersicht `Techdivision >> Lazyload `
Aktivieren Sie die Konfiguration Enable lazy loading of background images unter der Section Background Images