Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Lazy Load für Bilder (ohne Plugin)

Lazy Load (ohne Plugin)

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 altbekanne 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 dassselbe 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}></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 );

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>

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 intressant, 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.



Wordpress Performance eBook