Dein Warenkorb ist leer

25.09.2020 JTL Shop, Dropper

Lazy Loading - Best Pratices

Wann ist Lazy Loading eigentlich sinnvoll? Welche Nachteile birgt es? Und: welche Methode passt zu meinem Szenario? Wir versuchen uns an Antworten zu diesen Fragen!

Im Zuge unseres letzten Dropper Updates haben wir den Drop Container und damit auch Lazy Loading für Drops eingeführt.

Gerade dieses Feature wird sehr gut angenommen. Wir erhalten jedoch häufig Fragen, wann Lazy Loading am besten eingesetzt werden sollte und mit welcher Methode.

Wiki: So aktiviert ihr Lazy Loading für eure Drops

In diesem Beitrag wollen wir ein paar Tipps dazu geben!

Wann auf Lazy Loading verzichten?

Lazy Loading ist kein Allheilmittel und birgt auch Nachteile, siehe weiter unten.

Verzichtet auf Lazyloading bei Drops " Above the Fold " - also bei Inhalten, die auch ohne Scrollen auf den üblichen Endgeräten sofort sichtbar sein sollen (oberer Contentbereich, Header).

Auch bei Inhalten, die primär aus Texten bestehen, solltet ihr auf Lazy Loading verzichten. Selbst wenn diese "Below the Fold" (unterer Contentbereich, Footer) eingebunden werden. Der Anteil dieser Inhalte an der gesamten Seitenladezeit eures Shops ist meist verschwindend gering und eine Optimierung nicht notwendig.

Wann Lazy Loading einsetzen?

Nutzt Lazy Loading bei komplexeren Drops "Below the Fold", also bei Drops, die beim initialen Seitenaufruf nicht sofort sichtbaren sein werden. Wie ihr herausfindet, wann ein Drop vergleichsweise komplex ist, erfahrt ihr im Abschnitt zur Drop Performance.

Welche Lazy Loading Methode am ehesten passt, erläutern wir nachfolgend.

Lazy Loading Optionen

Inhalt vorrendern

Bei dieser Methode werden Inhalte des Drops (genauer: der HTML Code) schon beim ersten Aufruf erzeugt und in den DOM der Seite geschrieben, aber noch nicht angezeigt. Das geschieht erst, wenn das entsprechende Drop in den Sichtbereich des Nutzers kommt.

Die Größe der initialen Seite verändert sich hier nicht merklicht, aber evtl. verlinkte Ressourcen wie Bilder werden erst vom Browser angefragt und übertragen, wenn es notwending ist. Dadurch werden initiale Requests und Zeit eingespart.

Ein Szenario für diese Methode wäre ein Gallery Drop, das 20 Bilder im unteren Bereich einer Startseite anzeigt. Der Aufwand zum Erzeugen des Quellcodes ist hier überschaubar. Die Menge der Anfragen und die Gesamtgröße der 20 Bilder könnte aber den Seitenaufruf spürbar verzögern und kann hier nachgelagert geschehen.

Via Ajax laden - leistungshungrig!

Beim Laden der Inhalte via Ajax wird der (HTML-) Inhalt des Drops erst dann erzeugt und in den DOM geschrieben, wenn es notwendig wird.

Ein guter Anwendungsfall: ein Article Slider Drop, das im unteren Bereich der Startseite Artikel aus einer produktreichen Kategorie darstellt und zusätzlich umfangreich filtert. Zum Erzeugen der HTML Ausgabe eines solchen Drops wird mitunter eine zeitaufwendige SQL Anfrage benötigt, und diesen Zeitaufwand kann man sich bei initialen Abfruf der Seite sparen.

Zusätzlich werden Ressourcen des Drops (genau wie beim Vorrendern der Inhalte) erst angefragt, wenn Sie in den DOM geschrieben wurden.

Warum leistungshungrig?

Bitte nutzt "Ajax nachladen" sparsam! Bei dieser Methode wird bei Bedarf je eine Anfrage an euren Server gesendet, die nahezu dieselbe TTFB (Time to first byte - also Wartezeit, bevor begonnen wird, die Antwort zurückzusenden) wie ein normaler Seitenaufruf hat! Es wird also auch noch einmal nahezu dieselbe Last auf dem Server erzeugt.

