Die durchschnittliche Größe einer Webseite liegt bei 3719 kB, wobei Bilder und Videos laut http Archiv nahezu 78% des Gesamtgewichts ausmachen. Das sind viele Bytes, die der Browser eines Websitebesuchers herunterladen und rendern muss. In Zukunft wird der Workload vermutlich noch größer, da umfangreichere Websites und eine zunehmende Verwendung von Bildern im Trend liegen. WordPress ist führend, wenn es um die Freigabe von Medien und die Einbindung von Mediendateien in das Web Design geht. Es ist kinderleicht, Bilder und Videos in Beiträge, Seiten und sogar in den Hintergrund des Themes zu integrieren.

All diese Ressourcen machen das Herunterladen einer Webseite jedoch zu einem langwierigen Erlebnis für Benutzer, da diese auf das Herunterladen großer Dateien – einschließlich der Dateien, die zunächst nicht einmal sichtbar sind – warten müssen, bevor sie eine Webseite betrachten können. Hier kommt WordPress Lazy Load ins Spiel.

Was ist Lazy Loading und wie funktioniert es?

Lazy Loading ist eine Optimierungstechnik, die sichtbare Inhalte lädt, aber das Herunterladen und Rendern von Inhalten, die nicht aktuell gebraucht werden, verzögert.  Es ist genau einer der Sachen, die Google begeistert und es ist eine Technik, die Du in Betracht ziehen solltest, wenn Deine Beiträge und Seiten viele eingebettete Videos und hochauflösende Bilder enthalten.

Sind Sie es leid, sich mit dem langsamen WordPress-Hosting und 500 Fehlern herumzuschlagen?

Lassen Sie sich von Kinsta das leistungsstarke Hosting auf die richtige Art und Weise zeigen. Kombinieren Sie unsere Google Cloud-basierte Infrastruktur, HTTP/2 CDN und PHP 7, um die blitzschnellen Ladezeiten zu sehen, von denen Sie geträumt haben!

Lazy Loading funktioniert so:

  • Der Browser erstellt das DOM der Webseite, ohne Bilder herunterzuladen und Videos vorzuladen.
  • JavaScript wird zur Bestimmung derjenigen Bilder und Videos verwendet, die heruntergeladen bzw. vorgeladen werden sollen. Dies wird basierend auf dem Inhalt, der beim Laden der Seite zunächst sichtbar ist, bestimmt. Es werden also dementsprechend nur die Inhalte geladen, die auch wirklich benötigt werden.
  • Das Herunterladen und Rendern von zusätzlichen Inhalten verzögert sich, bis ein Seitenbesucher die Seite nach unten scrollt und die zusätzlichen Inhalte relevant werden.

Bilder und Videos werden also erst dann geladen, wenn sie tatsächlich benötigt werden. Dies kann eine deutliche Leistungssteigerung für Websites mit vielen hochauflösenden Bildern und eingebetteten Videos bewirken.

Lazy loading kann einen großen Einfluss auf die Geschwindigkeit der Webseite haben, vor allem wenn Du viele Bilder verwendest. 🚀 Click to Tweet

WordPress Lazy Load

Wie bei so vielen anderen Leistungsproblemen von Websites, gibt es auch für verzögertes Laden ein Plugin in WordPress, mit dem Du das Problem beheben kannst. Es stehen sogar viele kostenlose Plugins zur Verfügung, mit denen man Bilder und Videos bequem nach Bedarf laden kann. Nachdem wir ein paar Dutzend Plugins auf Herz und Nieren geprüft haben, haben wir drei Plugins identifiziert, die eine messbare Verbesserung der Websiteleistung bewirken. Wenn Du bereit bist, Lazy Loading zu implementieren, solltest Du zunächst diese drei Aspekte berücksichtigen.

Wird eine Website wirklich durch Bilder und Videos verlangsamt?

Bevor Du überhaupt Bilder in WordPress hochlädst, solltest Du sie erst einmal optimieren.

Wir brauchen eine Grundauswertung, damit wir die Auswirkungen des Hinzufügens von Bildern und Videos sehen können. Es hat keinen Sinn, ein Problem zu beheben, wenn es von Anfang an keines gibt. Ich habe eine Standard WordPress Installation auf einem Kinsta Hosting Account für einen Test eingerichtet. TwentySixteen ist das aktive Theme und es wurden keine Optimierungs-Plugins oder Techniken wie Caching implementiert.

Hier ist die Bewertung des Pingdom Website Geschwindigkeitstest, bevor Bilder oder Videos hinzugefügt wurden.

