Inhaltsverzeichnis
Lazy Loading beschleunigt Ihren Gambio-Onlineshop (GX3/GX4 3.5 – 4.9) durch das bedarfsweise Nachladen benötigter Bilder. Insbesondere Bilder in Aufklappmenüs oder Icons im Fußbereich Ihres Shops kommen bei einem Seitenaufruf möglicherweise nie in den sichtbaren Bereich. Sowohl Google als auch Nutzer von Mobilgeräten danken Ihnen den Geschwindigkeitsgewinn durch Lazy Loading im Gambio-Modul zur Ladezeitoptimierung.
▷ Lazy Loading für Gambio GX3 & GX4
Bereiche
Natives Lazy Loading
Wegen immer breiterer Unterstützung wird natives Lazy Loading absehbar die einzige Variante werden.
Produkt-Vorschaubilder
Die Produkt-Vorschaubilder auf der Startseite oder in Kategorien sind natürlich ein relevanter Kaufanreiz. Naturgemäß verzögert Lazy Loading die Anzeige der Bilder um einige Millisekunden. Diesem meist kaum bemerkbaren, aber dennoch vorhandenem unschönen Nebeneffekt steht der große Vorteil einer schneller aufgebauten Seite gegenüber. Entscheiden Sie selbst, welche Option bzgl. der Artikel-Vorschaubilder die für Ihren Shop adäquateste ist.
Kategorie-Navigationsleiste
Dieser Bereich ist nur relevant, wenn Ihre Menüleiste mit Kategorien aufklappbar ist und sich im aufgeklappten Bereich Bilder befinden. Dann aber sollten Sie auf jeden Fall das Lazy Loading für den Bereich nutzen. Denn die Wahrscheinlichkeit ist hoch, dass der Nutzer die Aufklapp-Funktion gar nicht nutzt und Performance durch das Laden eines Bildes in einen unsichtbaren Bereich verschwendet wird.
Footer
Payment-Icons im Footer? Irgendwelche Siegel oder Logos von seriösen Shop-Zertifizierungsstellen? Das ist schön, aber die meisten Besucher schauen sich das doch eher nur ein einziges Mal an und interessieren sich ansonsten – hoffentlich – mehr für Ihr Produktsortiment.
Es genügt daher vollkommen, wenn sämtliche Grafiken im Fußbereich erst geladen werden, wenn sie durch Scrollen in den sichtbaren Bereich gelangen.
Auswahlmöglichkeiten
Nein
Prinzipiell gibt es 2 Möglichkeiten, die für die Deaktivierung des Lazy Loadings für einen bestimmten Bereich sprechen:
- Sie möchten es nicht.
- Es befinden sich keine Grafiken im entsprechenden Bereich.
Bei zweitgenannter Möglichkeit verursacht es natürlich keinen Fehler, wenn Sie Lazy Loading trotzdem aktivieren. Aber es kostet CPU, Arbeitsspeicher und unnötige Millisekunden, HTML-Code nach Bildern zu Durchsuchen, in dem gar keine sind.
Wenn im sichtbaren Bereich
Dies ist das klassische Lazy Loading. Das Modul prüft beim Laden der Seite, beim Scrollen durch den Benutzer etc., ob sich ein noch nicht geladenes Bild nun im sichtbaren Bereich befindet. Sobald dies der Fall ist, lädt es das Bild und zeigt es an. Währenddessen erscheint für wenige Sekundenbruchteile das auch von Gambio verwendete Spinner-Icon.
Zudem arbeitet das Modul mit einigen Pixeln Toleranzbereich. Müsste der Nutzer also beispielsweise nur 10 Pixel nach unten scrollen, damit das Bild in den sichtbaren Bereich gelangt, wird es dennoch schon geladen.
Bei erster Interaktion
Diese Option ist ein Kompromiss aus der vorgenannten und der nachfolgenden. Im Gegensatz zu Crawlern interagiert ein menschlicher Benutzer üblicherweise mit der Webseite. Er fährt mit der Maus darüber oder tippt darauf. Bei der ersten solchen Interaktion lädt das Modul die Bilder im entsprechenden Bereich. Direkt im sichtbaren Bereich befindliche Bilder lädt es aber bereits zuvor.
Nach Laden der Seite
Dabei handelt es sich zum Bilder-Pendant des via defer-Attribut nicht-blockierenden Ladens externer JavaScript-Ressourcen. Die Bilder werden erst geladen, wenn der Rest der Seite fertig aufgebaut ist. Die Option spart beispielsweise durch aggressive, javascript-unfähige Crawler beanspruchte Bandbreite. Hinsichtlich der Benutzerfreundlichkeit ist diese Option aber eher für Bereiche sinnvoll, die nach Laden der Seite nicht sichtbar sind, die Bilder nach Scrollen in den Bereich aber direkt zu sehen sein sollen.
Lazy Loading & PageSpeed
Zumindest hinsichtlich der Bilder im Kategorien-Aufklappbereich und dem Footer Ihres Gambio-Shops hat Google’s PageSpeed Insights völlig recht, wenn es empfiehlt: Nicht sichtbare Bilder aufschieben, um die Zeit bis zur Interaktivität zu reduzieren.
Das nach Think with Google verschobene Test My Site mit Tipps, „wie Sie eine schnellere und reibungslosere mobile Erfahrung bieten können“, schlägt in die gleiche Kerbe. Die Empfehlung lautet: Offscreen-Bilder später laden. Die bedrohlich wirkenden Grußworte, sind kaum zu widerlegen: „Eine langsame mobile Website wirkt sich negativ auf Ihr Geschäft aus.“
Egal, ob nun PageSpeed Insights, das Page-Speed-Tool von Pingdom oder Test My Site: Nutzen Sie die Optionen zum Lazy Loading, um mit dem Gambio-Modul zur Ladezeitoptimierung die Geschwindigkeit Ihres Onlineshops im Mobilfunknetz zu erhöhen.