Was ist lazy loading?
Wusstest Du, dass 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. Das 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 selbst nutze. In diesem Fall nutze ich ausschließlich lazysizes. Dieses Skript mach das Einrichten von der lazy loading Funktion sehr einfach und 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 Informationen zu der Bibliothek findest Du auf GitHub bei aFarkas.
Lazysizes in die Webseite einfügen
In zwei Schritten kannst Du Deine Bilder nachladen:
- Das Skript in die Webseite einbauen
- 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
- 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.
- 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-" Präfix wegfällt, sobald das Bild lädt. Im Netzwerk Tab solltest Du ebenfalls beobachten können, dass die Bilder erst laden, sobald Du herunterscrollst. :
Ferner 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 nachlade Strategie verfolgt, da Google grundsätzlich schnellere Seiten belohnt, obwohl sich das eigene Ranking allein 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 Instagram @lautenschlager.de. 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 selbst, wie er damit umgehen soll.