• English

Lazy Load bei WordPress richtig verwenden

Beitragsgrafik – Lazy Load bei WordPress
von Johanna
22. November 2023

Tipps, Plugins und Themes

Lazy Load kann Fluch und Segen zugleich sein. Denn Lazy Load soll deiner Webseite helfen, große Datenpakete wie Bilder oder Videos nacheinander zu laden, um die Ladezeiten deiner Webseite zu verringern. Allerdings kann Lazy Load auch dazu führen, dass die Webseite aufgrund der verwendeten Tools langsamer wird und diese sich gegenseitig blockieren.


Dazu schauen wir uns Lazy Load erst einmal genauer an und geben Tipps für die Verwendung und auch die Deaktivierung von Lazy Load-Funktionen mit an die Hand.

Inhaltsverzeichnis

  1. Was bedeutet Lazy Load?
  2. Warum ist Lazy Load wichtig für WordPress?
  3. Lazy Load Integration bei WordPress
  4. WordPress Themes mit integriertem Lazy Load
  5. Lazy Load WordPress Plugins
  6. Lazy Load bei WordPress deaktivieren
    1. Lazy Load über Code deaktivieren
    2. Lazy Load über Plugin deaktivieren
  7. Fazit

1. Was bedeutet Lazy Load?

Lazy Loading (auf Deutsch „Langsames Laden“) bedeutet, mit der Darstellung von Inhalten auf einer Webseite zu warten, bis der Nutzer oder der Browser sie benötigt. Konkret bedeutet das in der Umsetzung, dass Inhalte und Medien, wie Bilder, Videos oder Skripte, erst dann geladen werden, wenn sie sich im Blickfeld des Benutzers befinden.


Normalerweise werden die Inhalte einer Webseite alle parallel und vollständig geladen. Mit Lazy Load wird dieser Prozess ausgedehnt, um so die Ladegeschwindigkeit der Webseite zu verbessern und die Gesamt-Performance zu steigern.


Lazy Load ist eine Optimierungstechnik für WordPress, die Inhalte oberflächlich zwar lädt, gleichzeitig aber das Herunterladen der Medien verzögert.

💡 TIPP


Lazy Load ist insbesondere dann zu empfehlen, wenn deine Webseite viele und große mediale Inhalte oder Datenpakete laden muss.

2. Warum ist Lazy Load wichtig für WordPress?

Jeder von uns kennt und weiß es: das Internet wird mittlerweile von Fotos und Videos dominiert. Diese werden mit der Zeit immer größer und von der Qualität besser. Laden wir alle diese Fotos unkomprimiert und nicht optimiert in der WordPress Mediathek hoch, ist dein Backend ziemlich überfüllt und wird langsam.


Deswegen ist es zunächst einmal wichtig, Fotos und Videos vor dem Upload bei WordPress zu komprimieren. Die Verkleinerung von Daten, kannst du beispielsweise über Programme wie TinyPNG vornehmen. 


Nachdem du nun einzelne Datenpakete deiner Medien verringert hast, ist deine Mediathek in der Summe aber immer noch sehr groß. Das lässt sich bis zu einem gewissen Grad auch nicht verhindern, wenn deine Webseite mit viel Bildmaterial aufgebaut ist.


Und genau hier kommt jetzt das Lazy Load ins Spiel. Denn Lazy Loading hilft dir nun bei dem Besuch deiner Webseite, die Ladezeit trotz vieler Mediendateien so gering wie möglich zu halten, indem die unterschiedlichen Bilder und Videos nicht alle gleichzeitig geladen werden. Diese werden nun erst bei Bedarf im Hintergrund vollständig geladen.


Beispielsweise kann das Integrieren eines Youtube Videos deine Seite um ein gutes Stück vergrößern, aktivierst du aber ein Lazy Load kannst du die Geschwindigkeit deiner Webseite trotz gleicher Belastung verdreifachen.

3. Lazy Load Integration bei WordPress

Im August 2020 wurde mit dem WordPress Core Update 5.5 auch die Lazy Load Funktion für den WordPress Core released.


