In WordPress Lazy Loading einsetzen – so geht’s!

Um die Performance Ihrer WordPress-Website zu verbessern, sollten Sie auf Lazy Loading setzen. Die Funktion ist zwar inzwischen Teil des WordPress-Cores, kann aber durch Plugins noch erweitert werden.

Lazy Loading ist eine Technik für die Performance-Verbesserung bei einem Website-Aufruf. Statt alle Inhalte gleichzeitig zu laden, werden zunächst nur solche Bilder und Videos bereitgestellt, die von den Nutzerinnen und Nutzern auch sofort gesehen werden. Alles, was noch nicht im sichtbaren Bereich liegt, wird nachträglich geladen.

Dank Lazy Loading können Besucherinnen und Besucher also viel schneller mit der Webseite arbeiten. Wenn sie den sichtbaren Bereich fertiggelesen (oder angeschaut) haben, ist schließlich auch der Bereich „below the fold“ geladen – also das, was erst nach dem Scrollen erscheint.

Mit Lazy Loading können Sie Ihr WordPress schneller machen. Dabei wird zwar das eigentliche Laden nicht beschleunigt, aber die User Experience wird verbessert. Die Nutzerinnen und Nutzer einer Website bekommen die Inhalte, die zunächst am wichtigsten sind, schnell geliefert. Alles andere kann dann unbemerkt im Hintergrund geladen werden.

Das mag auch Google: Die Core Web Vitals sind Ranking-Faktoren, die auf die zügige Bereitstellung von Website-Elementen zielen. Je schneller sich mit einer Website interagieren lässt, desto positiver wird das Ranking in den Suchergebnissen beeinflusst. Damit gehört Lazy Loading auch zur Suchmaschinenoptimierung (SEO). In Kombination mit anderen WordPress-SEO-Optionen bringt dies Ihre Website nach vorne.

Sie können die Performance Ihrer Seite auch verbessern, indem Sie Bilder komprimieren. Dann werden die grafischen Inhalte entsprechend wirklich schneller geladen. Außerdem ist es sinnvoll, wenn Sie die WordPress-Bildergrößen kennen, um die perfekten Bildausschnitte zu wählen.

Seit der Version 5.5 ist Lazy Loading in WordPress standardmäßig für Grafiken aktiviert. Immer, wenn Sie ein Bild in Ihren Seiten und Beiträgen unterbringen, fügt WordPress den Dateien automatisch ein Attribut hinzu. Dieses lässt sich im Quellcode so erkennen:

Das Attribut wird inzwischen zum Beispiel von Chrome, Firefox und Safari unterstützt. Das bedeutet aber auch, dass andere Browser eben nicht auf das Attribut reagieren. Zusätzlich gibt es noch andere Inhalte, etwa Videos, die von Lazy Loading profitieren können. Das Attribut wird aber nur an Bilder angehängt. Möchte man die Technik auf seiner Website also umfassender einsetzen, muss man auf andere Optionen setzen: Mithilfe von Plugins können Sie das Lazy Loading ausweiten, wenn Sie zum Beispiel in WordPress Videos einbinden möchten.

Um Lazy Loading in WordPress besser steuern zu können, empfiehlt es sich, Plugins einzusetzen. Hier eine Übersicht von guten Erweiterungen:

Das Plugin LazyLoad von WP Rocket ermöglicht Lazy Loading für Bilder, Videos und iFrames und geht damit über die Möglichkeiten der Standardeinstellung hinaus – und bleibt gleichzeitig mit 10 KB sehr schlank. Sogar Avatare und Smileys werden von dem Plugin erfasst. Interessant ist auch, dass man eingebettete YouTube-Videos zunächst mit Vorschaubildern ersetzen kann, bevor diese richtig geladen werden. Das verringert die Ladezeit beim Seitenaufbau.

Das Plugin ist direkt einsatzbereit und muss nicht konfiguriert werden. Das ist aber auch einer der Nachteile: LazyLoad bietet kaum Einstellungsmöglichkeiten. Immerhin kann man Lazy Loading für unterschiedliche Medientypen unabhängig voneinander aktivieren bzw. deaktivieren.

Wer mehr Features möchte, kann zum kostenpflichtigen WordPress-Caching-Plugin WP Rocket upgraden. In diesem ist Lazy Loading enthalten, aber eben auch andere Optimierungsfunktionen.

