Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Markus Seyfferth 10. April 2019

Natives Lazy-Loading kommt in Chrome

Ab der Version 75 wird Chrome das soge­nann­te “Lazy-Loading” nativ unter­stüt­zen. Das kün­digt Addy Osmani, einer der füh­ren­den Entwickler hin­ter dem Browser in sei­nem Blog an. Aktuell ist aller­dings noch die Version 73.

Damit wird Chrome vor­aus­sicht­lich ab Juni 2019 das nach­ran­gi­ge Laden von Bildern und iFrames unter­stüt­zen, die einen bestimm­ten HTML-Tag zuge­ord­net bekom­men haben, näm­lich:

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

Dabei zeigt loading="lazy" dem Browser an, dass die­ses Bild nach­ran­gig gela­den wer­den kann. Es lohnt sich also, fort­an die­sen Wert für alle Bilder auf einer Seite hin­zu­zu­fü­gen.

Es wird sich sicher auch eine Entwicklerin fin­den, wel­che dafür eine WordPress-Plugin erstellt, so dass die­ser Vorgang rück­wir­kend und für alle bereits bestehen­den Bilder per ein­ma­li­gem Knopfdruck vor­ge­nom­men wer­den kann. Sobald wir da fün­dig wer­den, wer­den wir den Namen die­ses Plugins nach­lie­fern. Falls ihr schon fün­dig gewor­den sein soll­tet, könnt ihr das auch ger­ne in den Kommentaren bekun­den!

Dasselbe Prinzip des loading="lazy" wird auch für die iFrames die­ser Welt gel­ten, sodass die HTML-Tags wie folgt aus­se­hen soll­ten:

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

Nun, wozu das Ganze eigentlich?

Eine Vielzahl von Webseiten ent­hal­ten oft eine hohe Anzahl von Bildern, wel­che oft­mals noch nicht ein­mal für die Darstellung am Bildschirm opti­miert sind. Das führt dazu, dass alle Bilder zusam­men­ge­nom­men meist mehr Ladevolumen und -zeit bean­spru­chen als die eigent­li­chen text­ba­sier­ten Inhalte. Wir schrie­ben unter ande­rem die­sen Beitrag dazu.

Die Crux des Ganzen ist dabei, dass vie­le die­ser Bilder sich nicht im sicht­ba­ren Bereich des Bildschirms befin­den, son­dern oft erst im wei­te­ren Bildlauf zu sehen sind, sobald man also nach unten scrollt.

Von daher müss­ten die­se zunächst nicht sicht­ba­ren Bilder anfangs gar nicht erst gela­den wer­den, solan­ge sie nicht zu sehen sind. Die Bilder zu laden, kurz bevor sie in den sicht­ba­ren Bildschirmbereich kom­men, wür­de völ­lig genü­gen.

Diese Problem soll nun mit der Einführung des Tags und Attributs loading="lazy" beho­ben wer­den.

Bisher ist es gän­gi­ge Praxis, extra ein JavaScript zu laden, nur um die Auswirkungen von Offscreen-Bildern auf die Seitenladezeiten zu begren­zen, und um den Abruf die­ser Bilder solan­ge zu ver­zö­gern, bis die Nutzer in die Nähe der zu laden­den Bilder kom­men.

Addy Osmani zeigt in sei­ner Ankündigung sehr gut auf, wel­chen 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 initia­len Ladevorgang. Andere Bilder wer­den erst dann abge­ru­fen, wenn die Benutzer wei­ter nach unten scrol­len.

Folglich kann das nativ-ver­zö­ger­te Laden dazu bei­tra­gen, dass alle Inhalte, wel­che sich oben im sicht­ba­ren Bereich befin­den, deut­lich schnel­ler ange­zeigt wer­den. Sowohl die Gesamtladezeit als auch das Ladevolumen einer Website wer­den dadurch erheb­lich redu­ziert.