Bis dato gab es neben zahlreichen Plugins lediglich die Alternative, Lazy Load über einen JavaScript-basierten Ansatz einzusetzen. Mit der Integration von Lazy Load in den WordPress Core hat WordPress eine integrierte Lösung geschaffen, die die Benutzererfahrung ohne weiterführende Plugins vereinfachen soll.


Da mit dem Update Lazy Load direkt im WordPress Core etabliert wurde, gibt es keine zentrale Einstellungsmöglichkeit bei WordPress, um das Lazy Load ein- oder auszustellen. Die Funktion ist automatisch und somit auch dauerhaft aktiviert.


„Wenn WordPress das native Lazy-Loading standardmäßig aktiviert, würde sich dies erheblich auf die Leistung und das Benutzererlebnis von Millionen von Websites auswirken, ohne dass technische Kenntnisse oder gar ein Bewusstsein für das Konzept des Lazy-Loading erforderlich wären. Die Einführung des neuen Ladeattributs ist eine große Chance für WordPress, den Weg für ein insgesamt schnelleres Web zu ebnen.“


– Felix Arntz, WordPress Core Entwickler

‼️ Wichtig


Das integrierte Lazy Load und verschiedene Tools können aber auch gegeneinander funktionieren, sich blockieren und dadurch die Webseite langsamer machen. Deshalb gilt es hier individuell zu entscheiden, welche Form von Lazy Load und welches Tool für deine Webseite geeignet ist und die Performance unterstützt.

4. WordPress Themes mit integriertem Lazy Load

Neben der Lazy Load Integration von WordPress kannst du auch andere Tools verwenden, die beispielsweise bei Themes oder Webseite Buildern integriert sind. Verschiedene Tools zu verwenden kann den Vorteil haben, dass du mit unterschiedlichen Tools alle Lazy Load Bereiche abdecken kannst. Konkret bedeutet das, dass nicht jedes Tool denselben Bedarf abdecken kann und jedes Tool ist auf unterschiedliche Inhalte spezialisiert. Beispielsweise auf Bilder, Videos oder Skripte.


Lazy Load ist mittlerweile in den meisten bekannten WordPress Themes integriert. Wir zeigen dir hier nochmal die besten drei WordPress Themes im Überblick.

Astra

WP Astra Theme für Elementor und WordPress
Astra ist ein sehr beliebtes Theme, insbesondere weil es ein leichtes und anpassbares Theme ist. Die Schwerpunkte liegen auf der Performance und der SEO-Freundlichkeit. Hier finden wir außerdem die integrierte Lazy-Load-Option, die sich allerdings hauptsächlich auf die Verwendung von Bildern bezieht.


Funktionen


  • Theme kleiner als 50 KB
  • optimierter Code
  • WooCommerce Unterstützung
  • Mega Menü
  • responsive Schriftgrößen
  • unterschiedlichste Header Optionen
  • uvm.

Preis: ab 47 $ im Jahr

OceanWP

Startseite der Webseite von OceanWP. WordPress Theme.
OceanWP ist ein vielseitig einsetzbares Theme, welches bekannt für seine gute Unterstützung von Drittanbieter Plugins sowie Performance Optimierung ist. Auch OceanWP hat eine integrierte Lazy Load-Funktion.


Funktionen


  • Blog Optimierung
  • Retina Display optimiert
  • flexible Layout Gestaltungsoptionen
  • SEO freundliche Struktur
  • WooCommerce Integration

Preis: ab 43 $ im Jahr.

GeneratePress

Generate Press Startseite der Webseite. WordPress Theme
GeneratePress gilt als ein hochleistungsfähiges Theme, das sich auf Geschwindigkeit und Zugänglichkeit konzentriert. Allerdings eignet sich dieses WordPress Theme eher für Entwickler und WordPress Profis. Auch hier ist das Lazy Load eine integrierte Funktion.


Funktionen


  • Barrierefrei
  • Kompatibel mit allen gängigen PageBuildern und Plugins
  • Block basierter Theme Builder
  • Lazy Load

Preis: 59 $ im Jahr oder einmalig 249 $.

5. Lazy Load WordPress Plugins

Wenn du das integrierte Lazy Load bei WordPress nicht verwenden möchtest oder dir die Funktion nicht ausreicht, kannst du zusätzliche Lazy Load Plugins verwenden. Hier gibt es verschiedene Optionen, die sich auf unterschiedliche Medienarten spezialisieren.

