Lazy Loading von Bildern – Was ist das & wie macht man es?

Bilder sind ein wesentlicher Bestandteil jeder Website. Sie können jedoch die Ladegeschwindigkeit der Seite erheblich beeinflussen, insbesondere bei bildlastigen Anwendungen. Dies ist wichtig, da schnellere Websites eine bessere Benutzererfahrung bieten und in Suchmaschinen höher eingestuft werden.

Eine Möglichkeit, das Laden von Bildern zu optimieren, ist die Verwendung von Lazy Loading—eine Technik, die die Leistung verbessert, ohne die visuelle Qualität zu beeinträchtigen.

In diesem Artikel erfahren Sie, was Lazy Loading ist, wie es funktioniert und wie Sie es auf Ihrer Website implementieren können. Außerdem werden wir uns mit den Best Practices für Lazy Loading und den häufigsten Fehlern befassen, die zu vermeiden sind.

Diese Methode verbessert die Seitengeschwindigkeit, reduziert die übertragene Datenmenge und minimiert die Belastung sowohl des Geräts des Benutzers als auch des Servers.

Da weniger Ressourcen im Voraus benötigt werden, bietet Lazy Loading ein reibungsloseres Browsing-Erlebnis—insbesondere auf mobilen Geräten oder bei langsamerer Netzwerkverbindung.

Lazy Loading wird häufig für Bilder verwendet, kann aber auch auf Videos, iframes und andere multimediale Inhalte angewendet werden.

Wie funktioniert Lazy Loading?

Lazy Loading funktioniert, indem die Anforderung des Browsers für bestimmte Ressourcen verzögert wird, bis sie auf dem Bildschirm angezeigt werden sollen.

Wenn ein Benutzer eine Webseite öffnet, werden nur die sichtbaren Bilder sofort geladen. Andere Bildanforderungen werden nur gesendet, wenn der Benutzer nach unten scrollt.

Der Prozess umfasst typischerweise folgende Schritte:

1. Initiales Laden der Seite: Der Browser lädt den wesentlichen Seiteninhalt und die sichtbaren Bilder.
2. Platzhalterbilder: Nicht sichtbare Bilder werden durch leichte Platzhalter oder leere Bild-Tags ersetzt.
3. Benutzerinteraktion: Wenn der Benutzer scrollt oder mit der Seite interagiert, erkennt der Browser, wann ein Bild in den Sichtbereich kommt.
4. Bildladen: Die tatsächliche Bilddatei wird vom Server nur geladen, wenn das Bild nahe am oder im sichtbaren Bereich ist.

Lazy Loading kann mit HTML-Attributen, JavaScript oder Plugins implementiert werden, die wir in den nächsten Abschnitten untersuchen werden.

Wie implementiert man Lazy Loading?

Es gibt mehrere Möglichkeiten, Lazy Loading auf einer Website zu implementieren, abhängig von der Einrichtung der Website und Ihren technischen Fähigkeiten.

Die gängigsten Methoden umfassen die Verwendung nativer HTML-Attribute, JavaScript-Lösungen und integrierte Funktionen in CMS-Plattformen wie WordPress.

1. Lazy Loading in WordPress

WordPress macht die Implementierung von Lazy Loading einfach, auch ohne Programmierkenntnisse.

1.1. Automatisches Lazy Loading

Standardmäßig fügt WordPress automatisch das loading=”lazy”-Attribut zu Bildern hinzu, die über den Block-Editor oder die wp_get_attachment_image()-Funktion eingefügt werden.

Diese automatische Funktion verbessert die Leistung, ohne dass zusätzliche Konfiguration erforderlich ist.

1.2. Über Plugins

Für fortgeschrittenere Lazy Loading-Optionen können Sie WordPress-Plugins verwenden. Beliebte Plugins bieten zusätzliche Funktionen wie Ladeanimationen, CSS-Ausschlüsse und Lazy Loading für Hintergrundbilder.

Um Lazy Loading mit dem SiteGround Speed Optimizer-Plugin zu aktivieren:

1. Gehen Sie zu Ihrem WordPress-Dashboard.
2. Navigieren Sie zu Speed Optimizer > Medien.

3. Aktivieren Sie die Option Lazy Load von Medien.

2. Verwendung nativer HTML-Attribute

Moderne Browser unterstützen natives Lazy Loading durch das loading=”lazy”-Attribut in HTML.

Diese Methode ist der einfachste Weg, Lazy Loading hinzuzufügen, ohne zusätzlichen Code zu schreiben.

