Was ist Lazyload? Und warum brauche ich Lazyload?

Lazyload ist ein Skript, das dafür sorgt, dass Bilder, die nicht sichtbar sind, nicht geladen werden. Oder umgekehrt ausgedrückt: es werden nur die Bilder geladen, die im Sichtfeld des Nutzers sind. Und das kann viele Vorteile haben. Vor allem natürlich Performance-Vorteile.

Lazyload ist ein eigenständiges Skript. Somit kann es theoretisch in jede Webseite integriert werden, egal ob diese auf WordPress basiert, oder nicht. Es gibt natürlich inzwischen auch verschiedene WordPress-Plugins, die Lazyload in WordPress integrieren – aber ich bin in solchen Fällen immer gerne für eine Lösung ohne weitere Plugins zu haben.zum Glück funktionert die Implementierung von Lazyload in WordPress auch ausgesprochen problemlos.

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 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?