Lazy Load by WP Rocket

Das Plugin Lazy Load bei WordPress.
Lazy Load by WP Rocket stammt von den WP Rocket Caching Plugin Entwicklern und zählt somit zu den beliebtesten Lazy Load Plugins. Das Plugin hilft dabei Bilder und Videos nur dann zu laden, wenn sich der Benutzer direkt über dem Medium befindet. Der Fokus des Plugins liegt auf Bildern, Videos und iframes, ist aber auch bei allen Bildmedien wie Avataren, Thumbnails etc. nützlich.


Ein absoluter Pluspunkt bei Lazy Load von WP Rocket ist, dass es vollständig kostenlos bei WordPress angeboten wird.


Vorteile


  • bereits bei WP Rocket Caching integriert
  • vollumfänglich kostenlos
  • Fokus auf Bilder, Videos & iframes
  • unterstützt die Core Web Vitals

Preis: kostenlos bei WordPress

Smush by WPMU DEV

Smush Lazy Load Plugin für WordPress
Smush by WPMU DEV ist mit über 1 Million aktiven Installationen bei WordPress weit vorne unter den Lazy Load Plugins. WPMU DEV bietet zudem einige weitere Pro Plugins an, mit denen du bestimmte Funktionen unterstützen kannst. Smush ist bisher jedoch ausschließlich auf Fotos und Bilder ausgerichtet und bietet damit einen wesentlich kleineren Funktionsumfang an, als beispielsweise Lazy Load. Neben der reinen Lazy Load Funktion kannst du hier aber auch Fotos komprimieren, Formate verändern und Größen einstellen.


Vorteile


  • unbegrenzt viele Bilder komprimieren
  • hohe Kompatibilität mit Amazon, WPBakery Page Builder
  • automatische Optimierung beim Upload
  • Umwandlung in verschiedene Formate wie JPEG, PNG und WebP

Preis: ab 3 $ pro Monat

6. Lazy Load bei WordPress deaktivieren

Da das WordPress interne Lazy Load im Core etabliert wurde, gibt es an sich keine eigene Einstellungsmöglichkeit, diese Funktion zu deaktivieren. Eine Lösung zur Deaktivierung gibt es aber natürlich trotzdem, wenn du das Lazy Load von WordPress nicht nutzen möchtest. Hierbei gibt es grundsätzlich zwei Optionen:


Option 1: Das Lazy Load über einen Code deaktivieren


Option 2: Ein Plugin zur Deaktivierung verwenden

Normalerweise wird es nicht empfohlen, die Lazy Load Funktion für Webseiten auszuschalten, da diese einige Performance Vorteile für deine Webseite mitbringt und nach dem Deaktivieren deine Webseite verlangsamen kann. Manchmal kann es jedoch vorkommen, dass Lazy Load das Benutzererlebnis auf deiner Webseite einschränkt, falsche Signale bei dem User sendet oder sich mit anderen Lazy Load Tools blockiert.


Ein Beispiel:


Das Lazy Load lädt Bilder und Videos zeitverzögert. Diese Verzögerung ist normal sehr gering. Bei einem Test unsererseits, wie sich der Lazy Load Effekt optisch darstellt, zeigte sich uns dieses Nachladen optisch wie ein bewusst erzeugter Effekt, der Bilder erscheinen lässt. Dieses normalerweise sehr kurze Nachladen kann leider hin und wieder länger dauern, was die flüssige Benutzererfahrung einschränken kann. Insbesondere auf Webseiten, die von Bildern und Videos leben, stellt dieser Lazy Load Effekt eher ein Problem bzw. eine unangenehme Darstellung auf der Webseite dar. Deshalb kann es nützlich sein, die Lazy Load Funktion auszuschalten.

I. Lazy Load über Code deaktivieren

Die Möglichkeit Lazy Load bei WordPress intern abzuschalten, hast du über den HTML-Quellcode. Hier befindet sich das Attribut „loading=lazy“. Arbeitest du direkt in deiner Webseiten Code-Struktur, kann ein kleiner Fehler allerdings schon dazu führen, dass deine gesamte Webseite lahmgelegt wird. Deshalb empfehlen wir dir, auch für die Code-Deaktivierung von Lazy Load ein Plugin zu verwenden, welches den Code an der richtigen Stelle für dich bearbeitet.


