Lazy Load: So optimierst du deine Bilder und Videos

Wenn du dir Gedanken über die Suchmaschinenoptimierung deiner Bilder und Videos machst, solltest du dich auch mit dem Thema „Lazy Loading“ beschäftigen. Denn damit verkürzt du die Ladezeit deiner Website, steigerst die Leistungsperformance und reduzierst die Absprungrate. Gut also, dass Google ab Version 75 seiner Webbrowser Chromium und Chrome Lazy Loading unterstützt!

Bei Lazy Loading gehst du grundsätzlich in zwei Schritten vor:

1. Zunächst optimierst du die Größe deiner Dateien oder komprimierst diese, um die Ladezeiten zu reduzieren und den PageSpeed zu verbessern. Weniger Datenvolumen bedeutet einen geringeren Energieverbrauch. Jegliche Ressourcenschonung wird von Google belohnt und wirkt sich positiv auf das Ranking deiner Webseite aus.
2. Nun implementierst du das Lazy Loading auf deiner Website.

Lazy Loading bedeutet, dass ein Bild oder Objekt auf einer Website erst dann geladen wird, wenn es im Browser eines Besuchers angezeigt werden soll, sprich: in den sichtbaren Bereich gelangt. Wie das dann in der Praxis aussieht, erfährst du weiter unten.

Warum ist Lazy Loading heutzutage so wichtig?

Du hast wahrscheinlich schon Lazy Loading in Aktion gesehen, und es geht ungefähr so: Du gelangst zu einer Seite und beginnst zu scrollen, während du die Inhalte liest. Irgendwann scrollt ein Platzhalterbild in das Ansichtsfenster. Dieses Platzhalterbild wird leicht zeitverzögert durch das endgültige Bild ersetzt.

Ladesymbole tauchen häufig an Stelle des Produktes auf

Die Umsetzung von Lazy Loading war in der Vergangenheit allerdings alles andere als simpel. Komplizierte Rechenoperationen waren nötig, umfängliche Scripts wurden angestoßen, um zu sehen, was gerade im Browserfenster des Users angezeigt wurde.

Hierzu ein Zahlenbeispiel von Google: Durch die kometenhafte Entwicklung im World Wide Web hat sich das Datenvolumen von Bildern von durchschnittlich 840 Kilobyte in den vergangenen drei Jahren mehr als verdoppelt. Der Webseiten-Besucher betrachtet allerdings prozentual nur einen geringen Teil dieser Bilder und springt durch zu lange Ladezeiten relativ zügig wieder von der Seite ab. Eine längere Ladezeit von nur einer Sekunde mehr kann beispielsweise bei größeren Webshops zu einer bis zu 20 Prozent geringeren Conversion Rate führen.

Daher der große Jubel, als Google bei seiner diesjährigen Entwicklerkonferenz die Unterstützung von nativen Lazy Loading angekündigt hat. Denn dieser Prozess wird nun stark vereinfacht.

Chromium & Chrome: Nur wenige Handgriffe sind erforderlich

Ab der Version 75 beherrschen die Google-Webbrowser Chromium und Chrome Lazy Loading und ersparen dir wertvolle Zeit. Denn eine aufwendige Umsetzung in Form von umfangreichen JavaScript-Bibliotheken erübrigt sich somit. Der Seitenbetreiber verwendet einen einfachen Tag im HTML-Code und fügt hinter einem flag das Attribut loading = “… “, und der Chrome-Browser erledigt den Rest.

Zur Veranschaulichung kannst du dir bei YouTube ein Beispiel für das Native Lazy Loading anschauen.

Hier ein Beispiel für den Code von Bildern :

<!– Lazy-Load: Bild wird erst bei Bedarf geladen –>

<!– Das Bild wird sofort beim Seitenaufruf geladen –>

<!– Browser entscheidet ob Lazy-Load zum Einsatz kommt oder nicht –>

Das Attribut „loading“ enthält also drei unterschiedliche Werte:

• „lazy“: verzögertes Laden
• „eager“: sofortiges Laden (vorteilhaft für Werbetreibende und ihre Anzeigen)
• „auto“: Browser legt fest, ob verzögert geladen wird oder nicht

Das Feature kann für verschiedene Elemente auf deiner Websites eingebunden werden.

In einem Blogbeitrag des Google-Mitarbeiters Addy Osmani findest du zudem eine ausführliche Beschreibung zur Konfiguration und lernst weitere Möglichkeiten zur Implementierung von Native Lazy Loading kennen.