Lazy Loading in WordPress: So einfach geht’s!

Kennst Du das? Du besuchst eine Website, und die Seite lädt ewig, weil dutzende Bilder und Videos sofort geladen werden. Die Folge: Du verlierst die Geduld und klickst weg. Genau das passiert auch Deinen Besuchern, wenn Deine WordPress-Seite zu langsam ist. 

Doch es gibt hierfür natürlich eine Lösung: Lazy Loading! Diese Technik beschleunigt Deine Ladezeit und sorgt dafür, dass Deine Besucher länger auf Deiner Seite bleiben. In diesem Beitrag zeige ich Dir, wie Du Lazy Loading schnell und einfach in WordPress einrichtest.

Was ist Lazy Loading?

Lazy Loading ist eine Technik in der Webentwicklung, bei der Inhalte (z. B. Bilder, Videos oder Skripte) erst dann geladen werden, wenn sie tatsächlich benötigt werden – also beispielsweise, wenn Du zu dem betreffenden Teil der Website scrollst. Das Ziel ist es, den Pagespeeed deiner WordPress Website zu optimieren und die Performance zu verbessern, indem nur die Inhalte, die im sichtbaren Bereich (Viewport) des Nutzers liegen, sofort geladen werden.

Warum solltest Du Lazy Loading in WordPress nutzen?

Lazy Loading in WordPress zu nutzen, bietet Dir viele Vorteile, insbesondere in Bezug auf die Website-Performance, Benutzererfahrung und Suchmaschinenoptimierung (SEO). Hier sind die sechs wichtigsten Gründe, warum Du Lazy Loading in WordPress einsetzen solltest:

1. Schnellere Ladezeit
Lazy Loading sorgt dafür, dass nur die Inhalte geladen werden, die sich im sichtbaren Bereich der Seite befinden. Bilder, Videos und andere Medien, die weiter unten auf der Seite liegen, werden erst geladen, wenn der Nutzer dorthin scrollt. Das reduziert die anfängliche Ladezeit erheblich, was besonders wichtig ist, da Nutzer oft Seiten verlassen, die zu lange laden.

2. Bessere Nutzererfahrung
Eine kürzere Ladezeit und eine flüssigere Performance sorgen für eine angenehmere Nutzererfahrung. Besucher müssen nicht warten, bis alle Bilder und Videos vollständig geladen sind, sondern können sofort mit dem sichtbaren Inhalt interagieren. Dies erhöht die Wahrscheinlichkeit, dass Nutzer auf der Seite bleiben und sich mit dem Content auseinandersetzen.

3. Weniger Serverbelastung
Da nicht alle Inhalte auf einmal geladen werden, wird die Serverlast reduziert. Dies führt zu einer effizienteren Nutzung der Ressourcen, was besonders wichtig ist, wenn Du viele Besucher auf Deiner Seite hast. Weniger Anfragen an den Server bedeuten eine stabilere Leistung und geringere Ladeprobleme bei hohem Traffic.

4. Weniger Datenverbrauch für mobile Nutzer
Gerade für Nutzer mobiler Endgeräte, die oft begrenztes Datenvolumen haben, ist Lazy Loading ein großer Vorteil. Da nur die sichtbaren Inhalte sofort geladen werden, wird der Datenverbrauch minimiert. Das ist besonders relevant, wenn Deine Seite viele große Mediendateien wie Bilder oder Videos enthält.

5. SEO-Vorteile
Eine effektive SEO-Strategie sollte die Ladegeschwindigkeit einer Website einbeziehen. Google berücksichtigt die Ladegeschwindigkeit einer Website als wichtigen Faktor für das Ranking. Eine schnellere Seite verbessert also Deine SEO und kann dazu beitragen, dass Du in den Suchergebnissen weiter oben angezeigt wirst. Da Google auch Lazy Loading erkennt und die Inhalte indexiert, besteht kein Risiko, dass Inhalte durch diese Technik unsichtbar für Suchmaschinen bleiben.

