Lazy Load für Bilder (ohne Plugin)

WordPress Lazy Load
Inhaltsverzeichnis

Lazy Load oder auch nicht

Unter Lazy Load versteht man allgemein das verzögerte Nachladen von Inhalten und zwar so, dass diese nur dann geladen werden, wenn der Nutzer sie auch tatsächlich sieht. Bilder ganz unten beispielsweise, werden erst dann geladen, wenn der Besucher beim Scrollen dort ankommt.

Das spart Ladezeit, denn Bilder sind meistens ziemlich groß, wenn nicht das größte auf einer Website und wenn viele davon auf einer Seite zu finden sind, muss der Browser erst einmal alle abarbeiten.

Jeder kennt bestimmt das altbekannte Nachladen von Bildern, wenn sich diese langsam von oben nach unten aufbauen. Nervig. Lazy Load schafft hier Abhilfe. Alles schön und gut, doch Lazy Load ist eben recht komplex und für viele kleine Websites daher auch gar nicht zu empfehlen, zumal es einige unschöne Nebeneffekte bzw. Fehler mit Lazy Load geben kann.

Vor allem ist es aber recht aufwendig, weil die Position abgefragt werden muss etc. bevor dann wirklich aktiv gehandelt wird und ein größeres Script ist ebenfalls notwendig. Alles viel zu viel.

Also brauchen wir eine performante Lösung und regeln das mittels Defer Images. Das ist streng genommen nicht das was allgemein unter Lazy Load bekannt ist, aber nur mit Lazy Load im Titel wird dieser Beitrag gefunden, also verzeiht mir die Überschrift.

Nachladen von Bildern in Wordpress

Das Nachladen der Bilder verfolgt aber ein ähnliches Ziel. Lazy Load checkt dabei eben zusätzlich die Scrollposition, um den sichtbaren Bereich zu laden. Hiermit dagegen entfällt der viele Code, der Aufwand, die Umwege, es geht nur darum, dass Bilder zuletzt geladen werden, weil sie sonst den Seitenaufbau blockieren.

Einfach, praktisch, gut, vor allem aber eben in Hinsicht auf die Performance. So wird mit dem Data-Src-Attribut gearbeitet und das eigentliche Bild wird in Wordpress gegen einen Platzhalter ersetzt. In diesem Fall ein einfaches weißes Bild als Base64, also sehr minimalistisch und schnell.

Nun sieht der Browser dieses Bild und denkt sich: Alles klar, Bild geladen. Da dasselbe Bild auch bei allen anderen als Platzhalter zum Einsatz kommt, spart sich der Browser ständige Abrufe und ist mit dem Laden von Bildern “offiziell” fertig. Inoffiziell lädt nun der gesamte Content eures Wordpress Blogs, während die Bilder erst ganz am Ende nachgeladen werden.

So können sie andere Aufgaben nicht blockieren und erscheinen dann ganz regulär im Inhalt, sobald via Javascript dem Browser gesagt wurde, dass es noch ein anderes Bild gibt. Was simpel klingt, kann die Ladezeiten extrem erhöhen und die Darstellung für den Nutzer angenehmer machen.

1. Folgendes in die Functions.php eures Themes kopieren:

function add_image_load( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-src' ) ) return $content; $placeholder_image = ('data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-src="${2}"${3}><noscript><img${1}src="${2}"${3}></img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_image_load', 99 ); add_filter( 'post_thumbnail_html', 'add_image_load', 11 ); add_filter( 'get_avatar', 'add_image_load', 11 );Code-Sprache: PHP (php)

2. Am Ende der Seite, vor dem schließenden </body> einfügen:

<script>function init(){var imgDefer=document.getElementsByTagName('img');for(var i=0;i<imgDefer.length;i++){if(imgDefer[i].getAttribute('data-src')){imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));}}}window.onload=init;</script>Code-Sprache: HTML, XML (xml)

Das bessere Lazy Load

Das war es dann auch schon. Das Snippet oben ersetzt das Scr-Attribut von Bildern in Wordpress mit dem Platzhalter-Bild, während das Data-Src-Attribut weiterhin das Original bereithält.

Die Lösung ist ein einfacher Ansatz von Lazy Load, doch der Ballast entfällt eben. Das ganze mit der Position, dem sichtbaren Bereich etc. wirkt zwar immer erst ganz interessant, doch die Nutzer vergessen, dass Lazy Load damit auch Ressourcen frisst und bei vielen Zugriffen bzw. bei komplexen Websites schnell ineffizient wird.

Gerade für kleine Websites ist Lazy Load oft auch mehr Nachteil als Vorteil, weil eben viel abgearbeitet werden muss und zusätzlicher Aufwand entsteht, der oft größer ist als das Ergebnis rechtfertigen würde. Das einfache Nachladen von Bildern hingegen, beschleunigt euren Wordpress Blog im besten Fall extrem und macht schluss mit den blockierten Grafiken. Erst wird der Content geladen, dann die Bilder, so muss das sein. Probiert es ruhig mal aus.

Wer weitere Anpassungen vornimmt, könnte das Data-Src-Attribut auch per Hand einbauen und so nur einige bestimmte Bilder nachladen lassen, während der Rest ganz normal aufgerufen wird. Meiner Meinung nach ist es das bessere, weil minimalistischere Lazy Load.

Wie das Ganze mit Videos geht, erkläre ich in diesem Artikel.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

5 Antworten

  1. Hallo Christian, vielen Dank für deine vielen guten Hinweise und Tests auf fastWP. In diesem Artikel hier wird der Shortcode für das Code-Snippet nicht bzw. falsch gerendert. Oder liegt’s an mir? Siehe: [et_pb_text _builder_version=“3.12.2″]

  2. Hi ich versuche gerade diese Lösung um die PageSpeed meiner Seite zu verbessern. Vielleicht verstehe ich es nicht richtig, aber auf welcher Seite muss ich den zweiten Code einfügen? Am Ende des scripts meiner Startseite oder ebenfalls im functions.php?
    Im functions.php kam ein syntac error.
    Vielen Dank für die Hilfe

    1. Der 2. Code müsste vor dem schließenden eingefügt werden, also entsprechend über das passende Template – in der Regel sollte das in deiner footer.php sein.

Schreibe einen Kommentar

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

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian