Version 13: Mobile Performance durch neue Lazy Loading Funktionen

Veröffentlichungsdatum: 09. April 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

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, kann 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.