Mit lazy loading Deine Webseite beschleunigen

Veröffentlicht am
621 Wörter - Lesezeit: ca. 4 Minuten

Mit lazy loading Bilder erst laden, sobald diese in den sichtbaren Bereich des Browsers rein scrollen und damit Deine Webseite beschleunigen.

Mit lazy loading Deine Webseite beschleunigen | Titelbild

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 Informationen 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. :

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 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 selber, wie er damit umgehen soll.

Möchtest Du noch mehr erfahren?

Lautenschlager Marketing & Entwicklung ist eine Werbeagentur mit Spezialisierung auf Web-Technologie und online Marketing. Lies gerne in unseren anderen Artikeln weiter.

Zu weiteren Artikeln