Beispiel:

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

Das loading=”lazy”-Attribut weist den Browser an, das Laden des Bildes zu verzögern, bis es in den Sichtbereich kommt.

3. Verwendung von JavaScript

JavaScript bietet mehr Flexibilität und Kontrolle über Lazy Loading, insbesondere für ältere Browser oder fortgeschrittenere Anwendungsfälle.

Zwei gängige Methoden sind LazyLoad.js und die Intersection Observer API.

3.1. LazyLoad.js

LazyLoad.js ist eine leichte JavaScript-Bibliothek, die Lazy Loading für Bilder und andere Medienelemente vereinfacht. Sie löst die Ausführung der Lazy Loading-Funktion nur aus, wenn Bilder in den Sichtbereich gelangen.

Um es zu verwenden:

1. Binden Sie die Bibliothek in Ihr Projekt ein:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.8.3/lazyload.min.js"></script>

2. Ersetzen Sie das src-Attribut in Ihren Bild-Tags durch data-src:

<img data-src="image.jpg" alt="Example Image" class="lazy">

3. Initialisieren Sie LazyLoad.js mit JavaScript:

var lazyLoadInstance = new LazyLoad({

elements_selector: ".lazy"

});

3.2. Intersection Observer API

Die Intersection Observer API ist eine moderne JavaScript-Funktion, die erkennt, wann Elemente in den oder aus dem Sichtbereich gelangen.

Beispiel:

<img data-src="image.jpg" alt="Example Image" class="lazy">


const lazyImages = document.querySelectorAll(".lazy");

const observer = new IntersectionObserver((entries) => {

  entries.forEach((entry) => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      observer.unobserve(img);

    }

  });

});


lazyImages.forEach((img) => observer.observe(img));

Best Practices für Lazy Loading von Bildern

Die Implementierung von Lazy Loading kann die Leistung Ihrer Website verbessern, aber die Befolgung von Best Practices stellt sicher, dass die Technik effektiv funktioniert, ohne die Benutzererfahrung oder SEO zu beeinträchtigen.

1. „Above-the-Fold-Bilder“ priorisieren

Schließen Sie „Above-the-Fold“-Bilder immer vom Lazy Loading aus.

Dies sind die Bilder, die ohne Scrollen sichtbar sind und sollten sofort geladen werden, um Layoutverschiebungen zu vermeiden und die wahrgenommene Leistung zu verbessern.

In HTML lassen Sie einfach das loading=”lazy”-Attribut für diese Bilder weg.

2. Platzhalterbilder verwenden

Das Anzeigen eines Platzhalters, während das Bild geladen wird, verbessert die visuelle Erfahrung und verhindert leere Bereiche. Sie können ein Bild niedriger Qualität oder eine einfarbige Hintergrundfarbe als Platzhalter verwenden.

Beispiel mit CSS:

.lazy {

background-color: #f3f3f3; /* Placeholder color */

min-height: 200px; /* Image height */

}

3. Bildgrößen und -formate optimieren

Lazy Loading funktioniert am besten mit optimierten Bildern. Verwenden Sie moderne Formate wie WebP und komprimieren Sie Bilder, bevor Sie sie hochladen.

Tools wie das SiteGround Speed Optimizer-Plugin können Bilder automatisch in WebP konvertieren und deren Größe optimieren.

4. Leistung und Kompatibilität testen

Testen Sie Lazy Loading immer auf verschiedenen Geräten und Browsern auf Kompatibilität.

Tools wie Google PageSpeed Insights oder Lighthouse können helfen, Leistungsverbesserungen zu messen.

5. Lazy Loading mit anderen Optimierungstechniken kombinieren

Lazy Loading funktioniert am besten zusammen mit anderen Leistungsoptimierungen wie:

• Bildkomprimierung
• Browser-Caching
• Content Delivery Networks (CDNs)

SiteGround-Benutzer können diese Optimierungen mit Hilfe des Speed Optimizer-Plugins und der integrierten Funktionen in ihrem Site Tools-Dashboard ganz einfach anwenden.

Häufige Fehler beim Lazy Loading & wie man sie vermeidet

Obwohl Lazy Loading die Leistung verbessert, kann eine unsachgemäße Implementierung zu Problemen führen, die die Benutzererfahrung und SEO negativ beeinflussen.

Hier sind einige häufige Fehler und wie man sie behebt.

1. Lazy Loading von „Above-the-Fold“-Bildern