Geschwindigkeitstest ohne Bilder und Videos

Geschwindigkeitstest ohne Bilder und Videos

Wie Du sehen kannst, ist die Seite mit knapp 155 kb sehr kompakt und in weniger als einer halben Sekunde geladen. Aber was passiert, wenn wir eine Seite mit großen Bilddateien und eingebetteten YouTube-Videos hochladen?

Geschwindigkeitstest ohne Lazy Loading Plugin

Geschwindigkeitstest ohne Lazy Loading Plugin

Die Seitengröße ist auf 1,7 MB gestiegen und die Ladezeit der Seite hat sich mit nun knappen 1,3 Sekunden fast verdreifacht. TwentySixteen ist ein gut geschriebenes, kompaktes Theme, sodass die Seite selbst mit einem halben Dutzend Bildern und hinzugefügten YouTube-Videos immer noch erstaunlich flink lädt. Wir können jedoch sehen, dass das Hinzufügen von Bildern und Videos die Seite vergrößert und die Geschwindigkeit des Seitenladens erheblich verlangsamt hat.

Verbesserung der Seitenladegeschwindigkeit mit Lazy Loading Plugins

Vier Plugins, die die Bereitstellung dieser Webseite erheblich beschleunigen, sind BJ Lazy Load, Lazy Load XT, a3 Lazy Load und Lazy Load. Schauen wir uns an, wie sich jedes einzelne verhält. Wir haben ebenfalls mehrere andere Plugins getestet, die aber nicht zu einer messbaren Verbesserung der Performance der Webseite führten. Wenn Du Lazy Load Plugins ausprobierst, solltest Du einen Vorher-Nachher-Test durchführen, um sicherzustellen, dass die gewünschten Ergebnisse erzielt wurden.

1. BJ Lazy Load

BJ Lazy Load ist ein sehr beliebtes Plugin. Es ist auf mehr als 70.000 WordPress-Webseiten aktiv und wird anhand von 60 Gesamtbewertungen mit 4,1 von 5 bewertet.

bj lazy load plugin wordpress

BJ Lazy Load plugin

Mithilfe des integriertem Plugin Installers für WordPress verläuft die Installation und Einrichtung mühelos und schnell. Nach der Aktivierung wird unter Einstellungen > BJ Lazy Load ein neuer Menüpunkt hinzugefügt. Alle Optionen für das Lazy Loading sind standardmäßig ausgewählt. Wenn Du nach der Aktivierung nicht auf Probleme im Frontend stößt, musst Du bei diesen Einstellungen auch nichts mehr ändern.

Eine Option, die im Gegensatz zu den anderen beiden nur dieses Plugin zur Verfügung stellt, ist die Möglichkeit, eine URL für ein Bild hinzuzufügen, die als Platzhalter für von verzögertem Laden betroffenen Bildern und Videos verwendet wird, bis die tatsächlichen Ressourcen heruntergeladen sind. Wenn Du diese Option verwendest, solltest Du natürlich eine sehr kleine Datei und kein hochauflösendes Bild verwenden.

Für einen möglichst geringen Speicherbedarf und nahtlose Ergebnisse empfehle ich, ein Vollfarbbild in der gleichen Farbe wie der Hintergrund Deiner Webseite zu erstellen und es im PNG-Format zu speichern.

Du kannst auch eine HTML-Klasse angeben, die vom Lazy Loading ausgeschlossen wird. Diese Klasse kann dann auf alle Bilder und Videos angewendet werden, die Du von dem verzögerten Laden ausschließen möchtest. Außerdem kannst Du angeben, wie nah ein Bild oder Video an den Viewport (Ansichtsbereich) herankommen soll, bevor es heruntergeladen und gerendert wird.

Mal sehen, wie schnell unsere Seite geladen wird, wenn BJ Lazy Load eingerichtet ist.

Geschwindigkeitstest mit BJ Lazy Load Plugin

Geschwindigkeitstest mit BJ Lazy Load Plugin

Wie Du sehen kannst, ist es nun richtig schnell. Die Seite wurde ein halbes Dutzend Mal zu verschiedenen Zeitpunkten getestet und die Ladezeiten lagen konstant zwischen 300 und 400 Millisekunden.

Dieses Testergebnis ist jedoch kein Ausreißer.

Während die Seite mit diesem installierten Plugin schockierend schnell geladen wird, hat sich die Größe der Seite tatsächlich erhöht. Was hat es damit auf sich? In der Theorie sollte die Seitengröße bei aktiviertem Lazy Load eigentlich abnehmen, da ja nicht alle Bilder mit dem Laden der ersten Seite heruntergeladen werden.