Nachteile von Lazy Loading

Werden Inhalte via Ajax nachgeladen, wird - neben dem initialen Seitenaufruf - beim Scrollen eine zusätzliche Anfrage an den Server abgesetzt. Die Anfrage hat nahezu dieselbe Wartezeit wie der initiale Seitenaufruf! Die Last auf dem Server wird erhöht, was im Extremfall (bspw. 10 Drops, die ihre Inhalte in kurzer Folge per Ajax nachladen) und bei hohem Besucheraufkommen auch deutlich spürbar werden kann.

Beim Lazy Loading werden Verzögerungen nur verlagert und sind dann evtl. bei der Navigation des Nutzers auf der Seite spürbar. Auch kann das Nachladen der Inhalte - je nach Inhalt und Position - zu unerwünschten Effekten ("Springen") führen. Um diese Effekte abzumildern, könnt ihr jedoch die Option "Platzhalter vewenden?" nutzen.

Und schließlich: um Lazy Loading zu realisieren, wird zusätzlicher Javascript Code benötigt, der die Ladezeit wiederum negativ beeinflußt.

Drop Performance prüfen

Um ein Gefühl dafür zu bekommen, welchen Einfluss deine Drops auf die Seitenladezeit haben, wirf einen Blick in den Quelltext deiner Seite. Vor jedem Drop zeigt ein HTML-Kommentar an, wie lang das Erzeugen des HTML-Codes des Drops gedauert hat.

Die Ausgabe eines einfachen Gallery Drops (kein Abfragen der JTL-Shop Datenbank):

<!-- Startseite: Gallery Footer [KK_Gallery] (0.4ms) -->
<div class="kk-gallery ...">
...
</div>

Die Ausgabe eines Article Slider Drops (inkl. Abfrage der JTL-Shop Datenbank):

<!-- Startseite: Article Slider TOP [KK_ArticleSlider] (30ms) -->
<div class="kk-item-slider-style-wrap has-nav kk-slider-horizontal" ...>
    ...
    <div class="kk-article-slider ..." ...>
    ...
    </div>
</div>

Der Unterschied zwischen den Drops ist deutlich erkennbar: die Ausgabe des Gallery Drops (0,4ms) ist deutlich schneller erzeugt als die des Article Sliders (30ms). Pagespeed Tools oder die Entwicklertools des Browsers zeigen euch wiederrum, wie hoch die gesamte Ladezeit ist.

Nutzt solche Informationen zur Einordnung und Entscheidungsfindung und vergleicht die Ergebnisse verschiedener Optionen!

Ich sehe aber keine Kommentare

Beachtet, dass HTML Kommentare oft durch Einstellungen des JTL-Shop Standard Templates EVO (Komprimierung des HTML-Ausgabedokuments), Speed-Plugins oder Server-Erweiterungen entfernt werden.

Werte für verlinkte Drops

Übrigens: nutzt ihr bspw. das Flex Layout, um eure Drops zu verlinken, werden euch sogar die Ladezeiten der enthalten Drops kummuliert angezeigt.

<!-- Startseite: Grid [KK_FlexLayout] (1.4ms + 91.2ms linked) -->
<div class="kk-flexlayout ...">
...
</div>

Fazit: nicht übertreiben

Verwendet Lazy Loading nur da, wo es Sinn macht. Prüft und vergleicht die Auswirkungen von Lazy Loading wie oben beschrieben.

Fangt nicht an, überschaubare HTML-Inhalte aus Flex Layout Spaces in separate Plain Drops auszulagern, nur um diese Bereiche verzögert laden zu können. Der Effekt wird (auch für Pagespeed-Optimierungs-Tools) nicht spürbar oder sogar nachteilig sein. Und die Übersicht im Dropper Backend wird darunter leiden.

Prüft stattdessen, welche anderen Wege der Optimierung euch noch offen stehen! Häufig gibt es auf Shopseiten viel größere Probleme, als einen SEO Text mit einigen Bildern im unteren Bereich der Startseite.

Am Ende eine Frage an euch: wie sind eure Erfahrungen mit Lazy Loading, auch und gerade mit Dropper und Drops? Schreibt uns gern!