Chrome & Chromium: Suchmaschinenoptimierung von Bildern und Videos mit Lazy Loading

Das erwartet euch in diesem Beitrag

  • Was ist Lazy Loading?
  • Welche Vorteile hat es heutzutage?
  • Was ist dafür in Chrome und Chromium zu tun?

Wenn ihr euch Gedanken über die Suchmaschinenoptimierung eurer Bilder und Videos macht, solltet ihr euch auch mit dem Thema „Lazy Loading“ beschäftigen. Denn damit verkürzt ihr die Ladezeit eurer Website, steigert die Leistungsperformance und reduziert die Absprungrate. Gut also, dass Google ab Version 75 seiner Webbrowser Chromium und Chrome Lazy Loading unterstützt!

Bei Lazy Loading geht ihr grundsätzlich in zwei Schritten vor.

Schritt 1: Zunächst optimiert ihr die Größe eurer Dateien oder komprimiert 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 eurer Webseite aus.

Schritt 2: Nun implementiert ihr das Lazy Loading auf eurer 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 geladen wird. Wie das dann in der Praxis aussieht, erfahrt ihr weiter unten.

Warum ist Lazy Loading heutzutage so wichtig?

Ihr habt wahrscheinlich schon Lazy Loading in Aktion gesehen, und es geht ungefähr so: Ihr gelangt zu einer Seite und beginnt zu scrollen, während ihr die Inhalte lest. 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 in 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 sparen euch 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 könnt ihr euch bei YouTube ein Beispiel für das Native Lazy Loading anschauen.

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Hier ein Beispiel für den Code von Bildern <img>:

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

<img src=“golf.jpg“ loading=“lazy“ alt=“…“/>

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

<img src=“golf.jpg“ loading=“eager“ alt=“…“/>

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

<img src=“golf.jpg“ loading=“auto“ alt=“…“/>

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 in eure Websites eingebunden werden. So erweitert ihr die Elemente <pictures> & <iframe>:

<picture>

<source media=“(min-width: 25em)“ srcset=“x1.jpg 1x, x2.jpg 2x“>

<source srcset=“y1.jpg 1x, y2.jpg 2x“>

<img src=“ersatz.jpg“ loading=“lazy“>

</picture>

<iframe src=“video.html“ loading=“lazy“></iframe>

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

Apropos Chrome: In unserem Beitrag „Unsere liebsten SEO-Browser-Tools/Add-ons für Chrome“ findet ihr noch mehr hilfreiche Tipps für eure tägliche Arbeit.

Über den Autor

Peter Voß

Ich habe 1999 meine erste Webseite aufgesetzt und beschäftige mich seitdem mit dem Online Marketing. Nach einer 10 monatigen Weiterbildung bei der Cimdata GmbH in Berlin mit den Schwerpunkten SEO/SEA und responsives Webdesign bin ich nun seit Jan.2019 als SEO-Consultant bei der LEAP/ Online Marketing Agentur und helfe unseren Kunden bei der Suchmaschinenoptimierung.