Ich habe ein bisschen recherchiert und folgendes gefunden.

Wie stellt WordPress Bilder bereit?

Normalerweise zeigt WordPress dem Browser verschiedene Dateigrößen über das srcset-Attribut des img-Elements an, das zum Einbetten des Bildes verwendet wird. Der Browser durchsucht die Liste der verfügbaren Größen und lädt die kleinste Version des Bildes, das dann den verfügbaren Platz ausfüllt.

Das bedeutet, dass WordPress, wenn Du eine wirklich große Bilddatei hochlädst, den Besuchern Deiner Webseite automatisch mehrere kleinere Versionen dieses Bildes anbietet. Der Browser Deines Besuchers erfasst also das kleinste geeignete Bild, basierend auf der Anzahl der Pixel, die für das zu belegende Bild zur Verfügung stehen.

Wie verändert BJ Lazy Load diesen Ablauf?

BJ Lazy Load überschreibt das Standardverhalten von WordPress. Das srcset-Attribut wird durch ein data-lazy-srcset-Attribut ersetzt, das in Verbindung mit dem Plugin-Skripting arbeitet. Das Endergebnis ist, dass keine verkleinerte Version des Bildes heruntergeladen, sondern das Bild in voller Auflösung heruntergeladen und gerendert wird.

Das ist nicht ideal, aber solange man Bilddateien optimiert, bevor man sie in WordPress hochlädt – was ich nicht getan habe – dann wird man nicht das gleiche Problem sehen.

Laden einer Seite mit BJ Lazy Load

Laden einer Seite mit BJ Lazy Load

Ein einfaches Beobachten der Seite beim Laden zeigt, dass unter Verwendung von Lazy-Load in Kombination mit einer Hintergrundfarbe, die nicht weiß ist, ein Platzhalter erforderlich ist. Ansonsten wird standardmäßig anstelle des Bildes ein weißes Platzhalter GIF verwendet.

2. Lazy Load XT

Lazy Load XT hat in unseren Tests gut abgeschnitten und ist ein weiteres gutes WordPress Lazy Load Plugin. Mit etwas mehr als 4.000 aktiven Installationen ist dieses Plugin nicht so beliebt wie BJ Lazy Load. Es fiel mir jedoch mit seiner beeindruckenden Bewertung von 4,9 von 5 Sternen auf. Nur eine der 22 veröffentlichten Rezensionen vergibt weniger als 5 Sterne.

lazy load xt plugin wordpress

Lazy Load XT plugin

Nach der Aktivierung wird das Plugin durch Navigation in das Menü unter Einstellungen > Lazy Load XT konfiguriert. Du wirst schnell feststellen, dass dieses Plugin mehr kann als nur das verzögerte Laden von Bildern und Videos. Du kannst dieses Plugin auch verwenden, um JS- und CSS-Dateien zu verkleinern, JavaScript- und CSS-Bibliotheken unter Verwendung von Cloudflare-CDN zu laden und Skripte in die Seitenfußzeile zu verschieben.

Es gibt eine ganze Reihe zusätzlicher Optionen, mit denen Du die Leistung der Webseite anpassen kannst. Da wir an dieser Stelle jedoch nur das Lazy Loading testen, habe ich die Standardeinstellungen so gelassen, wie sie sind. Ich habe mich also nicht mit der Verkleinerung oder Verschiebung von CSS und JavaScript beschäftigt, sondern nur den Server-Cache geleert und den Pingdom-Website-Geschwindigkeitstest durchgeführt.

Geschwindigkeitstest mit Lazy Load XT

Geschwindigkeitstest mit Lazy Load XT

Die Seite liegt immer noch bei 2 MB, aber die Seitenladezeit ist nicht ganz so schnell wie bei BJ Lazy Load. Immerhin haben wir aber eine 50%ige Reduktion der Seitenladezeit gegenüber der Seite ohne Lazy Load erreicht.

Ein kurzer Blick auf den Dateibaum in den Testergebnissen zeigt, dass mit aktiviertem Lazy Load XT Plugin das Gleiche passiert wie bei BJ Lazy Load. Anstatt eine optimierte Version des Bildes zu laden, wird bei aktiviertem Plugin die Vollauflösungsversion des Bildes heruntergeladen und gerendert.

