Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Markus Seyfferth 22. August 2019

Natives Lazy-Loading in Chrome

Wichtige Neuerungen im Netz gibt es einige, doch nur wenige sind wirklich von so grundlegender Bedeutung, dass sie für einen Großteil aller Nutzer mit einem Schlag eine deutliche Verbesserung bringt. Eine solche Neuerung ist das sogenannte Lazy-Loading, welches der Chrome-Browser ab Version 76 von Haus aus „nativ“ unterstützt.

Chrome wird ab August 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen loading=”lazy” HTML-Tag zugeordnet bekommen haben. Hier ein Beispiel:

In dem Video sieht man gut, wie die Bilder nach und nach geladen werden, je weiter die Nutzer runterscrollen.
<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="..." />

Dabei zeigt loading="lazy" dem Browser an, dass dieses Bild nachrangig geladen werden kann. Das bringt insbesondere für mobile Anwender einen hohen Nutzen mit sich, da es deren Datenvolumen schont. Es lohnt sich also, fortan diesen Wert für alle Bilder auf einer Seite hinzuzufügen.

Dasselbe Prinzip des loading="lazy" wird auch für iFrames (z.B. für eingebettete Youtube-Videos) gelten, sodass die HTML-Tags wie folgt aussehen sollten:

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

Was geht mich das an?

Webseites enthalten oft eine hohe Anzahl von Bildern, welche oftmals nicht optimiert sind. Das führt dazu, dass Bilder mehr Ladevolumen 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. Lazy-Loading schont also das Datenvolumen ungemein.

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.

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>.

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.

Laut Caniuse ist die Unterstützung in anderen Browsern bislang mehr als dürftig.

Nichtsdestotrotz lohnt es sich auch jetzt schon, das neue Feature zu nutzen. Immerhin benutzen je nach Seite 40 bis 70 % der Anwender Chrome als ihren Standard-Browser. (Hier auf drweb.de sind 42 % aller Besucher in Chrome unterwegs.)

In WordPress einbauen

Versierte WordPress-Anwender können diese Funktion auch jetzt schon in ihre functions.php einbauen. Der Code könnte dann in etwa so aussehen:

<?php
    function drweb_add_lazy_loading($content)
        {
        $content = preg_replace('/src="/', 'loading="lazy" src="', $content);
        return $content;
        }
    add_filter('the_content', 'drweb_add_lazy_loading');
?>

Mit diesem Code-Schnipsel sucht WordPress nach src="", und fügt ein loading="lazy" hinzu. Doch Obacht! Der Code sollte unbedingt vorher in einer Testumgebung geprüft werden! Keinesfalls darf man den Code einfach ungeprüft in seine functions.php auf dem Live-Server einbauen. Das kann schnell nach hinten losgehen, und auf einmal wirft die ganze Seite nur noch Fehlermeldungen ab.

Dieser Artikel wurde am 20. April 2019 veröffentlicht und am 22. August aktualisiert.

Beitragsbild: Depositphotos

Markus Seyfferth

Markus Seyfferth

Markus leitet seit April 2019 die Geschicke von 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.

9 Kommentare

  1. Das scheint mir eine gute Sache zu sein. Meine Frage dazu: Meine Fotogalerie verwendet aber folgenden html-Aufbau:
    <a href=”full/…jpg” rel=”nofollow”></a>…
    Das Hauptbild wird also nicht mit img aufgerufen. Kann ich die Methode trotzdem anwenden?

    • Hallo Karl,

      <a href=””> ist erstmal nur der Link zu einer Seite, und umschliesst wahrscheinlich in Deinem Fall das Bild-Element, sodass das Bild anklickbar wird. Und ja, Du kannst auch für solche Fälle Lazy-Loading verwenden. Es bedeutet lediglich, dass das Bild nachrangig geladen wird.

  2. “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.

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

  4. @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

  5. 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.