6. Einfache Implementierung in WordPress
Lazy Loading ist in WordPress relativ einfach umzusetzen, da viele Plugins diese Funktion anbieten. 

10 einfache Methoden für Lazy Loading auf WordPress

Lazy Loading in WordPress lässt sich auf verschiedene Weise umsetzen – sei es mit einfachen Einstellungen, durch Plugins oder manuelle Anpassungen am Code. Hier sind einige der besten und einfachsten Methoden, mit denen Du Lazy Loading auf Deiner WordPress Website aktivieren kannst.

1. WordPress-Core-Funktion (Ab Version 5.5) 

Seit WordPress 5.5 ist Lazy Loading bereits als Standardfunktion integriert. Du musst nichts weiter tun – Bilder werden automatisch erst geladen, wenn sie in den sichtbaren Bereich der Seite kommen. Wenn Du eine aktuelle Version von WordPress nutzt, ist dies der einfachste Weg, Lazy Loading zu aktivieren.

Deine WordPress Version kannst du in deinem WordPress Dashboard unter „Aktualisierungen“ prüfen. Bevor du die Version aktualisierst, solltest du immer ein Backup deiner WordPress Website erstellen!

✅ Vorteile: Automatisch aktiviert ab WordPress 5.5

❌ Nachteile: Keine bis wenig Kontrolle über das Lazy Loading, funktioniert nicht zuverlässig

2. WP Rocket Plugin 

👑 Top-Empfehlung für Lazy Loading: Mit WP Rocket lässt sich Lazy Loading kinderleicht auf Deiner Website umsetzen. Alternativ kannst du auch das Caching Plugin „Accelerate WP“ nutzen, welches kostenfrei in jedem WordPress Hosting bei WPspace inklusive ist.

WP Rocket ist eines der bekanntesten Caching-Plugins für WordPress und bietet eine eingebaute Lazy-Loading-Funktion. Das Plugin lädt nicht nur Bilder und Videos erst beim Scrollen, sondern optimiert die gesamte Seitenleistung. Einfach das Plugin installieren, die Lazy-Loading-Option aktivieren – und schon profitierst Du von schneller ladenden Seiten.

✅ Vorteile: Einfach konfigurierbar, mit allen relevanten Medientypen kompatibel, zuverlässig

❌ Nachteile: Kostenpflichtiges Plugin

3. Lazy Load by WP Rocket  

Falls Du nicht das gesamte WP Rocket Plugin benötigst, gibt es auch eine kostenlose Alternative: Lazy Load by WP Rocket. Dieses schlanke Plugin aktiviert Lazy Loading speziell für Bilder, Videos und iFrames, ohne zusätzliche Einstellungen oder eine aufwendige Konfiguration.

✅ Vorteile: Sehr schlankes Plugin, kein unnötiger Bloat für deine Website

❌ Nachteile: Personalisierte Einstellungen nur über funktions.php möglich

4. Autoptimize

Autoptimize ist ein weiteres beliebtes Performance-Plugin, das neben der Minimierung von Skripten und CSS-Dateien auch Lazy Loading unterstützt. Es ist eine gute Wahl, wenn Du Deine Seite gleichzeitig für Geschwindigkeit optimieren und Lazy Loading aktivieren möchtest.

✅ Vorteile: Zuverlässiges Caching Plugin, Lazy Loading zuverlässig

❌ Nachteile: Bringt viele weitere Funktionen neben Lazy Loading mit, kann sich daher mit anderen Caching Plugins beißen

5. Smush  

Smush ist vor allem bekannt für seine Bildkomprimierung, bietet aber auch eine leistungsstarke Lazy-Loading-Funktion. Das Plugin komprimiert nicht nur Deine Bilder, sondern lädt sie erst, wenn sie im sichtbaren Bereich erscheinen. Besonders gut geeignet, wenn Du eine Website mit vielen hochauflösenden Bildern hast.

✅ Vorteile: Einfache Konfiguration, kontinuierliche Weiterentwicklung, über 1+ Millionen aktive Installationen