Auch wenn das Plugin keinen gleich großen Geschwindigkeitsschub wie BJ Lazy Load erzeugte, gewinnt es bei der Darstellung. Im Gegensatz zu BJ Lazy Load ist der von Lazy Load XT verwendete Platzhalter nämlich transparent. Dadurch gibt es beim Laden der Bilder und Videos keine unschönen leeren weißen Kästen und Du musst Dich nicht um die Erstellung und den Upload eines Platzhalterbildes kümmern.

3. a3 Lazy Load

a3 Lazy Load ist eine weitere beliebte WordPress Lazy Load Option. Dieses Plugin ist auf mehr als 50.000 WordPress Webseiten aktiv und hat eine sehr gute Bewertung von 4,7 von 5 Sternen und fast 40 Nutzerbewertungen.

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Sieh dir unsere Features an
a3 lazy load wordpress plugin

A3 Lazy Load plugin

Die Aktivierung des Plugins fügt ein Einstellungsmenü unter Einstellungen > a3 Lazy Load hinzu. Zu Testzwecken habe ich die Standardeinstellungen mit einer kleinen Ausnahme in Ruhe gelassen. Ich habe die Option „Hintergrundfarbe laden“ verwendet, um die Farbe des Platzhalters an die Farbe des Hintergrunds der Webseite anzupassen. Mit dieser vorgenommenen Änderung und den Standardeinstellungen hat die Webseite sehr gut performt.

Geschwindigkeitstest mit A3 Lazy Load Plugin

Geschwindigkeitstest mit A3 Lazy Load Plugin

Wir sind wieder bei einer Seitenladezeit von weniger als einer halben Sekunde gelandet. Das ist, angesichts der Anzahl der Bilder und Videos, die auf dieser Webseite enthalten sind, bemerkenswert.

Testergebnisse im Vergleich

Zweifellos wirst Du feststellen, dass die Seitengröße und die Anzahl der Anfragen deutlich zurückgegangen sind. Was verursacht diesen dramatischen Unterschied? Pingdom bietet eine Momentaufnahme der Inhaltsgröße und somit liefert schneller Vergleich die Antwort. Im untenstehenden Bild wird ein Schnappschuss der Inhaltsgröße bei aktiviertem a3 Lazy Load abgebildet.

Inhaltsgröße mit a3 Lazy Load Plugin

Inhaltsgröße mit a3 Lazy Load Plugin

Der Speicherbedarf des Bildes ist mit etwas mehr als 150 kb klein. Sowohl BJ Lazy Load als auch Lazy Load XT erzeugten eine Seitengröße von 2,0 MB. So sieht der Screenshot mit einer Gesamtnutzlast von 2,0 MB aus.

Inhaltsgröße mit Lazy Load XT Plugin

Inhaltsgröße mit Lazy Load XT Plugin

Das Skript, HTML, CSS und andere Inhaltsgrößen sind nahezu identisch. Die Bildgröße beträgt jedoch 1,86 MB – im Grunde genommen die Größe der Vollversion des allerersten Bildes auf der Seite – und nicht nur 150 kb. Was ist da also los? Wie bereits erwähnt, liefert WordPress automatisch eine Vielzahl von Bildgrößen und der Browser wählt und rendert die kleinstmögliche Version, basierend auf der Größe, in der das Bild auf dem Bildschirm wiedergegeben wird.

Sowohl BJ Lazy Load als auch Lazy Load XT überschreiben diesen Ablauf und liefern am Ende das Bild in voller Auflösung. a3 Lazy Load hingegen tut das nicht und liefert somit eine viel kleinere Bilddatei.

Merkwürdigerweise lädt die Webseite trotz der Seitengrößendifferenz schneller mit aktiviertem BJ Lazy Load Plugin als mit aktiviertem a3 Lazy Load Plugin. Wir haben die Tests mehrfach wiederholt um sicherzustellen, dass die hier gezeigten Ergebnisse repräsentativ sind. Der Unterschied kann durch die Anzahl der HTTP-Requests, die zum Laden der Seite benötigt werden, erklärt werden. Auf den ersten Blick sieht es so aus, als ob BJ Lazy Load mehr Anfragen benötigt. Schauen wir uns jedoch den Dateibaum an, sehen wir, was wirklich vor sich geht.

URIs für Daten der Lazy Load

URIs für Daten der Lazy Load