Sehr viel mehr Optionen erhalten Sie bei a3 Lazy Load. Das Plugin bietet Ihnen etwa die Möglichkeit, Lazy Loading unabhängig voneinander für Bilder oder Videos und iFrames zu aktivieren. Doch dabei endet die Auswahl nicht. Sie können sogar bestimmen, welche Art von Bildern vom Lazy Loading erfasst werden soll. Beispielsweise schließen Sie Gravatare oder Thumbnails aus. Auch auf verschiedenen Seitentypen (etwa der Startseite) kann die Funktion deaktiviert werden. Noch detaillierter gehen Sie vor, wenn Sie mithilfe der URI einzelne Objekte vom Lazy Loading ausschließen.

Darüber hinaus bietet a3 Lazy Load die Möglichkeit, das Aussehen des Nachladens zu bestimmen: Sollen die Bilder langsam eingeblendet werden oder soll das Plugin ein Ladesymbol anzeigen? Technisch wichtiger ist allerdings, dass Sie den Viewport erweitern können. So stellen Sie ein, dass Teile des eigentlich noch nicht sichtbaren Bereichs direkt geladen werden.

Eine weitere Besonderheit des Plugins: Sie können über a3 Lazy Load das standardmäßige Lazy Loading, das bereits im Core von WordPress enthalten ist, ausschalten. So gehen Sie sicher, dass sich die Funktionen des Plugins und des CMS nicht in die Quere kommen.

Das Plugin Optimole geht über Lazy Loading hinaus und versucht generell, das Bereitstellen von Bildern auf Ihrer WordPress-Website zu verbessern. Zusätzlich zum smarten Laden werden Ihre Bilder mithilfe des Plugins komprimiert. Außerdem wird die Bildergröße an das Endgerät des jeweiligen Nutzers oder der jeweiligen Nutzerin angepasst. Hinzu kommt ein eigenes Content Delivery Network (CDN), über das die Bilder ausgespielt werden. Das kann die Ladezeit nochmals verkürzen.

Für Lazy Loading gibt es allerdings kaum Optionen. Neben der Entscheidung, ob Sie die Funktion nutzen wollen, können Sie nur noch Hintergrundgrafiken vom Lazy Loading ausschließen. Hinzu kommt, dass Sie sich bei Optimole erst registrieren müssen, bevor Sie die Funktionen einsetzen können.

Auch Smush ist eine umfassende Suite, um Ihre WordPress-Seite schneller zu machen. Dafür kann dieses Plugin die Bilder automatisch komprimieren und löscht dabei auch EXIF-Daten, um die Dateigröße zusätzlich zu reduzieren. Genau wie Optimole bietet Smush zusätzlich ein CDN, um das Bereitstellen von Bildern noch mehr zu beschleunigen.

Anders als Optimole hat Smush aber ein paar Optionen für Lazy Loading mehr mit an Bord: Sie stellen beispielsweise ein, für welche Grafikformate die Funktion aktiv sein soll und können dabei auch iFrames hinzuziehen bzw. abwählen. Außerdem bestimmen Sie die Orte oder Einsatzzwecke: Sollen etwa Thumbnails oder Bilder in Widgets auch vom Lazy Loading erfasst werden? Einzelne Seitentypen lassen sich ebenfalls ausschließen. Noch genauer können Sie Lazy Loading definieren, indem Sie spezifische URLs oder URIs ausschließen.

Wie bei a3 Lazy Load kann man bei Smush auch das Lade-Design anpassen. Ein Fade-in ist genauso möglich wie ein sich drehendes Ladesymbol oder eine Platzhaltergrafik.

Der Lazy Loader von Florian Brinkmann arbeitet nicht mit dem loading-Attribut, sondern verwendet ein Skript. Darüber lässt sich das Nachladen von Bildern, iFrames, Videos und Audiodateien einstellen. Zum Verfeinern können Sie CSS-Klassen angeben, die vom Lazy Loading ausgeschlossen werden sollen. Durch Aktivierung einer Option bestimmen Sie bei jeder Seite und jedem Beitrag, ob diese von Lazy Loading erfasst werden sollen.

Um das Laden grafisch etwas aufzubereiten, kann man einen animierten Kreis aktivieren und dessen Farbe einstellen.

Wenn Sie sich nicht auf die Standardfunktion von WordPress verlassen wollen, sollten Sie sich für ein Plugin entscheiden. Da a3 Lazy Load mit vielen Funktionen kommt, wählen wir für die Anleitung diese Erweiterung.

