Mobile Performance durch neue Lazy Loading Funktionen

Nutzbar ab: Version

Veröffentlichungsdatum: 09. April 2018
Änderungsdatum: 19. Februar 2021

weblication cms bilder lazy loading performance

Beim Lazy Loading werden Bilder erst dann geladen, wenn diese im sichtbaren Bereich sind. Während dies bei schnellen Verbindungen meist nicht nötig und teils sogar störend ist, kann es bei der Nutzung mit mobilen Geräten die Bedienung durch effektiveres Laden enorm verbessern.

Bisher mussten Sie entscheiden, ob Sie Lazy Loading generell nutzen wollen oder nicht. Nun können Sie festlegen, bis zu welcher Breite Lazy Loading eingesetzt werden soll. Es spricht damit also nichts mehr dagegen, bei mobiler Darstellung generell auf Lazy Loading zu setzen, ohne es auf dem Desktop zu nutzen.

Lazy Loading nur für die mobile Darstellung aktivieren

.elementPicture {
  ...
  -w-lazyLoad-widthMaxActive:$viewport_m_min; /* Breite, bis zu der Lazy-Loading genutzt wird */  
  ...
}

Da in der Mobile First BASE standardmäßig Picture-basierte Responsive Images eingesetzt werden, lässt sich der Lazy Loading Modus auf Breakpoint-Ebene aktivieren.

Eine weitere Optimierung besteht darin, dass die Platzhalter beim Lazy Loading bereits die richtigen Seitenverhältnisse haben, auch dann, wenn Sie Art Direction mit unterschiedlichen Bildausschnitten nutzen.

Zudem können Sie die Platzhalter, die bis zum vollständigen Laden eingeblendet werden über CSS gestalten.

FAQs

Was ist Lazy Loading bei Bildern?: Lazy Loading lädt Bilder erst dann, wenn sie im sichtbaren Bereich liegen. Dadurch wird das Laden datenintensiver Inhalte auf den Zeitpunkt verschoben, in dem der Nutzer sie tatsächlich sieht.
Warum kann Lazy Loading auf mobilen Geräten besonders hilfreich sein?: Auf schnellen Verbindungen ist Lazy Loading oft nicht nötig und kann sogar störend sein. Auf mobilen Geräten kann effektiveres Laden die Bedienung jedoch deutlich verbessern.
Kann ich Lazy Loading auf Desktop und Mobile unterschiedlich einsetzen?: Ja. Sie können festlegen, bis zu welcher Breite Lazy Loading eingesetzt werden soll. Dadurch können Sie Lazy Loading auf mobiler Darstellung nutzen, ohne es auf dem Desktop verwenden zu müssen.
Wie aktiviere ich Lazy Loading nur für die mobile Darstellung?: Per Breakpoint-basiertem Aktivieren: Im CSS wird der Lazy-Loading-Modus über die Bild-Container-Klasse konfiguriert, z. B. mit einer Einstellung wie <code class="codeInline">-w-lazyLoad-widthMaxActive:$viewport_m_min;</code> (Breite, bis zu der Lazy Loading genutzt wird).
Funktioniert die Breakpoint-Aktivierung auch mit responsive Bildern?: Ja. Da standardmäßig picture-basierte Responsive Images eingesetzt werden, lässt sich der Lazy-Loading-Modus auf Breakpoint-Ebene aktivieren.
Welche Vorteile bieten Platzhalter beim Lazy Loading?: Die Platzhalter haben bereits die richtigen Seitenverhältnisse, auch wenn Sie Art Direction mit unterschiedlichen Bildausschnitten nutzen. Dadurch wirkt die Seite stabiler, während die echten Bilder nachgeladen werden.
Kann ich das Aussehen der Lazy-Loading-Platzhalter anpassen?: Ja. Platzhalter, die bis zum vollständigen Laden eingeblendet werden, können über CSS gestaltet werden.