Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Markus Seyfferth 10. April 2019

Natives Lazy-Loading kommt in Chrome

Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Damit wird Chrome voraussichtlich ab Juni 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen bestimmten HTML-Tag zugeordnet bekommen haben, nämlich:

Anzeige

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="..." />

Dabei zeigt loading="lazy" dem Browser an, dass dieses Bild nachrangig geladen werden kann. Es lohnt sich also, fortan diesen Wert für alle Bilder auf einer Seite hinzuzufügen.

Es wird sich sicher auch eine Entwicklerin finden, welche dafür eine WordPress-Plugin erstellt, so dass dieser Vorgang rückwirkend und für alle bereits bestehenden Bilder per einmaligem Knopfdruck vorgenommen werden kann. Sobald wir da fündig werden, werden wir den Namen dieses Plugins nachliefern. Falls ihr schon fündig geworden sein solltet, könnt ihr das auch gerne in den Kommentaren bekunden!

Dasselbe Prinzip des loading="lazy" wird auch für die iFrames dieser Welt gelten, sodass die HTML-Tags wie folgt aussehen sollten:

<iframe src="https://www.youtube.com/embed/einhuebschesvideo" loading="lazy"></iframe>

Nun, wozu das Ganze eigentlich?

Eine Vielzahl von Webseiten enthalten oft eine hohe Anzahl von Bildern, welche oftmals noch nicht einmal für die Darstellung am Bildschirm optimiert sind. Das führt dazu, dass alle Bilder zusammengenommen meist mehr Ladevolumen und -zeit beanspruchen als die eigentlichen textbasierten Inhalte. Wir schrieben unter anderem diesen Beitrag dazu.

Die Crux des Ganzen ist dabei, dass viele dieser Bilder sich nicht im sichtbaren Bereich des Bildschirms befinden, sondern oft erst im weiteren Bildlauf zu sehen sind, sobald man also nach unten scrollt.

Von daher müssten diese zunächst nicht sichtbaren Bilder anfangs gar nicht erst geladen werden, solange sie nicht zu sehen sind. Die Bilder zu laden, kurz bevor sie in den sichtbaren Bildschirmbereich kommen, würde völlig genügen.

Diese Problem soll nun mit der Einführung des Tags und Attributs loading="lazy" behoben werden.

Bisher ist es gängige Praxis, extra ein JavaScript zu laden, nur um die Auswirkungen von Offscreen-Bildern auf die Seitenladezeiten zu begrenzen, und um den Abruf dieser Bilder solange zu verzögern, bis die Nutzer in die Nähe der zu ladenden Bilder kommen.

Addy Osmani zeigt in seiner Ankündigung sehr gut auf, welchen Effekt die Benutzung des Lazy-Loadings auf die Seitenladezeit haben kann.

Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern.
Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern. Die Lazy-Loading-Version lädt nur 250 KB beim initialen Ladevorgang. Andere Bilder werden erst dann abgerufen, wenn die Benutzer weiter nach unten scrollen.

Folglich kann das nativ-verzögerte Laden dazu beitragen, dass alle Inhalte, welche sich oben im sichtbaren Bereich befinden, deutlich schneller angezeigt werden. Sowohl die Gesamtladezeit als auch das Ladevolumen einer Website werden dadurch erheblich reduziert.

Damit die Bilder (und Videos) aber nicht erst geladen werden, wenn sie sich bereits im sichtbaren Bereich befinden, eine Sache die eher als störend empfunden wird, werden die mit dem loading="lazy" Tag versehenen Bilder bereits im Hintergrund geladen, bevor sie in den sichtbaren Bereich kommen. Somit bleibt der Gesamteindruck einer Seite auch in dieser Hinsicht ungetrübt.

Welche Bild-Tags werden unterstützt?

Für Entwickler ist es wichtig zu wissen, dass nicht nur die ordinären <img> und <iframe> Tags unterstützt werden, sondern auch die responsiven Bildformate à la <srcset> und <picture>.

Zum Abschluss noch eine Liste mit Beispielen:

<!-- Hier das Standard-Schnipsel, welches das Bild erst dann lädt, wenn die Nutzer in die Nähe des Bildes scrollen: -->

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="Eine süße Katz hat eine süße Fratz und zeigt dem Spatz ihre Tatz"/>

