Was ist lazy loading?

Wusstest Du das lazy loading eine Möglichkeit beschreibt, mit der man Bilder auf einer Webseite erst lädt, sobald diese in den sichtbaren Bereich (dem sogenannten Viewport) des Browsers rein scrollen? Somit werden Bilder im ersten Laden der Webseite nicht geladen und erst abgerufen, sollten diese benötigt werden. Das beschleunigt Deine Webseite enorm, da die größten Datenmengen meistens genau diese Bilder sind. Solltest Du also lange Seiten haben mit vielen Bildern, dann ist das lazy loading die perfekte Option, um Deine Performance zu steigern. Aber auch kleine Seiten profitieren von der Methode, denn jedes Byte zählt!

Es gibt viele lazy loading Skripts, doch ich zeige Dir nur die guten Tools, die ich selber nutze. In diesem Fall nutze ich ausschließlich lazysizes. Dieses Skript mach das Einrichten von der lazy loading Funktion sehr einfach und das Skript ist zudem auch sehr schlank.

Lazysizes ist die bekannteste Bibliothek

Lazysizes nutzt die hochperformante Intersection Observer API. Mit der API lassen sich intelligent und ressourcenarm Bilder einblenden, falls sie benötigt werden. Außerdem wird das Projekt auf GitHub von vielen anderen Entwicklern unterstützt und das führt dazu, dass die lazysizes Bibliothek für mich am rundesten ist.

Mehr Infos zu der Bibliothek findest du auf GitHub bei aFarkas.

Lazysizes in die Webseite einfügen

In zwei Schritten kannst Du Deine Bilder nachladen:

  1. Das Skript in die Webseite einbauen
  2. Bei den ausgewählten Bildern die src/srcset Attribute anpassen und die "lazyload" Klasse vergeben

Das Skript in die Webseite einbauen

Lade das Skript auf Deine Seite in dem Du es runterlädst und mit folgendem Code in Deine Webseite einbaust.

<script src="lazysizes.min.js" async></script>

Das <script> Tag kann im <head> Deines HTML-Codes, im <body> oder nach dem schließendem </body> Tag platziert werden, je nachdem, wann JavaScript geladen werden soll. Ich empfehle meistens die Skripts möglichst weit unten im HTML Dokument zu platzieren.

Bei den ausgewählten Bildern die src/srcset Attribute anpassen

  1. Damit die Bilder nicht bei laden der Webseite geladen werden, passen wir das <img> oder das <picture> Tag an, indem wir das "src"- oder das "srcset"-Attribut anpassen, indem wir ein "data-" davor schreiben.
  2. Zusätzlich vergeben wir ganz einfach die Klasse "lazyload", damit das Skript weiß, dass wir dieses Bilder nachladen wollen.

Das sieht bei einem <img> Tag wie folgt aus:

Vorher:

<img src="katze.jpg" alt="" />

Nacher:

<img data-src="katze.jpg" alt="" class=“lazyload“ />

Und bei einem <picture> Tag wie folgt:

Vorher:

<picture>
 <source type="image/webp" srcset="katze.webp">
 <source type="image/jpeg" srcset="katze .jpg">
 <img src="katze .jpg" alt="">
</picture>

Nachher:

<picture>
 <source type="image/webp" data-srcset="katze .webp">
 <source type="image/jpeg" data-srcset="katze .jpg">
 <img data-src="flower.jpg" alt="" class="lazyload">
</picture>

Überprüfen ob das lazy loading funktioniert

Öffne die Webentwickler-Tools Deines Browsers und beobachte ob die Klassen deiner Bilder sich von "lazyload" zu "lazyloaded" ändern. Außerdem solltest Du beobachten, dass das "data-" prefix wegfällt, sobald das Bild lädt. Im Netzwerk Tab solltest Du ebenfalls beobachten können, dass die Bilder erst laden, sobald du herunterscrollst. Wie das genau aussieht, sieht Du im nachfolgendem Video:

Darüber hinaus kannst Du mit dem Lighthouse Tool von Google überprüfen, ob Du nicht vergessen hast einige Bilder nachzuladen. Sie dazu nach den Ergebnissen im Bereich "Defer offscreen images"

Fazit:

Vorteile von lazy loading:

  • Performance-Verbesserung durch Nachladen der Bilder

Nachteile von Lazy Loading

  • Extra-Skript notwendig

Übrigens: Google mag es auch, wenn man die n­achlade Strategie verfolgt, da Google grundsätzlich schnellere Seiten belohnt, obwohl sich das eigene Ranking alleine durch das lazy loading natürlich nicht verbessern wird.

Wie findest Du diesen Artikel? Ich bin immer auf Deine ehrliche Meinung gespannt und versuche mich jeden Tag zu verbessern. Sollte Dir was fehlen oder unklar sein, hinterlasse in den Kommentaren Feedback oder schreibe mir auf Twitter @Lautenschlager. Ich danke Dir für Deine wertvolle Zeit!

Zusatz: Lazy loading ohne Skript (also auch ohne Nachteile?)

Man kann auch lazy loading betreiben, ohne extra Skript. Das funktioniert allerdings nur im Webbrowser Chromium und Chrome ab Version 75. Sie beherrschen nämlich Lazy Loading von Haus. Du musst dazu nur das Attribut "loading="lazy" in dein Bild-Tag einbauen:

<img src="katze.jpg" loading="lazy" alt="" />

Außerdem gibt es auch zwei Alternativen. Mit loading="eager", wird die Bilddatei sofort geladen und mit loading="auto", entscheidet der Browser selber, wie er damit umgehen soll.

Autorenbild Andreas Lautenschlager

Von Andreas Lautenschlager

Webentwickler / Online Marketing Berater

emailSchreibe mirTwitter