Was ist Lazy Loading?
Lazy Loading (deutsch: „träges Laden“) ist eine Technik zur Ladezeitoptimierung von Webseiten, bei der bestimmte Inhalte – meist Bilder, Videos oder iFrames – erst dann geladen werden, wenn sie tatsächlich im sichtbaren Bereich (Viewport) erscheinen.
Statt also alle Medien beim ersten Seitenaufruf vollständig zu laden, werden sie verzögert und bedarfsgesteuert nachgeladen. Das spart Ladezeit, reduziert die Serverlast und verbessert die Nutzererfahrung – besonders auf mobilen Geräten oder bei langsamen Verbindungen.
Warum ist Lazy Loading sinnvoll?
Webseiten sind heutzutage oft bildlastig. Gerade bei Blogs, Landingpages oder Onepagern kann das Laden aller Medieninhalte gleichzeitig zu langen Ladezeiten und schlechter Performance führen – was sich negativ auf:
- Nutzererlebnis (UX)
- Absprungrate
- SEO (z. B. Core Web Vitals)
- Mobile Ladezeiten
auswirken kann.
Lazy Loading sorgt dafür, dass nur das geladen wird, was aktuell gebraucht wird. Inhalte außerhalb des Sichtbereichs werden on demand geladen, sobald Nutzer:innen scrollen.
Das Ergebnis:
Schnellerer Seitenaufbau, weniger Bandbreitenverbrauch, bessere Rankings und zufriedene Besucher:innen.
Wie funktioniert Lazy Loading technisch?
Technisch basiert Lazy Loading auf dem HTML-Attribut loading="lazy" oder auf JavaScript-Funktionen, die mithilfe der Intersection Observer API arbeiten.
Ein einfaches Beispiel für ein Bild mit Lazy Loading in HTML:
<img src="bild.jpg" loading="lazy" alt="Beispielbild">
Der Browser erkennt durch das Attribut, dass das Bild nicht sofort geladen werden muss. Sobald es in die Nähe des sichtbaren Bereichs rückt, wird es automatisch nachgeladen.
Neuere Browser wie Chrome, Firefox oder Safari unterstützen das loading="lazy"-Attribut nativ – ohne zusätzliche Skripte oder Plugins.
Lazy Loading in WordPress
Ab WordPress 5.5 ist Lazy Loading standardmäßig aktiviert. Das heißt: WordPress fügt automatisch das loading="lazy"-Attribut zu Bildern und iFrames hinzu.
Dennoch gibt es Fälle, in denen du zusätzliche Kontrolle oder Optimierung möchtest. Dafür stehen zahlreiche Plugins zur Verfügung, z. B.:
- WP Rocket
- Autoptimize
- a3 Lazy Load
- LiteSpeed Cache (besonders bei LS-Servern)
- Smush (für Bildoptimierung + Lazy Loading)
Einige Page Builder wie Elementor oder Divi bringen ebenfalls eigene Lazy-Loading-Funktionen mit – dort kann es sich lohnen, die interne Lösung zu bevorzugen.
Was kann per Lazy Loading geladen werden?
Typischerweise:
- Bilder (
<img>) - iFrames (z. B. YouTube-Videos, eingebettete Karten, Social Media-Elemente)
- Hintergrundbilder (per JavaScript, z. B. bei Slidern oder Sections)
- Videos
- Widgets oder Ads (z. B. externe Inhalte, die viele Ressourcen brauchen)
Vorsicht bei Lazy Loading von Above-the-Fold-Inhalten: Inhalte im direkt sichtbaren Bereich sollten nicht verzögert geladen werden, da dies den FCP (First Contentful Paint) negativ beeinflussen kann.
Was sind mögliche Probleme mit Lazy Loading?
Trotz der Vorteile kann Lazy Loading auch zu Problemen führen – vor allem bei falscher oder übermäßiger Anwendung:
- SEO-Probleme, wenn Inhalte (z. B. Bilder mit relevanten Alt-Texten) nicht korrekt nachgeladen werden und Google sie nicht erkennt
- Barrierefreiheit kann leiden, wenn z. B. Screenreader auf nicht geladene Inhalte stoßen
- Flickering oder Verzögerungen beim Scrollen, wenn Inhalte zu spät geladen werden
- Kompatibilitätsprobleme bei älteren Browsern (wobei moderne Standards hier gut unterstützen)
Die Lösung liegt in der gezielten Anwendung: Lazy Loading sollte mit Bedacht eingesetzt werden – nur dort, wo es sinnvoll ist.
Fazit
Lazy Loading ist ein einfacher, effektiver Hebel, um deine Website schneller, ressourcenschonender und nutzerfreundlicher zu machen – besonders bei bildstarken WordPress-Seiten. Durch die native Unterstützung im Core und viele gute Plugins ist die Umsetzung auch für Einsteiger:innen machbar. Richtig konfiguriert, bringt Lazy Loading messbare Vorteile für Ladezeit, SEO und Nutzererlebnis – und gehört damit zum Standardrepertoire moderner Webseitenoptimierung.