<!-- Hier das responsive <picture> Bildformat, dass meist nur von versierten Entwicklern eingesetzt wird. Der <img> im Beispiel wird dabei nur für ältere Browser, die mit den neuen responsiven Bildformaten nichts anfangen können, beibehalten. -->
<picture>
  <source media="(min-width: 40em)" srcset="ein-grosses-bild.jpg 1x, ein-grosses-bild-in-hd.jpg 2x">
  <source srcset="ein-kleines-bild.jpg 1x, ein-kleines-bild-in-hd.jpg 2x">
  <img src="das-bild-für-alte-browser.jpg" loading="lazy">
</picture>

<!-- Hier das Beispiel mit dem srcset Format, bei welchem nur die Bildgröße spezifiziert wird -->
<img src="small.jpg"
     srcset="ein-grosses-bild.jpg 1024w, ein-mittelgrosses-bild.jpg 640w, ein-kleines-bild.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="Mein süsser Spatzfratz" loading="lazy">

<!-- Hier ein Beispiel für ein iFrame. Das kann z.B. eine Karte von Google Maps oder ein eingebettetes Video sein -->
<iframe src="video-player.html" loading="lazy"></iframe>

Zu guter Letzt sei noch gesagt, dass Browser, die den loading="lazy" Tag nicht unterstützen, diesen einfach ignorieren. Das ist das Schöne an HTML: Nicht unterstützte Attribute werden einfach ignoriert und tun keinem weh.

Probieren geht über Studieren

Wer das neue Feature schon heute probieren möchte, kann dies tun, indem er/sie chrome://flags in die URL-Leiste eingibt, und dann “Enable lazy frame loading” sowie “Enable lazy image loading” aktiviert. Danach gilt es noch, den Chrome-Browser neu zu starten und los geht es.

Als weiterführenden Artikel und für mehr Details dazu, wie die Implementierung im Detail erfolgt, lohnt es sich, Addy Osmanis Beitrag zu lesen.

Beitragsbild: Depositphotos

Markus Seyfferth

Markus Seyfferth

Markus leitet seit April 2019 die Geschicke der Dr. Web GmbH & Co. KG, dem Unternehmen hinter Dr. Web, und ist dabei, einige interessante neue Projekte in Angriff zu nehmen. Zuvor war er für mehr als 6 Jahre der Geschäftsführer und Vorstand vom Smashing Magazine, der englischsprachigen Schwesterpublikation von Dr. Web.

7 Kommentare

  1. „Damit die Bilder (und Videos) aber nicht erst geladen werden, wenn sie sich bereits im sichtbaren Bereich befinden, eine Sache die eher als störend empfunden wird, werden die mit dem loading=“lazy“ Tag versehenen Bilder bereits im Hintergrund geladen, bevor sie in den sichtbaren Bereich kommen.“

    Wenn dem so wäre, dann würde sich das Attribut ja gleich selbst wieder überflüssig machen :-)

    Also ich gehe davon aus, dass nur die sofort sichtbaren Bilder geladen werden und nur die „demnächst“ sichtbaren Bilder im Hintergrund, aber nicht „alle“.

    • Wenn dem so wäre, dann würde sich das Attribut ja gleich selbst wieder überflüssig machen

      Also das habe ich vielleicht nicht klar genug ausgedrückt. Aber wenn die Bilder erst dann nachgeladen werden, wenn sie bereit im sichtbaren Bereich sind, ist das halt zu spät und wird von den Benutzern als “langsam” oder “störend” empfunden. Deswegen funktioniert dieses Lazy-Loading tatsächlich idealerweise so, dass die Bilder bereits im Hintergrund geladen werden, wenn sich der sichtbare Bereich der Benutzer beispielsweise 250px über dem zu ladenenden Bild befindet.

    • Ich glaube, die Bilder mit lazy-Attribut werden erst geladen, sobald alle anderen Inhalte geladen sind – egal ob sichtbar oder nicht.

  2. Ein wenig inkonsistent ist das Verfahren schon:
    Es werden sämtliche Bildformate unterstützt, mit Ausnahme des ausgerechnet von
    Google so favorisierten ?

  3. @Prov94: loading="lazy" ist in der Tat noch weit entfernt davon, ein Teil des HTML5 spec zu werden. Die Diskussion darüber wurde erst jüngst wiederbelebt von Addy Osmani: siehe https://github.com/whatwg/html/issues/2806#issuecomment-470328532

  4. Danke für den Beitrag, das ist echt großartig!
    Gut das es gleich nativ im html code gemacht werden kann.
    Ist es aber vom W3C bereits standardisiert? Das würde mich schon interessieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.