Die Site-Datei mit aktiviertem BJ Lazy Load enthält etwa zwanzig Anfragen, die mit data:image/gif beginnen. Dies sind Daten-URIs und keine http-Requests. In Wirklichkeit sagen sie dem Browser, dass er ein gif lokal erstellen soll, anstatt das gif von einem Server anzufordern. Infolgedessen benötigt BJ Lazy Load zum Aufbau der Seite nur 17 http-Requests, während bei a3 Lazy Load 27 benötigt werden. Das erklärt, warum die Seite blitzschnell geladen wird.

Lazy Load XT verwendet eine ähnliche Taktik, benötigt aber immer noch ein paar mehr Anfragen als BJ Lazy Load, weshalb es nicht die identischen Ergebnisse liefert.

4. Lazy Load

Die vierte Option ist Lazy Load, ein kostenloses Plugin, das vom Team bei WP Rocket erstellt wurde. Es gab bisher 10.000 Installationen bei einer Bewertung von 4 von 5 Sternen. Wenn Du nach einer einfachen WordPress Lazy Load Option mit einer guten Geschwindigkeit suchst, ist dies eine gute Wahl.

Lazy Load Plugin von WP Rocket

Lazy Load Plugin von WP Rocket

Dieses Plugin kann für Miniaturansichten, sämtliche Bilder in einem Beitrag oder Widget-Text, Avataren und Smileys benutzt werden. Der große Vorteil ist, dass es keine JavaScript-Bibliothek wie jQuery gibt und das Skript weniger als 10 KB wiegt. Man muss keine Optionen konfigurieren, sondern lediglich das Plugin installieren und schon funktioniert das verzögerte Laden.

5. Lazy Load for Videos

Wenn Du Dich besonders für das verzögerte Laden von Videos interessierst, empfehlen wir das Plugin Lazy Load for Videos. Während diese Funktion auch einige der oben genannten Plugins anbietet, ist dieses eine großartige Lösung für reine Videoinhalte.

Plugin für Lazy Load für Videos

Plugin für Lazy Load für Videos

Auswirkungen von Lazy Load auf SEO

Welches Plugin Du auch im Endeffekt für WordPress verwendest, es ist in jedem Fall wichtig, dass Du Deine SEO dadurch nicht schädigst. Es gibt zwei Dinge, die Du noch einmal überprüfen solltest:

  1. Stelle sicher, dass Google Deine verzögert geladenen Bilder noch durchsuchen kann. Das funktioniert ganz einfach mit dem Tool „Fetch as Google“ im Crawl-Bereich der Google Search Console. Wenn Du Deine Bilder noch im Quellcode sehen kannst, dann ist höchstwahrscheinlich alles in Ordnung.
  2. Stelle sicher, dass Du immer noch alt Text auf Deinen Bildern verwendest, da dies für die Rangliste der Google-Bildsuche wichtig ist.

Zusammenfassung und Empfehlungen

Was bedeutet das alles nun für uns? Alle vier Optionen haben hervorragende Arbeit geleistet, um die Geschwindigkeit des Seitenladens zu verbessern, indem sie Bilder und Videos verzögert geladen haben. Für welche Du Dich schlussendlich entscheidest, hängt von Deinen persönlichen Vorlieben ab und wie Du Bilder vorbereitest, bevor diese auf Deiner WordPress-Seite landen.

  • Wenn Du Bilder nicht optimierst, bevor Du sie auf Deiner WordPress-Website hochlädst – und das solltest Du wirklich tun -, dann entscheide Dich für a3 Lazy Load, damit Du den Nutzen der in WordPress integrierten Bildoptimierung nutzen kannst.
  • Wenn Du Bilder vor dem Hochladen optimierst und Wert auf eine schnelle und leichte Bereitstellung legst, kannst Du mit BJ Lazy Load nichts falsch machen. Lazy Load ist eine weitere gute Option.
  • Wenn Du Bilder vor dem Hochladen optimierst und Dir zusätzliche Konfigurationsoptionen wünschst, mit denen Du die Bereitstellung und Handhabung von CSS- und JavaScript-Ressourcen optimieren kannst, entscheide Dich für Lazy Load XT.

Verzögertes Laden ist nur eine der Techniken, die Du verwenden kannst, um Deine WordPress Website zu optimieren. Wenn Du viele Bilder und Videos verwendest, hat es jedoch das Potenzial, einen großen Einfluss auf die Geschwindigkeit der Webseite zu haben. Sobald Du Lazy Loading implementiert hast, gibt es mehrere zusätzliche Techniken, die Du in Betracht ziehen und implementieren kannst, um die beste Leistung zu erzielen. Haben wir andere gute WordPress-Lösungen für das Lazy Loading vergessen? Wenn ja, lass es uns in den Kommentaren wissen.