Das erfährst du in diesem Beitrag:
- Was ist Lazy Loading?
- Welche Vorteile hat es heutzutage?
- Was ist dafür in Chrome und Chromium zu tun?
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:
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.
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.
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.
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:
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.