Startseite
Wissenszentrum
Lazy Loading erklärt: Optimierung des Ressourcenladens

Lazy Loading erklärt: Optimierung des Ressourcenladens

Einführung

Lazy Loading ist ein Designmuster 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 sichtbaren Bereichs, den Benutzer möglicherweise nicht nach unten scrollen, um ihn zu sehen.

Beim Eager Loading werden alle Ressourcen sofort beim Laden der Seite abgerufen und geladen, unabhängig von ihrem unmittelbaren Bedarf. Dies kann das anfängliche Laden 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 oft für Bilder. Es kann auch auf JavaScript-Dateien, CSS oder jeglichen nicht wesentlichen Inhalt für die anfängliche Seitenansicht angewendet werden. Diese Methode schont Netz- 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 Loading reduziert die anfängliche Ladezeit der Seite, indem nur die für den Benutzer unmittelbar sichtbaren Ressourcen abgerufen und gerendert werden. Diese Optimierung hilft, die Benutzererfahrung und Leistung zu verbessern und sorgt für ein schnelleres erstes Rendering der Seite.
Verminderte Bandbreiten- und Ressourcennutzung: Lazy Loading lädt Ressourcen nur, wenn der Benutzer sie tatsächlich 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 Leistung: Durch die Reduzierung der zu ladenden Datenmenge wird der Netzwerkverbindung, dem Prozessor und dem Speicher des Benutzers weniger abverlangt. Dies führt zu einer besseren Gesamtleistung und Reaktionsfähigkeit, insbesondere auf langsameren Netzwerken oder Geräten mit geringerer Leistung.
Besseres Benutzererlebnis: Schnellere Ladezeiten und verbesserte Leistung führen zu einer positiveren und ansprechenderen Benutzererfahrung. 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 Ressourcen, die für die Seite oder oberhalb des sichtbaren Bereichs kritisch sind, 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 Aufwand zur Implementierung von Lazy Loading die Vorteile überwiegt.

Eager vs. Lazy Loading

Bei der Entscheidung zwischen Lazy und Eager Loading sollten folgende Punkte berücksichtigt werden:

Sichtbarkeit: Wenn eine Ressource sofort für den Benutzer 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 sichtbaren Bereichs erscheinen oder einiger Benutzerinteraktionen bedürfen, um angezeigt zu werden.
Bedeutung: 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 viel Zeit zum Laden benötigen. Kleinere Ressourcen könnten den Aufwand von Lazy Loading nicht rechtfertigen.
Benutzerverhalten: Betrachten Sie, wie Benutzer typischerweise mit der Seite interagieren. Wenn Analysen zeigen, dass die meisten Benutzer nach unten scrollen und Inhalte unterhalb des sichtbaren Bereichs ansehen, könnte Eager Loading eines Teils dieses Inhalts eine bessere Erfahrung bieten. Wenn nur wenige Benutzer scrollen, wird Lazy Loading unnötige Downloads minimieren.
Netzwerkgeschwindigkeit: Auf langsameren Netzwerken bietet Lazy Loading größere Leistungsverbesserungen durch die Reduzierung der anfänglichen Downloadgröße. Auf schnelleren Netzwerken könnte Eager Loading weniger schädlich für die Benutzererfahrung sein.

Das richtige Gleichgewicht zwischen Eager und Lazy Loading hängt von den spezifischen Charakteristika und Anforderungen jeder Seite oder Anwendung ab. Leistungstests und die Überwachung realer Benutzermetriken können 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 erkennen, wenn ein Element in den Viewport eintritt, 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 Viewport eintritt 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 native Laden von Bildern mithilfe des Attributs loading=”lazy”. Beispiel:

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

CSS: Mit CSS-Techniken können Platzhalter-Skelette erstellt werden, die während des Ladens des Inhalts angezeigt werden. 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 im Voraus an den Client senden kann, um zukünftige Anfragen zu antizipieren. Obwohl dies nicht strikt lazy ist, kann dies verwendet werden, um einen ähnlichen Effekt zu erzielen.

Die Wahl der Lazy-Loading-Methode hängt von den spezifischen Anforderungen, den Überlegungen zur Browser-Unterstützung und der Gesamtarchitektur der Anwendung ab.

Lazy Loading von Bildern

Bilder sind Hauptkandidaten für Lazy Loading, da sie oft einen erheblichen Teil des Seitengewichts ausmachen. Es gibt mehrere Möglichkeiten, Bilder lazy zu laden:

Natives 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: Verwenden Sie JavaScript, um zu prüfen, ob das Bild im Viewport ist, 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 Platzeffekt zu erzeugen, 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 alternativen Text für die Barrierefreiheit bereitzustellen und Fehlerfälle angemessen zu behandeln.

Fazit

Lazy Loading ist eine wertvolle Technik zur Verbesserung der Leistung und Benutzererfahrung 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.

Überlegen Sie bei der Entscheidung, ob Lazy Loading verwendet werden soll, Faktoren wie die Sichtbarkeit und Bedeutung der Ressource, deren Größe, das typische Benutzerverhalten und die Netzwerkbedingungen. Finden Sie das richtige Gleichgewicht zwischen Lazy und Eager Loading basierend auf den spezifischen Bedürfnissen Ihrer Seiten.

Lazy Loading kann mit verschiedenen Methoden implementiert werden, wie z.B. 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 jeglichen Inhalt oder Ressourcen angewendet werden, um das Laden und die Leistung zu optimieren.

Durch die Reduzierung des Datentransfers und die Optimierung des Ressourcenladens verbessert Lazy Loading nicht nur die Leistung, sondern kann auch dazu beitragen, potenzielle Datenlecks oder Datenverletzungen zu minimieren, die durch das Übertragen von mehr Daten als notwendig auftreten können.