4. Februar 2015

WordPress Lazy Load Plugins Für kürzere Ladezeiten Bilder nachladen

   10 Kommentare

Share on Facebook10Tweet about this on Twitter8Share on Google+1Share on LinkedIn0Email this to someone

Moderne Webseiten setzen viel auf hochauflösende Bilder und Grafiken. Was sich positiv auf die Nutzererfahrung auswirkt, verlangsamt jedoch die Ladezeiten – und das trotz immer schnelleren Internets. Mit der Funktion Lazy Load verkürzt ihr die Ladezeit eurer Seite trotz vieler Bilder. Diese drei WordPress-Plugins haben wir uns angesehen und für gut befunden.

advanced lazy load bj lazy load crazy lazy

Seiten werden immer größer

Während Webseiten 2013 durchschnittlich 1081 KB groß waren, waren es im Juli 2014 bereits 1622 KB (Quelle). Durch den Einsatz von langen „OnePagern“ und vielen Bildern werden Seiten auch 2015 immer größer. Das führt trotz einer schnellen Internetanbindung zu längeren Ladezeiten, da nur wenige Elemente parallel vom Server heruntergeladen werden können.

growth-average-web-page2014

Auswertung der durchschnittlichen Seitengrößen durch die Seite Websiteoptimization.com

Das ist Lazy Load

Wenn Seiten immer länger werden, der sichtbare Bereich im Browser aber konstant bleibt, ist nur ein Bruchteil der Seite auf den ersten Blick, also ohne scrollen, sichtbar. Diesen Bereich nennt man „above the fold“. Und genau hier setzt das Prinzip von Lazy Load an. Statt regulär alle Bilder der Seite vom Server zu laden, werden anfangs nur jene Bilder geladen, die im sichtbaren Bereich liegen und ohne Scrollen sichtbar sind. Erst wenn der User nach unten scrollt, werden mittels JavaScript weitere Bilder nachgeladen. Das hat den Vorteil, dass bis zum Darstellen des sichtbaren Bereichs weniger Daten geladen werden müssen und eure User schneller mit dem Lesen anfangen können. Andererseits muss zusätzlich die Funktion, also das JavaScript, geladen werden. Daher ist Lazy Load gerade für WordPress-Seiten mit vielen Bilden gut geeignet.

Lazy Load als WordPress Plugin

Natürlich lässt sich Lazy Load per Code umsetzen, einfacher und viel bequemer funktioniert es aber mit Plugins. Dazu haben wir für euch diese drei Plugins getestet:

Als Vergleichswert dienen die Messwerte, die wir ohne Lazy-Load-Plugin mit Pressengers.de erreichen.

Ladezeiten mit und ohne Lazy Load

Für diesen Test haben wir unsere Seite pressengers.de mit den Tools pingdom.com, gtmetrix.com und den Page Speed Insights von Google getestet. Da unsere Seite weder ein Foto-Blog noch ein OnePager ist, kann die Lazy Load-Funktion nicht alle Vorteile ausspielen:

Ohne Lazy LoadAdvanced Lazy LoadBJ Lazy LoadCrazy Lazy
Seitengröße (MB)1,21,00,910,85
Ladezeit (Sek.)2,622,141,941,89
Anfragen8980136132
GTmetrix82%81%81%81%
YSlow80%79%79%79%
Google PageSpeed Insights85%85%82%86%

 

Die harten Kennzahlen zur Ladezeit verbessern sich mit jedem der eingesetzten Plugins. Aber tendenziell verschlechtern sich durch den Einsatz des Lazy Load-JavaScript die Gesamtnoten von Pressengers in den Benchmarks. Das ist auf den aktuellen Stand unserer Optimierung zurückzuführen, bei der wir eher ein Problem mit der Anzahl an JavaScript-Dateien als mit der Anzahl der Grafiken haben.

Fazit: Die Lazy Load-Funktion lohnt sich besonders für Foto-Blogs und Grafik-Intensive WordPress-Seiten. Mit diesen drei Plugins verkürzt ihr die Ladezeit eurer Seite und die Inhalte sind für eure Leser schneller sichtbar.

Share on Facebook10Tweet about this on Twitter8Share on Google+1Share on LinkedIn0Email this to someone
Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

10 Kommentare

Reaktionen auf diesen Beitrag

    • Hi,
      toll, wie ihr immer wieder auf „nützliche“ Plugins hinweist. – Aber: wie auch bei einem anderen Tipp kneift es bei Crazy Lazy bei meinem Theme (Pinboard).
      Mit aktiviertem Plugin wird plötzlich der komplette Content nicht mehr angezeigt, wenn ich meine Grid-Gallery (http://www.wonderplugin.com/wordpress-gridgallery/) nutze.
      Deaktiviere ich Crazy Lazy, wird alles wieder angezeigt.
      Lg
      Peter

    • Hi Hans,
      toller Vergleich, Crazy Lazy schlägt sich ja gut. Ich werde das Plugin mal testen. Eine Frage: Wie vertragen sich solche Plugins mit SEO? Wenn ich es richtig verstehe, erfolgt das Nachladen per JavaScript, was von Suchmaschinen jedoch nicht akzeptiert wird. Werden die Bilder daher überhaupt von Suchmaschinen indexiert?

      @Peter: Gibt es bei den anderen vorgestellten Plugins ebenfalls Probleme? Oder nur bei Crazy Lazy?

    • Ich hatte das Plugin installiert ohne die Kommentare zu lesen und fand Crazy Lazy ganz brauchbar! Nun habe ich die Kommentare gelesen und das indizieren der Bilder ist mit wichtiger! Ich bekomme so schon hin und wieder Besucher!

      Plugin bleibt aber im Hinterkopf!

    • Also nach rund 4 Wochen Einsatz vom Rocket Lazy Load WP-Plugin kann ich sagen: Bei uns wurden bisher alle Bilder von Google indexiert und sind in der Bildersuche innerhalb von Stunden auffindbar – trotz Lazy Load. Also SEO-Technisch sehe ich da keine Probleme, zumindest mit dem von uns getesteten und aktiv eingesetzten Rocket Lazy Load Plugin. Und für den Seitenbesucher ist das ja auch eine klasse Sache wenn die WordPress-Seite ohne Cache und Co. trotzdem schnell reagiert.

    • Nun habe ich doch nochmal einen Versuch unternommen, und Rocket Lazy Load installiert. Aber auch mit dem Plugin: es „würfelt“ meinen Content in der Übersicht wie Kraut und Rüben durcheinander. Das wurde ausprobiert in der Ansicht mit versch. Browsern unter Windows und iOS. Das Themes: Pinboard von One Design.

    • Das Thema Ladezeit ist bei mir zur Zeit durch die Nutzung eines neuen, mächtigen Themes brandaktuell. Daher kommen solche Plugins für mich gerade Recht 🙂 Danke euch für dir tolle Vorstellung der Plugins.

    Schreibe einen Kommentar

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