❌ Nachteile: Kein Lazy Load für Videos möglich, spezialisiert auf Bildoptimierung

6. a3 Lazy Load  

Wenn Du ein Plugin suchst, das speziell auf Lazy Loading ausgerichtet ist, ist a3 Lazy Load eine hervorragende Wahl. Es unterstützt nicht nur Bilder und Videos, sondern auch eingebettete Inhalte wie iFrames und WooCommerce-Produktbilder. Die Einstellungen sind leicht anpassbar, und Du kannst genau festlegen, welche Inhalte verzögert geladen werden sollen.

✅ Vorteile: Lazy Load für Bilder, Videos, iFrames und Gravatare, übersichtlich

❌ Nachteile: Wird unregelmäßig geupdated

7. Litespeed Cache  

Litespeed Cache ist ein umfassendes Caching-Plugin, das auch eine integrierte Lazy-Loading-Funktion bietet. Wir empfehlen dir das Plugin nur zu verwenden, wenn deine Website auf einem Litespeed Server läuft. Die Lazy-Loading-Option findest Du einfach in den Einstellungen und kannst sie per Mausklick aktivieren.

✅ Vorteile: Schnelle Konfiguration, über 6+ Millionen aktive Installationen

❌ Nachteile: Litespeed unterstützender Server empfohlen, Plugin nur auf englisch verfügbar

8. Lazy Loader Plugin

Das Lazy Loader Plugin ist ein minimalistisches Plugin, das speziell für die Aktivierung von Lazy Loading entwickelt wurde. Es bietet keine zusätzlichen Funktionen, sondern konzentriert sich ausschließlich darauf, Bilder und iFrames nach Bedarf zu laden. Ideal für eine schlanke Lösung ohne überflüssige Features.

✅ Vorteile: Neben Bildern, Videos und iFrames auch für Audio-Elemente einsetzbar, kompatibel mit WebP

❌ Nachteile: Keine regelmäßigen Aktualisierungen

9. BJ Lazy Load für Anfänger

❌ Wird seit 2017 nicht mehr weiterentwickelt und gewartet. Daher empfehlen wir dir dieses Plugin nicht!

Oft wird das WordPress Plugin BJ Lazy Load für Lazy Loading empfohlen. Allerdings wird dieses Plugin seit 7 Jahren nicht mehr aktualisiert. Das heißt für dich, die Installation und Nutzung dieses Plugins bringt zusätzliche Sicherheitsrisiken auf deine Website.

❌ Nachteile: Keine Aktualisierungen und Wartung mehr, daher keine Empfehlung.

10. Manuelles Lazy Loading mit JavaScript für Profis

Für fortgeschrittene Entwickler bietet sich auch die Möglichkeit, Lazy Loading manuell zu implementieren. Mit JavaScript kannst Du genau festlegen, wann und wie Bilder geladen werden. Eine beliebte Lösung ist das `Intersection Observer`-API, das überprüft, ob sich ein Element im Sichtbereich befindet, und es dann lädt.

✅ Vorteile: Kein zusätzliches Plugin notwendig

❌ Nachteile: Komplex, manueller Aufwand

Wie prüfe ich, ob Lazy Loading wirklich funktioniert?

Nachdem Du Lazy Loading auf Deiner WordPress-Seite aktiviert hast, möchtest Du natürlich sicherstellen, dass es auch korrekt funktioniert. Hier sind fünf einfache Methoden, wie Du überprüfen kannst, ob Deine Bilder und Medien tatsächlich erst dann geladen werden, wenn sie im sichtbaren Bereich erscheinen.

1. Browser-Entwicklertools nutzen

Fast jeder moderne Browser, wie Chrome oder Firefox, bietet Entwicklertools, mit denen Du genau sehen kannst, wann und wie Inhalte geladen werden.