Immer bevor Sie größere Änderungen an Ihrer Seite vornehmen, sollten Sie in WordPress ein Backup erstellen. So gehen Sie sicher, dass Sie bei Komplikationen schnell zu einer funktionierenden Version zurückkehren können. Außerdem sollten Sie über ein WordPress-Child-Theme nachdenken. Dieses Duplikat des eigentlichen Themes sorgt dafür, dass nach einem Update durch den Theme-Anbieter alle Ihre Einstellungen noch funktionieren.

Rufen Sie den Plugin-Bereich im WordPress-Backend auf und wechseln Sie dort zum Punkt „Installieren“. Wenn Sie nun im Suchfeld „a3 Lazy Load“ eintragen, wird Ihnen das entsprechende Plugin angezeigt. Mit einem Klick können Sie dieses nun installieren und anschließend mit einem weiteren Klick auch aktivieren.

Die Optionen des Plugins finden Sie im Menüpunkt „Einstellungen“ des WordPress-Dashboards. Dort hat a3 Lazy Load nun einen eigenen Eintrag. Alternativ gelangen Sie über die Plugin-Übersicht in die Einstellungen der Erweiterung. Direkt im zweiten Menüpunkt („Lazy Load Activation“) können Sie die Funktion auch wieder ausstellen, ohne das Plugin zu deaktivieren. Außerdem legen Sie dort fest, ob Sie die Lazy-Loading-Standardfunktion von WordPress ausstellen möchten – was sich durchaus anbietet, um Komplikationen zu vermeiden.

Nun legen Sie fest, welche Objekte von Lazy Load betroffen sein sollen. Hierfür stehen Ihnen unterschiedliche Optionen zu Verfügung:

• Lazy Load Images: Hier legen Sie fest, an welchen Stellen Bilder von Lazy Loading erfasst werden sollen. So stellen Sie beispielsweise ein, dass nur Bilder im Content-Bereich und nicht etwa innerhalb von Widgets dazugehören.
   
• Lazy Load Videos and iFrames: Bestimmen Sie, ob Videos und iFrames im Content und/oder in Widgets vom Lazy Loading profitieren sollen.
   
• Exclude by URI’s and Page Type: Per Schieberegler stellen Sie ein, welche Seitentypen Sie ins Lazy Loading aufnehmen. Dort können Sie beispielsweise die Startseite oder eine Kategorieseite ausschließen. Außerdem haben Sie die Möglichkeit, per URI bestimmte Objekte auszusortieren.

Das Plugin gibt Ihnen noch die Möglichkeit, das Laden der Bilder und Videos optisch aufzuwerten. Unter dem Punkt „Effect & Style“ nehmen Sie die entsprechenden Einstellungen vor. Sie haben die Wahl zwischen einem Fade-in oder einem sich drehenden Kreis. Zusätzlich legen Sie die Hintergrundfarbe fest, die Sie beispielsweise an den Hintergrund Ihrer Website anpassen können.

Die Lazy-Loading-Standardfunktion ist Teil des WordPress-Cores. Es ist eigentlich nicht vorgesehen, dass man dieses Feature abschaltet. Deshalb hat WordPress in seinen eigenen Einstellungen auch keine entsprechende Funktion dafür. Dennoch kann es sinnvoll sein, die Funktion abzuschalten, etwa wenn Sie ein Plugin mit Lazy-Loading-Option verwenden. So verhindern Sie Konflikte zwischen den beiden Funktionen.

Für die Deaktivierung kann man z. B. ein Plugin wie das vorgestellte a3 Lazy Load einsetzen. Mit Disable Lazy Load findet man sogar ein eigens dafür programmiertes Plugin. Dieses muss man nur aktivieren, und schon geht die Lazy-Load-Funktion des Cores nicht mehr.

Sie benötigen aber nicht zwingend ein Plugin. Die Deaktivierung der Funktion lässt sich auch über einen Eintrag im Quellcode erreichen. Vorher sollten Sie ein Child-Theme erstellen, um sicherzugehen, dass nach einem Theme-Update Ihre Änderungen nicht einfach verloren gehen. Dann gehen Sie über den Menüpunkt „Design“ zum „Theme-Datei-Editor“ und rufen die Datei functions.php auf. Dort fügen Sie eine neue Zeile ein:

Wenn Sie nun auf „Datei aktualisieren“ klicken, werden die Änderungen übernommen, und Lazy Loading ist deaktiviert.