Dein Warenkorb ist leer

Performance

Lazy Loading und Co. für Dropper und Drops

Lazy Loading

Im Editierdialog der meisten Drops kannst du den sogenannten Drop Container aktivieren. Dieser Container umspannt die Inhalte eines Drops und ermöglicht - neben der Definition einiger Darstellungsoptionen - das Aktivieren von Lazy Loading !

Lazy Loading Optionen

Via Lazy Loading kannst du die Performance und Usability deiner Seiten weiter optimieren. Dabei geben wir dir 2 Optionen an die Hand.

Inhalt vorrendern - Die Inhalte des Drops werden beim Seitenaufruf erzeugt, gerendert und an den Browser gesendet. In die entsprechende Stelle werden diese aber erst eingefügt, wenn das Drop in das Sichtfeld gelangt. Erst dann werden Bilder und andere Ressourcen des Drops vom Browser angefordert.

Via Ajax laden (leistungshungrig) - Die Inhalte des Drops werden erst erzeugt und gerendert, wenn das Drop in das Sichtfeld gelangt, nicht beim ersten Seitenaufruf. Das kann gegenüber dem Vorrendern Zeit beim Seitenaufruf einsparen (besserer TTFB - Time to first byte ), aber bei komplexeren Drops auch spürbare Verzögerungen erzeugen, wenn diese ins Sichtfeld geraten.

Best Practise

Wann genau ihr welche Methoden einetzt solltet und welche Nachteile (Serverlast!) Lazy Loading bringen kann erläutern wir im Blog .

Platzhalter

Bei beiden Optionen kannst du einen optionalen Platzhalter aktivieren und dessen Größe konfigurieren. Dieser wird immer dann angezeigt, wenn der Inhalt noch nicht geladen wurde. Im Queltext der Seite sieht dieser dann in etwas so aus:

<div class="kk-drop-lazy-load-container" ... data-lazy-load-container-drop="...">
    <div class="kk-loader"></div>
</div>

Einstellungen zu Drop Ressourcen

Viele Drops bringen eigene Ressourcen in Form von CSS- und Javascript Dateien mit. Der Browser verursacht für jede dieser Dateien eine Anfrage. Nutzt du viele verschiedene Drops auf einer Seite, kann dies von Tools wie Googles PageSpeed Insights (zurecht) bemängelt werden.

Einstellungen zur Ressourcenverwaltung

Dropper bietet dir einge globale Ressourcen-Einstellungen , mit der du bspw. die Inhalte dieser Ressourcen-Dateien direkt in den Seitenquelltext schreiben kannst . Auch ist es möglich, Javascript verpätet laden zu lassen, um die initiale Seitenladezeit zu beschleunigen.