Lazy Load Plugin

Hallo,

Ich benötige eure Hlfe! Könnt Ihr mir das aktuellste und marktbeste Lazy Load Plugin nennen? Es sollte in jedem Fall seo-freundlich sein und darf zu keinen Problemen mit Google kommen.

VIelen Dank

https://store.shopware.com/search?sSearch=lazy%20load&p=1

Ich würde auch darauf achten, dass es auch für Shopware 6 angekündigt ist.

Wenn man zumindest ein wenig an dem Template basteln mag, kann man das auch ganz einfach selber machen.
z.B. man nehme diese schöne schlanke lazyload javascript-Lösung: https://github.com/verlok/lazyload

Dann musst Du nur noch die Javascript Datei über deine theme.php Datei laden und kannst dann z.B. die Datei frontend/listing/product-box/product-image.tpl in deinem Shop-Theme ganz einfach anpassen:

{extends file="parent:frontend/listing/product-box/product-image.tpl"}

{* add lazy load to images. *}

{block name='frontend_listing_box_article_image_picture_element'}
                           
{/block}

Und schon werden die Bilder in den Kategorieübersichten und bei den Produktdetailseiten in den Reitern ‚Zubehör‘, ‚Ähnliche Produkte‘ und ‚Kunden hatten ebenfalls angesehen‘ über lazy load ausgegeben. Und dann hat man die komplette Kontrolle und könnte z.B. automatisch wenn der Rest der Seite geladen ist, die restlichen Bilder auch schon einmal laden.

@gamershq‍ hast du das so bei dir eingebaut? Leider funktioniert das ganze nicht bei mir.

Erst habe ich das Script über das Theme eingebunden. Als das nicht funktioniert hat, habe ich direkt die Datei geladen:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.2/dist/lazyload.min.js"></script>

das Template habe ich so angepasst, wie du es hier schreibst. Das deckt sich ja auch alles mit der Anleitung von GitHub - verlok/vanilla-lazyload: LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

Leider funktioniert es bei mir nicht.

Ich sehe im Network Tab nicht, dass er versucht die Bilder nachzuladen. Die URLs sind korrekt angegeben (selbst wenn nicht, würde er im Netzwerk-Tab ja wenigstens anzeigen, dass er versucht die Bilder zu laden). Ich habe das gefühl dass Script reagiert bei mir nicht auf 'class=„lazy“ ’

@Rahmspinat‍ Wie genau bist du bisher vorgegangen? Wenn ich auf github den Dowload mache, habe ich eine Zip mit etlichen Dateien und Ordnern. Die Beschreibung auf der Seite verstehe ich nicht. Wie lädt man das ins Theme?

Ich hatte zuvor noch eine andere Anleitung gefunden:

https://t3n.de/news/jquery-unveil-wahrscheinlich-475653/

unveil.js gibt es auch auf github aber wenns um funktion.js und theme.php geht, versteh ich s wieder nicht.

Hallo @Toric‍ ich habe mich letztendlich für folgendes Plugin entschieden:

Vielleicht hilft es dir auch weiter :slight_smile:

Das liest sich auf jeden Fall gut. Hat es dir eine merkliche Ladezeitverbesserung gebracht?

@Toric‍ für mich ist Lazy Loading etwas, was man haben sollte um seine Seite unkompliziert schneller zu bekommen. Direkte Ladezeitmessungen habe ich nicht vorgenommen. Ich bin aber der Meinung dass ich den nächsten Seitenaufruf schneller sehe als vorher.

Ich werde es nach dem Jahreswechsel testen.