Lazy Loading

Einführung

Lazy Loading ist ein Entwurfsmuster und eine Optimierungstechnik, bei der das System Ressourcen nur bei Bedarf lädt. Anstatt alles zu laden, wenn die Seite zum ersten Mal geladen wird, verbessert Lazy Loading die Ladezeiten und die Leistung der Seite. Dies ist besonders nützlich für Seiten mit viel Inhalt unterhalb des Falzes, den Benutzer möglicherweise nicht nach unten scrollen, um ihn zu sehen.

Eager Loading holt und lädt alle Ressourcen sofort, wenn die Seite geladen wird, unabhängig vom unmittelbaren Bedarf. Dies kann die anfängliche Ladezeit der Seite verlangsamen. Lazy Loading beschleunigt die Seite, indem nicht kritische Ressourcen nur geladen werden, wenn der Browser sie benötigt.

Entwickler verwenden Lazy Loading häufig für Bilder. Es kann auch auf JavaScript-Dateien, CSS oder andere nicht wesentliche Inhalte für die anfängliche Seitenansicht angewendet werden. Diese Methode spart Netzwerk- und Rechenressourcen und sorgt für ein schnelleres Benutzererlebnis, indem diese Ressourcen nur bei Bedarf geladen werden.

Vorteile von Lazy Loading

Die Hauptvorteile der Implementierung von Lazy Loading sind:

Schnellere anfängliche Ladezeiten: Lazy reduziert die anfängliche Ladezeit der Seite, indem nur die Ressourcen abgerufen und gerendert werden, die für den Benutzer sofort sichtbar sind. Diese Optimierung hilft, das Benutzererlebnis und die Leistung zu verbessern. Dies ermöglicht ein schnelleres anfängliches Rendern der Seite.
Reduzierter Bandbreiten- und Ressourcenverbrauch: Lazy lädt Ressourcen nur, wenn der Benutzer sie benötigt. Wenn ein Benutzer niemals zu einem lazy-geladenen Bild scrollt, wird dieses Bild niemals abgerufen, was sowohl beim Benutzer als auch auf Serverseite Bandbreite spart.
Verbesserte Leistung: Durch die Reduzierung der Datenmenge, die sofort geladen werden muss, belastet Lazy die Netzwerkverbindung, den Prozessor und den Speicher des Benutzers weniger. Dies führt zu einer besseren Gesamtleistung und Reaktionsfähigkeit, insbesondere bei langsameren Netzwerken oder Geräten mit geringerer Leistung.
Besseres Benutzererlebnis: Schnellere Ladezeiten und verbesserte Leistung führen zu einem positiveren und ansprechenderen Benutzererlebnis. Benutzer können schneller mit der Seite interagieren und erleben weniger Verzögerungen oder Lags.

Allerdings ist Lazy Loading nicht immer die beste Methode für jede Situation. Für wesentliche Ressourcen, die auf der Seite oder oberhalb des Falzes liegen, könnte Eager Loading vorzuziehen sein, um sicherzustellen, dass sie sofort verfügbar sind. Lazy Loading ist möglicherweise auch nicht notwendig für kleine oder leichtgewichtige Ressourcen, bei denen der Aufwand für die Implementierung von Lazy Loading die Vorteile überwiegt.

Eager vs. Lazy Loading

Bei der Entscheidung zwischen Lazy und Eager Loading sollten Sie folgende Punkte berücksichtigen:

Sichtbarkeit: Wenn eine Ressource für den Benutzer sofort oberhalb des Falzes sichtbar ist, könnte Eager Loading die bessere Wahl sein, um Verzögerungen beim Laden dieses Inhalts zu vermeiden. Lazy Loading eignet sich besser für Ressourcen, die unterhalb des Falzes erscheinen oder Benutzerinteraktionen erfordern, um angezeigt zu werden.
Wichtigkeit: Kritische Ressourcen, auf die die Seite angewiesen ist, sollten eager geladen werden, um Verzögerungen zu vermeiden. Sekundäre oder optionale Ressourcen sind gute Kandidaten für Lazy Loading.
Größe: Lazy Loading ist am vorteilhaftesten für große oder schwere Ressourcen, die erheblich lange Ladezeiten haben. Kleinere Ressourcen können den Aufwand für Lazy Loading nicht rechtfertigen.
Benutzerverhalten: Berücksichtigen Sie, wie Benutzer normalerweise mit der Seite interagieren. Wenn Analysen zeigen, dass die meisten Benutzer nach unten scrollen und Inhalte unterhalb des Falzes anzeigen, könnte Eager Loading für einige dieser Inhalte eine bessere Erfahrung bieten. Wenn wenige Benutzer scrollen, minimiert Lazy Loading unnötige Downloads.
Netzwerkgeschwindigkeit: In langsameren Netzwerken bietet Lazy Loading größere Leistungsverbesserungen, indem die anfängliche Downloadgröße reduziert wird. In schnelleren Netzwerken könnte Eager Loading weniger schädlich für das Benutzererlebnis sein.

