Was ist Lazyload? Und warum brauche ich Lazyload?

Lazyload ist eine Funktion bzw. ein Skript, das dafür sorgt, dass Bilder, die zunächst nicht sichtbar sind, erst dann geladen werden, wenn sie sichtbar sind – oder sichtbar werden. Oder umgekehrt ausgedrückt: es werden nur die Bilder geladen, die im Sichtfeld des Nutzers sind oder zumindest in der Nähe des Sichtfelds des Nutzers sind. Und das kann viele Vorteile haben. Vor allem natürlich Performance-Vorteile.

Insbesondere bei Verwendung von Bildern in Retina-Auflösung (144dpi) kann die Optimierung der Ladezeit entscheidend zu einer Verbesserung der Verbesserung der Performance und insofern auch der User Experience beitragen.

Lazyload als HTML-Attribute

Lazyload ist zum einen inzwischen ein HTML-Attribute und seit einiger Zeit standardmäßig in WordPress aktiviert. Dem Browser wird damit signalisiert, dass ein Bild erst geladen werden soll, wenn es ins Sichtfeld des Nutzers kommt. Um diese HTML-Funktion zu nutzen muss einem Bild lediglich das Attribut loading=“lazy“ hinzugefügt werden.

<img src="/path/to/image/image.jpg" loading="lazy">

lazyload.js

Daneben ist Lazyload aber auch ein eigenständiges Skript bzw. JavaScript. Dieses kann, wie auch das HTML-Attribut,  theoretisch in jede Webseite integriert werden, egal ob diese auf WordPress basiert, oder nicht. Es gibt natürlich inzwischen auch verschiedene WordPress-Plugins, die das Skript Lazyload automatisch in WordPress integrieren. Ich bin aber in solchen Fällen immer gerne für eine Lösung, die ohne zusätzliche Plugins auskommt. Insbesondere, wenn die Implemenierung so einfach ist, wie bei Lazyload.

Lazyload manuell in WordPress integrieren

Zunächst muss man Lazyload als Skript interieren. Dazu habe ich die Javascript-Datei einfach in ein entsprechendes verzeichnis „js“ in meinem theme hinterlegt. Die js-Datei (sowie viele hilfreiche Tipps) ist hier beim Autor von Lazyload Andrea Verlicchi zu finden: https://www.andreaverlicchi.eu/vanilla-lazyload/

 <script src="/wp-content/themes/mytheme/js/lazyload.min.js"></script>

Ich habe das hier mal händisch gemacht – natürlich sollte man das Skript eigentlich über die function.php laden. Aber so geht’s auch.

Dann muß man Lazyload natürlich noch aufrufen. Das habe ich per Skript-Aufruf im Footer (footer.php) eingerichtet:

<script>


var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});

</script>

Es gibt verschiedene Optionen und Möglichkeiten, wie man Lazyload nutzen kann. Ich habe mich dafür entschieden, daß ich zunächst ein Bild mit geringer Auflösung – und anschließend per Lazyload ein Bild mit hoher Auflösung nachladen möchte. Dazu muß man lediglich jedem Bild bzw. IMG-tag die entsprechenden Quellen zuweisen:

 <img class="lazy" src="<?PHP echo($low_res_url); ?>" data-src="<?php echo esc_url( $high_res_url); ?>" />

Und fertig. Oder?

Vorteile von lazyload.js gegenüber dem HTML-Attribut Lazyload

Natürlich kann man sich ausschließlich auf die HTML-Funktion loading=“lazy“ verlassen – damit ist schon viel gewonnen. Schwierig wird aber, wenn die User Experience im Fokus steht. Über das HTML-Attribut werden Bilder zunächst gar nicht geladen – dann aber die volle Version. Das kann insbesondere bei Websits mit vielen Bildern und/oder Fokus auf Design als störend empfunden werden. Mit lazyload.js lässt sich zunächst ein Bild mit niedriger Aufläsung laden, das dann dynamisch mit einer besser aufgelösten Version ersetzt wird. Das ist für Nutzer häufig kaum wahrnehmbar – der Ladevorgang erscheint flüssiger, das Design der Website erscheint ggf.  konsistenter, als bei ausschließlicher Verwendung des HTML-Attributs.

Bestes Ergebnis mit Kombination von HTML-Attribut und Skript

Beide Methoden lassen sich zum Glück miteinander kombinieren. Dann werden für alle Bilder zunächst niedrig ausgelöste Bilder geladen  – aber auch erst, wenn diese in das Blickfeld des Nutzers kommen. So lassen sich auch Websites mit sehr vielen Bildern nutzerfreundlich UND designorientiert optimieren.

 <img class="lazy" src="<?PHP echo($low_res_url); ?>" data-src="<?php echo esc_url( $high_res_url); ?>" loading="lazy" />