Damit die Bilder (und Videos) aber nicht erst gela­den wer­den, wenn sie sich bereits im sicht­ba­ren Bereich befin­den, eine Sache die eher als stö­rend emp­fun­den wird, wer­den die mit dem loading="lazy" Tag ver­se­he­nen Bilder bereits im Hintergrund gela­den, bevor sie in den sicht­ba­ren Bereich kom­men. Somit bleibt der Gesamteindruck einer Seite auch in die­ser Hinsicht unge­trübt.

Welche Bild-Tags werden unterstützt?

Für Entwickler ist es wich­tig zu wis­sen, dass nicht nur die ordi­nä­ren <img> und <iframe> Tags unter­stützt wer­den, son­dern auch die respon­si­ven 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 unter­stüt­zen, die­sen ein­fach igno­rie­ren. Das ist das Schöne an HTML: Nicht unter­stütz­te Attribute wer­den ein­fach igno­riert und tun kei­nem weh.

Probieren geht über Studieren

Wer das neue Feature schon heu­te pro­bie­ren möch­te, kann dies tun, indem er/sie chrome://flags in die URL-Leiste ein­gibt, und dann “Enable lazy frame loa­ding” sowie “Enable lazy image loa­ding” akti­viert. Danach gilt es noch, den Chrome-Browser neu zu star­ten und los geht es.

Als wei­ter­füh­ren­den 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 gela­den wer­den, wenn sie sich bereits im sicht­ba­ren Bereich befin­den, eine Sache die eher als stö­rend emp­fun­den wird, wer­den die mit dem loading=“lazy” Tag ver­se­he­nen Bilder bereits im Hintergrund gela­den, bevor sie in den sicht­ba­ren Bereich kom­men.”

    Wenn dem so wäre, dann wür­de sich das Attribut ja gleich selbst wie­der über­flüs­sig machen :-)

    Also ich gehe davon aus, dass nur die sofort sicht­ba­ren Bilder gela­den wer­den und nur die “dem­nächst” sicht­ba­ren Bilder im Hintergrund, aber nicht “alle”.

    • Wenn dem so wäre, dann wür­de sich das Attribut ja gleich selbst wie­der über­flüs­sig machen

      Also das habe ich viel­leicht nicht klar genug aus­ge­drückt. Aber wenn die Bilder erst dann nach­ge­la­den wer­den, wenn sie bereit im sicht­ba­ren Bereich sind, ist das halt zu spät und wird von den Benutzern als “lang­sam” oder “stö­rend” emp­fun­den. Deswegen funk­tio­niert die­ses Lazy-Loading tat­säch­lich idea­ler­wei­se so, dass die Bilder bereits im Hintergrund gela­den wer­den, wenn sich der sicht­ba­re Bereich der Benutzer bei­spiels­wei­se 250px über dem zu laden­en­den Bild befin­det.

    • Ich glau­be, die Bilder mit lazy-Attribut wer­den erst gela­den, sobald alle ande­ren Inhalte gela­den sind – egal ob sicht­bar oder nicht.

  2. Ein wenig inkon­sis­tent ist das Verfahren schon:
    Es wer­den sämt­li­che Bildformate unter­stützt, mit Ausnahme des aus­ge­rech­net von
    Google so favo­ri­sier­ten ?

  3. @Prov94: loading="lazy" ist in der Tat noch weit ent­fernt davon, ein Teil des HTML5 spec zu wer­den. Die Diskussion dar­über wur­de erst jüngst wie­der­be­lebt von Addy Osmani: sie­he https://github.com/whatwg/html/issues/2806#issuecomment-470328532

  4. Danke für den Beitrag, das ist echt groß­ar­tig!
    Gut das es gleich nativ im html code gemacht wer­den kann.
    Ist es aber vom W3C bereits stan­dar­di­siert? Das wür­de mich schon inter­es­sie­ren.

Schreibe einen Kommentar zu Jan Antworten abbrechen

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