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!
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.
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.