Seitenaufbau mit Lazy Loading beschleunigen

27. Jul 2016

Insbesondere in Seiten mit vielen Bildern und und beim Abruf über Smartphones beschleunigt Lazy Loading den Seitenaufbau erheblich, da die Bilder erst geladen werden, wenn sie in den sichtbaren Bereich gelangen. In Weblication® können Sie Lazy Loading standardmäßig verwenden

  • im Bildelement
  • in Listen
  • im Teaser, Banner, Slider

Wir stellen Ihnen nachfolgend die Möglichkeiten im Weblication® Standard vor.

Lazy Loading im Bildelement nutzen

Je Bild können Sie einstellen, ob dieses erst geladen wird, wenn es im Anzeigebereich liegt. Der folgende Screenshot zeigt rot umrahmt, wo Sie die Einstellung im Bildelement vornehmen.

Ein-/Ausschalten können Sie die Nutzungsmöglichkeit von Lazy Loading in Projekteinstellungen unter "Bilder".

Beim Einsatz von HD-Bildern, werden auch diese berücksichtigt und abhängig vom Device-Pixel-Ratio des Endgerätes geladen, sobald sie sichtbar sind.

Lazy Loading im Bildelement nutzen
Lazy Loading im Bildelement nutzen

Lazy Loading im Listenelement nutzen

Auch in Listen kann eingestellt werden, dass Bilder erst im sichtbaren Bereich geladen werden. Der folgende Screenshot zeigt rot umrahmt, wo Sie die Einstellung bei Listen vornehmen.

Beim Einsatz von HD-Bildern, werden auch diese berücksichtigt und abhängig vom Device-Pixel-Ratio des Endgerätes geladen, sobald sie sichtbar sind.

Lazy Loading im Listenelement nutzen
Lazy Loading im Listenelement nutzen

Lazy Loading im Teaser, Banner, Slider

Der Teaser, Banner, Slider unterstützt Lazy Loading über CSS-Only:

-w-editmaskExtended-lazyload:yes

Das ist dann nützlich, wenn mehrere Banner pro Seite oder unterschiedliche Banner für unterschiedliche Bildschirmbreiten eingesetzt werden.