Bilder sind heute für jede Webseite und jede Anwendung von entscheidender Bedeutung. Ob Marketingbanner, Produktbilder oder Logos, Bilder sind aus einer Webseite nicht mehr wegzudenken. Leider sind diese visuellen Objekte jedoch sehr gross, sodass sie den grössten Anteil an der Seitengrösse haben.
Nach den neuesten Daten des HTTP-Archivs beträgt die durchschnittliche Seitengrösse auf Desktops, 1511 KB. Bilder machen davon fast 650 KB aus, also etwa 45 % der gesamten Seitengrösse. Da wir auf Bilder nicht verzichten können, müssen wir dafür sorgen, dass unsere Webseiten schnell geladen werden.
In diesem Leitfaden geht es um das «Lazy Loading» von Bildern, eine Technik, die die Ladezeit der Seite verkürzt und die Seitengrösse verringert, während alle Bilder auf der Seite erhalten bleiben.
Lazy Loading ist eine Technik, bei der mit dem Laden bestimmter Teile einer Webseite – insbesondere von Bildern – gewartet wird, bis diese benötigt werden. Anstatt alles auf einmal zu laden, was als «eager loading» (eifriges Laden) bekannt ist, fordert der Browser bestimmte Ressourcen erst an, wenn Benutzende so interagieren, dass die Ressourcen benötigt werden. Wenn es richtig implementiert ist, kann Lazy Loading die Ladezeiten einer Seite verkürzen.
Diese Art des Ladens wird «lazy» genannt, weil sie einen Webbrowser zum Zögern anregt. Wenn eine Lazy Loading -Webseite angezeigt wird, sagt der Browser im Wesentlichen:
«Ich warte mit dem Laden dieser Bilder, bis ich sie wirklich brauche».
Wenn eine eifrig ladende Webseite angezeigt wird, nimmt der Browser die entgegengesetzte Haltung ein:
«Ich werde mich sofort um alles kümmern!»
Während Prokrastination in der realen Welt manchmal einen negativen Beigeschmack hat, ist sie in diesem Fall oft effizienter.
Ein Blog-Beitrag könnte zum Beispiel ein Bild am oberen Rand der Seite und ein Diagramm am unteren Rand enthalten. Wenn jemand den Blog-Beitrag liest, erreicht er das Ende des Textes möglicherweise erst nach mehreren Minuten, sodass der Browser mit dem Laden des Diagramms wartet, bis die Lesenden zu diesem Abschnitt scrollen. Auf diese Weise wird die Seite anfangs schneller geladen, weil der Browser nur ein Bild statt zwei lädt.
Es gibt zwei Faktoren, die Sie im Auge behalten sollten:
Lazy Load ist ein SEO-kompatibles Format, da es die src-Eigenschaft für Suchmaschinen sichtbar hält. In der Tat ist das src-Attribut unerlässlich, damit die Suchmaschinen die Bilder prüfen und indizieren können.
Das andere zu berücksichtigende Bildattribut ist die Eigenschaft srcset, die nicht von allen Suchmaschinen gelesen werden kann. Deshalb ist es eine bewährte Praxis, ein «src» als Fallback hinzuzufügen. Auf diese Weise stellen Sie sicher, dass die Indizierung der Bilder durch das «Lazy Loading» nicht beeinträchtigt wird.
Um sicherzustellen, dass die Suchmaschinen Ihre Bilder korrekt indizieren (unabhängig davon, ob sie «lazy-loaded» sind oder nicht), sollten Sie auch eine Bild-Sitemap verwenden.
Einige Suchmaschinen wie Google können bei der Überprüfung der Seite JavaScript auslösen. Diese Suchmaschinen funktionieren gut mit JavaScript-gesteuertem Lazy Load und nativem Lazy Loading. Es funktioniert gut mit WP Rockets Lady-Lord-Funktion.
Auf der anderen Seite gibt es Suchmaschinen, die bei der Überprüfung von Seiten kein JavaScript auslösen. Um diese abzudecken, sollten Sie das reguläre Bild mit dem ausgefüllten src-Tag in ein <noscript>-Tag einfügen (das lesbar ist, wenn JavaScript in Browsern deaktiviert ist).
Insgesamt ist «Lazy Loading» eine gute Praxis für die Suchmaschinenoptimierung und hat bei korrekter Umsetzung keinerlei negative Auswirkungen auf die SEO.
Lazy Loading verschiebt das Laden eines Bildes, das nicht sofort auf der Seite benötigt wird. Ein Bild, das beim Laden der Seite für Benutzende nicht sichtbar ist, wird später geladen, wenn die Benutzenden einen Bildlauf durchführt und das Bild tatsächlich sichtbar wird. Wenn Benutzende nie scrollen, wird ein Bild, das für die Benutzenden nicht sichtbar ist, nie geladen.
Dies hat zwei wesentliche Vorteile.
Dies ist der wichtigste für Sie als Website-Administrator – bessere Leistung und Ladezeit.
Mit Lazy Loading reduzieren Sie die Anzahl der Bilder, die zunächst auf die Seite geladen werden müssen.
Weniger Ressourcenanfragen bedeuten weniger herunterzuladende Bytes und weniger Konkurrenz für die begrenzte Netzwerkbandbreite, die den Nutzenden zur Verfügung stehen. Dadurch wird sichergestellt, dass das Gerät die verbleibenden Ressourcen viel schneller herunterladen und verarbeiten kann. Daher ist die Seite viel schneller nutzbar als eine Seite ohne Lazy Loading.
Der zweite Vorteil für Sie liegt in den Lieferkosten. Die Lieferung von Bildern oder anderen Assets wird in der Regel nach der Anzahl der übertragenen Bytes berechnet.
Wie bereits erwähnt, wird ein Bild, das nicht sichtbar ist, beim Lazy Loading nicht geladen. Dadurch verringert sich die Gesamtzahl der auf der Seite übertragenen Bytes, insbesondere bei Nutzenden, die die Seite abspringen oder nur mit dem oberen Teil der Seite interagieren.
Diese Verringerung der von Ihrem Auslieferungsnetz übertragenen Bytes senkt die Auslieferungskosten. Dies wird noch deutlicher werden, wenn wir uns näher mit Lazy Loading beschäftigen.
Unter sonst gleichen Bedingungen werden Webseiten mit kleineren Dateigrössen schneller geladen. Mit Lazy Loading wird eine Webseite zu Beginn kleiner als ihre volle Grösse und damit schneller geladen.
Eine schnellere Web-Performance hat zahlreiche Vorteile, darunter eine bessere Suchmaschinenoptimierung, höhere Konversionsraten und ein verbessertes Benutzererlebnis.
Angenommen, eine Seite lädt mehrere Bilder, die sich unterhalb der Faltfläche befinden, aber der Benutzer verlässt die Seite, bevor er nach unten scrollen kann. In einem solchen Fall wurden die Bandbreite, die für die Bereitstellung der Bilder verwendet wurde, und die Zeit, die der Browser für das Anfordern und Rendern der Bilder aufgewendet hat, im Wesentlichen verschwendet.
Im Gegensatz dazu sorgt das «Lazy Loading» dafür, dass diese Bilder nur bei Bedarf geladen werden. Das spart Zeit und Rechenleistung, und es kann dem Website-Besitzer:innen Geld sparen, weil weniger Bandbreite verbraucht wird.
Wenn Benutzende zum Beispiel schnell auf einer Seite nach unten scrollen, müssend diese möglicherweise warten, bis die Bilder geladen sind. Dies kann sich negativ auf die Benutzerfreundlichkeit auswirken.
Anstatt den gesamten Seiteninhalt auf einmal anzufordern, muss der Browser möglicherweise mehrere Inhaltsanfragen an die Server der Website senden, wenn Benutzende mit der Seite interagieren.
Die Verwendung eines Content Delivery Network (CDN) minimiert diesen potenziellen Nachteil, da die Bilder vom CDN zwischengespeichert werden und der Browser keine Anfrage an den Ursprungsserver senden muss, um sie abzurufen.
Wenn das Entwicklerteam mehrere Zeilen JavaScript zu einer Webseite hinzufügen, um dem Browser mitzuteilen, wie er die Ressourcen der Seite langsam laden soll, erhöht dies die Menge des Codes, den der Browser laden und verarbeiten muss.
Wenn dies auf ineffiziente Weise geschieht, kann diese geringfügige zusätzliche Lade- und Verarbeitungszeit die durch Lazy Loading eingesparte Zeit aufwiegen.
Bei sorgfältiger Anwendung kann das träge Laden von Bildern und Videos die anfängliche Ladezeit und die Nutzlast der Seiten auf Ihrer Website, einschliesslich Core Web Vitals, erheblich verringern.
Die Benutzenden werden nicht mit unnötigen Netzwerkaktivitäten – einschliesslich Netzwerkkonflikten bei langsameren Verbindungen – und Verarbeitungskosten für Medienressourcen belastet, die sie vielleicht nie zu Gesicht bekommen, aber sie können diese Ressourcen trotzdem ansehen, wenn sie wollen.
Was die Techniken zur Leistungsverbesserung betrifft, so ist Lazy Loading relativ unumstritten. Wenn Sie viele Inline-Bilder auf Ihrer Website haben, ist dies eine gute Möglichkeit, unnötige Downloads zu vermeiden. Die Benutzenden Ihrer Webseite und die Projektbeteiligten werden es zu schätzen wissen.
© 2012-2023, MIK Group GmbH | AGB | Impressum | Datenschutzerklärung