Das richtige Gleichgewicht zwischen Eager und Lazy Loading hängt von den spezifischen Merkmalen und Anforderungen jeder Seite oder Anwendung ab. Leistungstests und die Überwachung realer Nutzungsmetriken können helfen, den Ansatz zu optimieren.

Lazy Loading Implementierungsmethoden

Es gibt mehrere Möglichkeiten, Lazy Loading in Webseiten zu implementieren:

JavaScript: Mit JavaScript können Sie erkennen, wann ein Element in den Ansichtsbereich gelangt, und die zugehörige Ressource dynamisch laden. Bibliotheken wie lazysizes oder lazyload erleichtern dies. Beispiel:

<img data-src="image.jpg" class="lazyload">

lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazyload"
});

Intersection Observer API: Die Intersection Observer API bietet eine native Möglichkeit, zu erkennen, wann ein Element in den Ansichtsbereich gelangt und eine Aktion wie das Auslösen eines Ladevorgangs auszuführen. Beispiel:

let observer = new IntersectionObserver(callback, options);
observer.observe(element);

HTML Attribute: Moderne Browser unterstützen das Lazy Loading von Bildern nativ mit dem Attribut loading=”lazy”. Beispiel:

<img src="image.jpg" loading="lazy" alt="...">

CSS: Mit CSS-Techniken können Platzhalter-Skelette erstellt werden, die angezeigt werden, während der Inhalt geladen wird. Beispiel:

css

.lazy-loaded {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

HTTP/2 Server Push: HTTP/2 bietet einen Server-Push-Mechanismus, bei dem der Server Ressourcen proaktiv an den Client senden kann, um zukünftige Anfragen vorherzusehen. Obwohl nicht strikt Lazy Loading, kann dies zu einem ähnlichen Effekt verwendet werden.

Die Wahl der Lazy Loading Methode hängt von den spezifischen Anforderungen, Überlegungen zur Browserunterstützung und der gesamten Architektur der Anwendung ab.

Lazy Loading von Bildern

Bilder sind vorrangige Kandidaten für Lazy Loading, da sie oft einen erheblichen Teil des Gewichts einer Seite ausmachen. Es gibt mehrere Möglichkeiten, Bilder lazy zu laden:

Native loading Attribut: Die einfachste Methode ist die Verwendung des nativen loading Attributs des Browsers. Setzen Sie loading=”lazy” in das <img>-Tag:

<img src="image.jpg" alt="..." loading="lazy">

JavaScript: Verwenden Sie JavaScript, um zu überprüfen, ob sich das Bild im Ansichtsbereich befindet, und setzen Sie das src Attribut dynamisch:

<img data-src="image.jpg" alt="...">
<script>
  const images = document.querySelectorAll('img[data-src]');
  const loadImage = (image) => {
    image.setAttribute('src', image.getAttribute('data-src'));
    image.onload = () => { image.removeAttribute('data-src'); };
  };
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  };
  const options = { rootMargin: '0px 0px 500px 0px' };
  const observer = new IntersectionObserver(callback, options);
  images.forEach(image => observer.observe(image));
</script>

CSS: Verwenden Sie CSS, um einen Platzhaltereffekt zu erstellen, während das Bild geladen wird:

html

<div class="lazy-image">
  <img data-src="image.jpg" alt="...">
</div>

css

.lazy-image {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

Denken Sie daran, geeigneten Alt-Text für die Barrierefreiheit bereitzustellen und sich auf Fehlerszenarien einzustellen.

Fazit

Lazy Loading ist eine wertvolle Technik zur Verbesserung der Leistung und des Benutzererlebnisses von Webseiten, indem das Laden nicht kritischer Ressourcen aufgeschoben wird, bis sie benötigt werden. Es kann die anfänglichen Ladezeiten erheblich reduzieren, Bandbreite sparen und die Gesamtleistung verbessern.

Bei der Entscheidung, ob Lazy Loading verwendet werden soll, sollten Sie Faktoren wie die Sichtbarkeit und Bedeutung der Ressource, ihre Größe, das typische Benutzerverhalten und die Netzwerkbedingungen berücksichtigen. Finden Sie ein Gleichgewicht zwischen Lazy und Eager Loading basierend auf den spezifischen Anforderungen Ihrer Seiten.

Lazy Loading kann mit verschiedenen Methoden implementiert werden, wie JavaScript, der Intersection Observer API, nativen HTML-Attributen, CSS-Techniken oder serverseitigen Optimierungen wie HTTP/2 Server Push.

Bilder werden häufig lazy geladen, aber die Technik kann auf jede Art von Inhalt oder Ressource angewendet werden, um das Laden und die Leistung zu optimieren.

Durch die Reduzierung von Datenübertragungen und die Optimierung des Ressourcenladens verbessert Lazy Loading nicht nur die Leistung, sondern kann auch dazu beitragen, potenzielle Datenlecks oder Datenpannen zu mildern, die durch das Übertragen unnötig vieler Daten entstehen können.