Das Plugin heißt WPCode und dient dazu, benutzerdefinierte Codes zu deiner Webseite hinzuzufügen. WPCode erhältst du kostenlos bei WordPress und die Premium-Version ab 49 $ pro Jahr.

WPCode bei WordPress
Startseite der WPCode Webseite
Das Plugin kannst du ohne Probleme in der kostenfreien Version für das Ausschalten von Lazy Load verwenden. Nachdem du das Plugin bei WordPress installiert und aktiviert hast, begibst du dich über dein WordPress Backend in die WPCode Snippet Einstellungen (Fotos zur Anleitung findest du in der folgenden Bildergalerie):
  • Hier findest du oben direkt den Button „Add new“, über den du neue Code Snippets hinzufügen kannst.
  • Im sich öffnenden Fenster findest du eine Auswahl an Möglichkeiten, wie du einen Code hinzufügen kannst. Klicke hier auf „Add your Custom Code (new Snippet)“.
  • Es öffnet sich ein Fenster, in dem du eine Code Struktur einfügen kannst. Wähle hier im rechten Auswahlfenster „PHP Snippet“ aus.
  • Anschließend kopierst du den folgenden Code und fügst diesen in das offene Feld ein:








add_filter( 'wp_lazy_loading_enabled', '__return_false' );

  • Scrolle nun etwas weiter herunter und wähle „Auto Insert“ aus, sodass deine Code-Struktur automatisch in deine Webseite hinterlegt wird. Dieser Punkt sollte normalerweise automatisch ausgewählt sein.
  • Klicke nun oben rechts auf „Save Snippet“, um deine Einstellungen zu speichern.
  • Fertig, schon hast du das Lazy Load bei WordPress ausgeschaltet.
Lazy Load bei WordPress deinstallieren Tutorial
Lazy Load bei WordPress deinstallieren Tutorial
Lazy Load bei WordPress deinstallieren Tutorial
Lazy Load bei WordPress deinstallieren Tutorial

II. Lazy Load über Plugin ausschalten

Das WordPress interne Lazy Load kann auch über das Plugin Disable Lazy Load ausgeschaltet werden. Das Plugin erhältst du kostenlos bei WordPress und stammt von der Firma Plugin Planet.


Das Plugin bietet nur eine einzige Funktion – nämlich das Deaktivieren von Lazy Load über eine einzelne Code-Struktur. Im Grunde handelt es sich dabei um denselben Code, lediglich in einer anderen Anwendung.

Diable Lazy Load
Dadurch, dass das Plugin nur ein einziges Ziel verfolgt, besitzt das Plugin auch keine Einstellungs- oder Konfigurationsmöglichkeiten. Mit der Installation und Aktivierung des Plugins wird das Lazy Load von WordPress automatisch ausgeschaltet.

7. Fazit

Lazy Load an sich ist eine wichtige Funktion, die aber nicht immer richtig zum Einsatz kommt. Denn Lazy Load kann deine Webseite auch negativ beeinflussen, langsamer machen oder dem Benutzer ein falsches Signal senden.


Grundsätzlich dient das Lazy Load aber dazu, deine Webseite bei großen Datenmengen schneller zu machen und zu optimieren.Hier gilt es deshalb zu schauen, welche Funktion oder welcher Funktionsumfang für deine Webseite der richtige ist. Dabei kommt es auch darauf an für welche Inhalte du Lazy Load benötigst, da nicht jedes Tool dieselben Inhalte unterstützt.


Hinterlasse uns gerne einen Kommentar und erzähle uns, welche Lösung du für Lazy Load verwendest. ☺️

Picture of Johanna

Johanna

Mehr aktuelle Beiträge rund um WordPress & Co.:

2 Antworten

  1. Liebe Johanna,

    dein Artikel zu Lazy Load ist spitze! Ich habe ihn genau gelesen und mich sehr gut zu dem Thema informiert gefühlt. Dank deiner aufgelisteten Schritte, fällt es leicht, in das Thema einzutauchen. 🙂

    Liebe Grüße
    Luay Georgis

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert