Startseite
Wissenszentrum
Lazy Loading erklärt: Optimierung der Ressourcenladezeiten

Lazy Loading erklärt: Optimierung der Ressourcenladezeiten

Einführung

Lazy Loading ist ein Entwurfsmuster und eine Optimierungstechnik, bei der das System Ressourcen nur bei Bedarf lädt. Anstatt alles beim ersten Laden der Seite zu laden, verbessert Lazy Loading die Ladezeiten und die Performance der Seite. Dies ist besonders nützlich für Seiten mit viel Inhalt unterhalb der sichtbaren Fläche, den die Benutzer möglicherweise nicht herunterscrollen, um ihn zu sehen.

Eager Loading lädt und holt alle Ressourcen sofort, sobald 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 erst geladen werden, wenn der Browser sie benötigt.

Entwickler verwenden Lazy Loading häufig für Bilder. Es kann auch für JavaScript-Dateien, CSS oder jeden nicht wesentlichen Inhalt für die erste Seitenansicht angewendet werden. Diese Methode schont Netzwerk- und Computerressourcen, indem sie dafür sorgt, dass diese Ressourcen nur bei Bedarf geladen werden, was zu einem schnelleren Benutzererlebnis führt.

Vorteile von Lazy Loading

Die Hauptvorteile der Implementierung von Lazy Loading sind:

Schnellere initiale Ladezeiten: Lazy Loading reduziert die anfängliche Ladezeit der Seite, indem es nur die Ressourcen lädt und rendert, die für den Benutzer sofort sichtbar sind. Diese Optimierung trägt zur Verbesserung des Benutzererlebnisses und der Performance bei. Dadurch wird eine schnellere Erstdarstellung der Seite erreicht.
Geringerer Bandbreiten- und Ressourcenverbrauch: Lazy Loading lädt Ressourcen nur dann herunter, wenn der Benutzer sie benötigt. Wenn ein Benutzer niemals zu einem lazy-geladenen Bild scrollt, wird dieses Bild nie abgerufen, was Bandbreite sowohl für den Benutzer als auch für den Server spart.
Verbesserte Performance: Durch die Reduzierung der Datenmenge, die von Anfang an geladen werden muss, wird die Belastung der Netzwerkverbindung, des Prozessors und des Speichers des Benutzers verringert. Dies führt zu einer insgesamt besseren Performance und Reaktionsfähigkeit, insbesondere bei langsameren Netzwerken oder leistungsschwächeren Geräten.
Besseres Benutzererlebnis: Schnellere Ladezeiten und verbesserte Performance führen zu einem positiveren und ansprechenderen Benutzererlebnis. Benutzer können früher mit der Seite interagieren und erleben weniger Verzögerungen oder Ruckler.

Allerdings ist Lazy Loading nicht immer die beste Methode für jede Situation. Für Ressourcen, die für die Seite kritisch sind oder oberhalb der sichtbaren Fläche 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 leichte Ressourcen, bei denen der Implementierungsaufwand den Nutzen überwiegt.

Eager vs. Lazy Loading

Wenn Sie sich zwischen Lazy Loading und Eager Loading entscheiden, bedenken Sie Folgendes:

Sichtbarkeit: Wenn eine Ressource sofort sichtbar für den Benutzer oberhalb der sichtbaren Fläche 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 der sichtbaren Fläche liegen oder erst durch eine Benutzerinteraktion angezeigt werden.
Bedeutung: Kritische Ressourcen, von denen die Seite abhängt, sollten sofort 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, deren Laden signifikante Zeit in Anspruch nimmt. Kleinere Ressourcen lohnen den zusätzlichen Aufwand für Lazy Loading unter Umständen nicht.
Benutzerverhalten: Berücksichtigen Sie, wie Benutzer typischerweise mit der Seite interagieren. Wenn Analysen zeigen, dass die meisten Benutzer nach unten scrollen und Inhalte unterhalb der sichtbaren Fläche betrachten, könnte das Vorausladen (Eager Loading) einiger dieser Inhalte zu einem besseren Erlebnis führen. Wenn nur wenige Benutzer scrollen, minimiert Lazy Loading unnötige Downloads.
Netzwerkgeschwindigkeit: Bei langsameren Netzwerken bietet Lazy Loading größere Performance-Vorteile, da die anfängliche Downloadgröße reduziert wird. Bei schnelleren Netzwerken könnte Eager Loading weniger nachteilig für das Benutzererlebnis sein.

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

Implementierungsmethoden für Lazy Loading

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

JavaScript: Mit JavaScript können Sie feststellen, wann ein Element in den sichtbaren Bereich eintritt, und dessen 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 sichtbaren Bereich eintritt, und eine Aktion wie das Auslösen eines Ladevorgangs zu veranlassen. Beispiel:

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

HTML-Attribute: Moderne Browser unterstützen 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 lädt. 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, in Erwartung zukünftiger Anfragen. Auch wenn dies nicht streng genommen Lazy Loading ist, kann es verwendet werden, um einen ähnlichen Effekt zu erzielen.

Die Wahl der Methode für Lazy Loading hängt von den spezifischen Anforderungen, Browserunterstützungen und der Gesamtarchitektur der Anwendung ab.

Lazy Loading von Bildern

Bilder sind ideale Kandidaten für Lazy Loading, da sie häufig einen erheblichen Anteil am Gewicht einer Seite ausmachen. Es gibt einige Möglichkeiten, Bilder lazy zu laden:

Native loading-Attribut: Der einfachste Weg ist die Verwendung des nativen loading-Attributs des Browsers. Setzen Sie loading=”lazy” im <img>-Tag:

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

JavaScript: Nutzen Sie JavaScript, um zu überprüfen, ob sich das Bild im sichtbaren Bereich 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 Platzhaltereffect zu erzeugen, während das Bild lädt:

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, einen angemessenen Alt-Text für die Zugänglichkeit bereitzustellen und Fehlerfälle angemessen zu behandeln.

Fazit

Lazy Loading ist eine wertvolle Technik, um die Performance und das Benutzererlebnis von Webseiten zu verbessern, indem das Laden nicht kritischer Ressourcen bis zu dem Moment aufgeschoben wird, in dem sie benötigt werden. Es kann die anfänglichen Ladezeiten der Seite erheblich verkürzen, Bandbreite sparen und die Gesamtleistung verbessern.

Bei der Entscheidung, ob Lazy Loading eingesetzt werden soll, sollten Faktoren wie die Sichtbarkeit und Bedeutung der Ressource, deren Größe, das typische Benutzerverhalten und die Netzwerkbedingungen berücksichtigt werden. Finden Sie ein ausgewogenes Verhältnis zwischen Lazy Loading und Eager Loading, basierend auf den spezifischen Bedürfnissen Ihrer Seiten.

Lazy Loading kann mit verschiedenen Methoden implementiert werden – sei es über JavaScript, die Intersection Observer API, native HTML-Attribute, CSS-Techniken oder serverseitige Optimierungen wie HTTP/2 Server Push.

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

Durch die Reduzierung des Datentransfers und die Optimierung des Ladens von Ressourcen verbessert Lazy Loading nicht nur die Performance, sondern kann auch dazu beitragen, potenzielle Datenlecks oder Sicherheitsverletzungen zu mindern, die durch das Übertragen unnötiger Daten entstehen könnten.