• Schritt 1: Öffne Deine Website in einem Browser.
• Schritt 2: Klicke mit der rechten Maustaste auf die Seite und wähle „Untersuchen“ (Chrome, Firefox und Microsoft Edge). Damit öffnest du die Dev-Tools des jeweiligen Browsers.
• Schritt 3: Gehe zum Tab „Netzwerk“ und wähle „Bilder“ oder „Media“ aus.
  Hinweis💡: Oftmals sind die Dev-Tools noch auf englisch. Wähle also „Network“ und „Img“ oder „Media“ aus.
• Schritt 4: Lade die Seite neu und beobachte, wann die Bilder und Medien geladen werden. Lazy Loaded Inhalte erscheinen erst, wenn Du nach unten scrollst.

2. Überprüfen des Quellcodes

Du kannst den HTML-Quellcode Deiner Seite überprüfen, um zu sehen, ob die Lazy-Loading-Funktion aktiviert ist. Viele Lazy-Loading-Techniken fügen Attributen wie <img> oder <iframe> das „loading=lazy“ hinzu.

• Schritt 1: Rechtsklick auf die Seite und „Seitenquelltext anzeigen“ auswählen.
• Schritt 2: Suche nach dem Bild-Tag (<img>) und prüfe, ob das Attribut loading=“lazy“ enthalten ist.

Hier ein Beispiel, wie das im Quelltext aussehen kann:

3. Scrolltest

Eine einfache, visuelle Methode, um Lazy Loading zu überprüfen, ist der Scrolltest. Lade Deine Website und beobachte die Bilder:

• Schritt 1: Lade die Seite und achte darauf, ob zunächst nur die Bilder im sichtbaren Bereich erscheinen.
• Schritt 2: Scrolle langsam nach unten und beobachte, ob die restlichen Bilder erst dann geladen werden, wenn sie in den sichtbaren Bereich gelangen.

4. Google PageSpeed Insights

Tools wie Google PageSpeed Insights geben Dir detaillierte Informationen zur Ladegeschwindigkeit Deiner Website. Wenn Lazy Loading korrekt funktioniert, sollte das Tool unter „Bestandene Prüfungen“ positive Hinweise auf eine verzögerte Mediennutzung geben.

• Schritt 1: Klick Dich auf Google PageSpeed Insights.
• Schritt 2: Gib die URL Deiner Seite ein und analysiere sie.
• Schritt 3: Im Abschnitt „Verbesserungen“ oder „Gelegenheit“ siehst Du, ob Lazy Loading korrekt eingesetzt wird.

5. Lighthouse-Bericht in Chrome

Du kannst den integrierten Lighthouse-Bericht in Chrome verwenden, um Lazy Loading zu testen und Empfehlungen zu erhalten.

• Schritt 1: Öffne die Entwicklertools (Rechtsklick → „Untersuchen“).
• Schritt 2: Wähle den Reiter „Lighthouse“ aus.
• Schritt 3: Erstelle einen Performance-Bericht, der Dir zeigt, ob Medien verzögert geladen werden und wo Du Optimierungsmöglichkeiten hast.

Fazit: Lazy Loading in WordPress

Lazy Loading ist eine mächtige Funktion, die die Ladezeit und Usability deiner Website deutlich verbessern kann. Vor allem für Websites mit vielen und großen Bildern ist die Funktion ein echter Performance Boost!

Für die Konfiguration von Lazy Loading gibt es verschiedene Möglichkeiten. Entweder nutzt du ein Plugin oder aktivierst es manuell via JavaScript. Am einfachsten ist Lazy Loading mit einem Plugin zu aktivieren. Hier empfehlen wir dir das WordPress Plugin WP Rocket – das ist auf Basis unserer Erfahrungswerte das beste Plugin für Caching und Lazy Loading.

Alternativ kannst du auch das Plugin „Accelerate WP“ nutzen, welches in allen WPspace Hosting Tarifen kostenlos inklusive ist.

Zusammengefasst ist Lazy Loading eine einfache Möglichkeit für Anfänger und Experten, um die ganzheitliche Performance von WordPress Websites zu optimieren.