Interactive Studio

Know How

Know How

Lazy Loading

Lazy Loading ist die Möglichkeit, in der Webentwicklung Werte oder Objekte bereitzustellen, sie aber erst bei einer konkreten Anfrage aufzurufen bzw. nachzuladen.

Lazy Loading bedeutet eine gute Technik, um die Performance einer bildstarken Website zu gewährleisten und zu verbessern. Dazu wird etwa ein JavaScript-Plug-in verwendet. Bilder bleiben gestochen scharf, die Website kommt aber mit einer relativ geringen Datenmenge aus. Lazy Loading ist wichtig, da es zeit- und ressourcenaufwendig ist, alle Inhalte, etwa während einer Web-Service-Request zu laden, obwohl nicht bekannt ist, welche Daten überhaupt benötigt werden. Ohne Lazy Loading löst es ständig weitere, ressourcenreiche Ladevorgänge aus. Je mehr Bilder eine Website bereithält, umso höher sind das Datenaufkommen und der Traffic. Der Browser lädt alle Ressourcen komplett, auch wenn der User nicht bis zum Footer scrollt. Das bedeutet eine wesentlich längere Ladezeit.

Der Lazy Load sorgt nun dafür, dass bei allen Bildern, die im Viewport aufkommen, das Mark-up vom Data-Attribut in ein SRC-Attribut verändert wird. Er lädt die Elemente erst dann, wenn sie in den sichtbaren Teil des Bildschirms gelangen. Das bedeutet eine wesentliche Performance-Verbesserung, weniger Traffic und eine hochdynamische Website. Zudem werden die Bilder je nach Bildschirm auch in verschiedenen Größen bereitgestellt, indem es responsiv nur die Datenmenge herunterlädt, um das Bild richtig darzustellen.

Das Gegenteil von Lazy Loading ist das Eager Loading.

Begierde Wissen

insights

insights