Lazy Loading von Bildern am oberen Rand der Webseite kann verzögertes Rendern von Inhalten und Layoutverschiebungen verursachen. Dies lässt Ihre Website langsam erscheinen.

✅ Behebung: Schließen Sie „Above-the-Fold“-Bilder vom Lazy Loading aus, indem Sie das loading=”lazy”-Attribut von wichtigen Bildern wie Logos, Ihrem Header-Bild und hervorgehobenen Thumbnails entfernen.

2. Keine Angabe von Bildabmessungen

Wenn Bildabmessungen nicht festgelegt sind, weiß der Browser nicht, wie viel Platz er reservieren soll, was zu Inhaltsverschiebungen beim Laden der Bilder führt.

✅ Behebung: Definieren Sie immer die Breiten- und Höhenattribute für Bilder, um Layoutverschiebungen zu verhindern.

<img src="image.jpg" alt="Example Image" width="600" height="400" loading="lazy">

3. Lazy Loading von kritischen Bildern in Slidern oder Hintergründen

Bilder in Slidern oder als CSS-Hintergrundbilder werden möglicherweise nicht richtig für Lazy Loading ausgelöst, was zu Verzögerungen bei der Inhaltsanzeige führt.

✅ Behebung: Laden Sie kritische Slider-Bilder vor und verwenden Sie JavaScript-basiertes Lazy Loading, um zu steuern, wann die tatsächliche Hintergrundbildeigenschaft angewendet wird.

Beispiel für die Verwendung der Hintergrundbild-CSS-Eigenschaft:

.lazy-bg {

background-image: url("placeholder.jpg");

}

.lazy-bg.loaded {

background-image: url("real-image.jpg");

}

JavaScript-Beispiel:

document.querySelectorAll('.lazy-bg').forEach(el => {

el.classList.add('loaded');

});

4. Übermäßige Verwendung von JavaScript für Lazy Loading

Obwohl JavaScript-basierte Lazy Loading-Lösungen Flexibilität bieten, erhöht deren übermäßiger Einsatz den Ressourcenverbrauch und funktioniert möglicherweise nicht in allen Browsern.

✅ Behebung: Verwenden Sie natives HTML Lazy Loading (loading=”lazy”) wann immer möglich. Verwenden Sie JavaScript-basierte Lösungen nur, wenn mehr Kontrolle erforderlich ist.

5. SEO und Zugänglichkeitsüberlegungen vergessen

Lazy Loaded-Bilder werden möglicherweise nicht richtig von Suchmaschinen indexiert, wenn ihnen die richtigen Attribute oder die JavaScript-Ausführung fehlen. Darüber hinaus können fehlende Alt-Attribute die Zugänglichkeit beeinträchtigen.

✅ Behebung:

• Stellen Sie sicher, dass Bilder von Suchmaschinen auffindbar sind, indem Sie für wichtige Inhalte ordnungsgemäße img-Elemente anstelle von Hintergrundbildern verwenden.
• Fügen Sie immer aussagekräftige Alt-Attribute für Screenreader hinzu.

<img src="product.jpg" alt="Red running shoes" loading="lazy">

Die Befolgung dieser Best Practices hilft Ihnen, häufige Probleme beim Lazy Loading zu vermeiden und gleichzeitig eine nahtlose Erfahrung für Benutzer und Suchmaschinen zu gewährleisten.

Wichtige Erkenntnisse zum Lazy Loading von Bildern

Lazy Loading ist eine leistungsstarke Technik, die die Leistung von Websites verbessert, indem das Laden von Bildern verzögert wird, bis sie benötigt werden. Es reduziert die anfänglichen Ladezeiten der Seite, spart Bandbreite und verbessert die Benutzererfahrung – insbesondere auf mobilen Geräten und bei langsameren Verbindungen.

In diesem Leitfaden haben wir behandelt:

• Was Lazy Loading ist und wie es funktioniert
• Verschiedene Implementierungsmethoden, einschließlich HTML-Attribute, JavaScript und WordPress-Plugins
• Best Practices für optimale Leistung
• Häufige Fehler und wie man sie vermeidet

Für WordPress-Nutzer bietet das SiteGround Speed Optimizer-Plugin eine einfache Möglichkeit, Lazy Loading zusammen mit anderen Leistungsoptimierungen zu aktivieren.

Durch die Befolgung der in diesem Artikel beschriebenen Tipps können Sie Ihre Website erheblich beschleunigen, ohne die Inhaltsqualität zu beeinträchtigen.