Lazy Loading für Bilder auf Browserebene für das Web

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Mit dem Attribut loading können Sie Bilder per Lazy-Loading laden, ohne benutzerdefinierten Lazy-Loading-Code schreiben oder eine separate JavaScript-Bibliothek verwenden zu müssen. Hier ist eine Demo der Funktion:

Auf dieser Seite werden die Details zur Implementierung von Lazy Loading im Browser erläutert.

Warum Lazy Loading auf Browserebene?

Laut dem HTTP Archive sind Bilder der am häufigsten angeforderte Asset-Typ für die meisten Websites und belegen in der Regel mehr Bandbreite als jede andere Ressource. Im 90. Perzentil senden Websites auf Computern und Mobilgeräten über 5 MB an Bildern.

Bisher gab es zwei Möglichkeiten, das Laden von Bildern außerhalb des Bildschirms zu verschieben:

• Intersection Observer API verwenden
• scroll-, resize- oder orientationchange-Ereignis-Handler verwenden

Mit beiden Optionen können Entwickler das Lazy-Loading-Verhalten einbinden. Viele Entwickler haben Drittanbieterbibliotheken erstellt, um noch einfachere Abstraktionsebenen bereitzustellen.

Da das Lazy Loading jedoch direkt vom Browser unterstützt wird, ist keine externe Bibliothek erforderlich. Durch Lazy Loading auf Browserebene wird außerdem sichergestellt, dass Bilder auch dann geladen werden, wenn der Client JavaScript deaktiviert. Das Laden wird jedoch nur verschoben, wenn JavaScript aktiviert ist.

Das loading-Attribut

Chrome lädt Bilder mit unterschiedlichen Prioritäten, je nachdem, wo sie sich im Vergleich zum Geräte-Viewport befinden. Bilder unterhalb des Darstellungsbereichs werden mit einer niedrigeren Priorität geladen, aber trotzdem beim Laden der Seite abgerufen.

Mit dem Attribut loading können Sie das Laden von Bildern außerhalb des Bildschirms vollständig verzögern:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Folgende Werte werden für das Attribut loading unterstützt:

• lazy: Das Laden der Ressource wird verschoben, bis sie eine berechnete Entfernung vom Darstellungsbereich erreicht.
• eager: Das Standardladeverhalten des Browsers. Das entspricht dem Auslassen des Attributs und bedeutet, dass das Bild unabhängig davon geladen wird, wo es sich auf der Seite befindet. Dies ist der Standardwert. Es kann jedoch nützlich sein, ihn explizit festzulegen, wenn Ihre Tools loading="lazy" automatisch hinzufügen, wenn kein expliziter Wert angegeben ist, oder wenn Ihr Linter eine Fehlermeldung ausgibt, wenn er nicht explizit festgelegt ist.

Beziehung zwischen dem loading-Attribut und der Abrufpriorität

Der Wert eager ist eine Anweisung, das Bild wie gewohnt zu laden, ohne die Ladezeit weiter zu verzögern, wenn sich das Bild nicht auf dem Bildschirm befindet. Das Bild wird nicht schneller geladen als ein anderes Bild ohne loading-Attribut.

Wenn Sie die Abrufpriorität eines wichtigen Bildes (z. B. des LCP-Bildes) erhöhen möchten, verwenden Sie Abrufpriorität mit fetchpriority="high".

Ein Bild mit loading="lazy" und fetchpriority="high" wird verzögert gesendet, solange es nicht im Bild ist, und dann mit hoher Priorität abgerufen, wenn es sich fast im Darstellungsbereich befindet. Diese Kombination ist nicht wirklich notwendig, da der Browser dieses Bild wahrscheinlich ohnehin mit hoher Priorität laden würde.

Grenzwerte für die Entfernung vom Darstellungsbereich

Alle Bilder, die ohne Scrollen sofort angezeigt werden, werden normal geladen. Bilder, die weit unterhalb des Darstellungsbereichs des Geräts liegen, werden nur abgerufen, wenn der Nutzer in ihre Nähe scrollt.

Bei der Lazy-Loading-Implementierung von Chromium wird versucht, Bilder außerhalb des sichtbaren Bereichs so früh zu laden, dass sie fertig geladen sind, wenn der Nutzer zu ihnen scrollt. Dazu werden sie bereits abgerufen, bevor sie im Darstellungsbereich sichtbar werden.

Der Grenzwert für die Entfernung hängt von den folgenden Faktoren ab:

• Der Typ der abgerufenen Bildressource
• Der effektive Verbindungstyp

Die Standardwerte für die verschiedenen effektiven Verbindungstypen finden Sie in der Chromium-Quelle. Sie können mit diesen verschiedenen Grenzwerten experimentieren, indem Sie in den DevTools das Netzwerk drosseln.

Verbesserte Datensparfunktionen und Grenzwerte für die Entfernung vom Darstellungsbereich

Im Juli 2020 wurden in Chrome erhebliche Verbesserungen vorgenommen, um die Grenzwerte für das Lazy-Loading von Bildern an den Abstand vom Darstellungsbereich anzupassen und so die Erwartungen der Entwickler besser zu erfüllen.

Bei schnellen Verbindungen (4G) haben wir die Grenzwerte für die Entfernung vom Darstellungsbereich in Chrome von 3000px auf 1250px reduziert. Bei langsameren Verbindungen (3G oder niedriger) wurde der Grenzwert von 4000px auf 2500px geändert. Durch diese Änderung werden zwei Dinge erreicht:

• <img loading=lazy> ähnelt eher dem Verhalten von JavaScript-Lazy-Loading-Bibliotheken.
• Die neuen Grenzwerte für die Entfernung vom Darstellungsbereich bedeuten weiterhin, dass Bilder wahrscheinlich geladen sind, wenn ein Nutzer zu ihnen scrollt.

Unten sehen Sie einen Vergleich der alten und neuen Grenzwerte für die Entfernung vom Viewport für eine unserer Demos mit einer schnellen Verbindung (4G):

und die neuen Grenzwerte im Vergleich zu LazySizes (einer beliebten JavaScript-Bibliothek für Lazy Loading):

Ihren Bildern Dimensionsattribute zuweisen

Während der Browser ein Bild lädt, kennt er die Abmessungen des Bildes nicht sofort, es sei denn, sie werden explizit angegeben. Damit der Browser auf einer Seite genügend Platz für Bilder reservieren und störende Layoutänderungen vermeiden kann, empfehlen wir, allen <img>-Tags die Attribute width und height hinzuzufügen.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternativ können Sie die Werte auch direkt in einem Inline-Stil angeben:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

Die Best Practice zum Festlegen von Dimensionen gilt für <img>-Tags unabhängig davon, ob sie per Lazy Loading eingebunden werden. Durch Lazy Loading kann sie jedoch wichtiger werden.

Das Lazy-Loading in Chromium ist so implementiert, dass Bilder mit höherer Wahrscheinlichkeit geladen werden, sobald sie sichtbar sind. Es besteht jedoch immer noch die Möglichkeit, dass sie nicht zum richtigen Zeitpunkt geladen werden. In diesem Fall erhöht sich die Auswirkung der Bilder auf die kumulative Layoutverschiebung, wenn Sie width und height nicht angeben. Wenn Sie die Abmessungen Ihrer Bilder nicht angeben können, können Sie durch Lazy Loading Netzwerkressourcen sparen. Allerdings besteht das Risiko, dass es zu mehr Layoutverschiebungen kommt.

In den meisten Fällen werden Bilder auch dann verzögert geladen, wenn Sie keine Abmessungen angeben. Es gibt jedoch einige Sonderfälle, die Sie kennen sollten. Wenn width und height nicht angegeben sind, werden standardmäßig 0 × 0 Pixel verwendet. Wenn Sie eine Bildergalerie haben, entscheidet der Browser möglicherweise, dass alle Bilder am Anfang in den Darstellungsbereich passen, da jedes Bild keinen Platz einnimmt und kein Bild aus dem Bildschirm geschoben wird. In diesem Fall entscheidet der Browser, alles zu laden, was die Seite langsamer macht.

Ein Beispiel dafür, wie loading mit einer großen Anzahl von Bildern funktioniert, finden Sie in dieser Demo.

Sie können auch Bilder, die Sie mit dem <picture>-Element definiert haben, per Lazy-Load laden:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Der Browser entscheidet zwar, welches Bild aus einem der <source>-Elemente geladen werden soll, Sie müssen jedoch nur dem Fallback-Element <img> das Attribut loading hinzufügen.

Bilder, die im ersten Darstellungsbereich sichtbar sind, immer sofort laden

Verwenden Sie für Bilder, die beim ersten Laden der Seite sichtbar sind, und insbesondere für LCP-Bilder das standardmäßige Eager-Laden des Browsers, damit sie sofort verfügbar sind. Weitere Informationen finden Sie unter Die Leistungsauswirkungen von zu viel Lazy Loading.

Verwenden Sie loading=lazy nur für Bilder außerhalb des ersten Darstellungsbereichs. Der Browser kann ein Bild erst dann per Lazy Load laden, wenn er weiß, wo es auf der Seite sein soll. Das führt zu einem langsameren Laden.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Graduelle Fehlertoleranz

In Browsern, die das loading-Attribut nicht unterstützen, wird es ignoriert. Sie profitieren nicht von den Vorteilen des Lazy-Loadings, aber die Einbindung hat keine negativen Auswirkungen.

FAQ

Häufig gestellte Fragen zum Lazy Loading auf Browserebene

Kann ich Bilder in Chrome automatisch per Lazy Load laden?

Bisher wurden in Chromium alle Bilder, die sich gut verzögern lassen, automatisch verzögert geladen, wenn der Lite-Modus in Chrome für Android aktiviert war und das Attribut loading entweder nicht angegeben oder auf loading="auto" festgelegt war. Der Lite-Modus und loading="auto" wurden jedoch eingestellt und es ist nicht geplant, Bilder in Chrome automatisch per Lazy-Load zu laden.

Kann ich festlegen, wie nah ein Bild am Darstellungsbereich sein muss, bevor es geladen wird?

Diese Werte sind hartcodiert und können nicht über die API geändert werden. Sie können sich jedoch in Zukunft ändern, da Browser mit verschiedenen Grenzabständen und Variablen experimentieren.

Kann das loading-Attribut für CSS-Hintergrundbilder verwendet werden?

Nein, Sie können sie nur mit <img>-Tags verwenden.

Kann loading mit Bildern im Darstellungsbereich arbeiten, die nicht sofort sichtbar sind?

Mit loading="lazy" können Bilder verhindert werden, die nicht sichtbar sind, sich aber innerhalb der berechneten Entfernung befinden. Diese Bilder können sich bei bestimmten Bildschirmgrößen hinter einem Karussell oder durch CSS ausgeblendet befinden. In Chrome, Safari und Firefox werden Bilder beispielsweise nicht mit display: none;-Styling geladen, weder auf dem Bildelement noch auf einem übergeordneten Element. Andere Techniken zum Ausblenden von Bildern, z. B. das opacity:0-Styling, führen jedoch dazu, dass das Bild trotzdem vom Browser geladen wird. Testen Sie Ihre Implementierung immer gründlich, um sicherzustellen, dass sie wie vorgesehen funktioniert.

In Chrome 121 wurde das Verhalten für horizontal scrollbare Bilder wie Karussells geändert. Für diese werden jetzt dieselben Grenzwerte wie beim vertikalen Scrollen verwendet. Das bedeutet, dass für den Karussell-Use-Case Bilder geladen werden, bevor sie im Darstellungsbereich sichtbar sind. Das bedeutet, dass das Laden des Bildes für den Nutzer weniger wahrscheinlich zu bemerken ist, aber es werden mehr Downloads benötigt. In der Demo für horizontales Lazy Loading können Sie das Verhalten in Chrome mit dem in Safari und Firefox vergleichen.

Was passiert, wenn ich bereits eine Drittanbieterbibliothek oder ein Script zum Lazy-Load von Bildern verwende?

Da moderne Browser das Lazy-Loading vollständig unterstützen, benötigen Sie wahrscheinlich keine Bibliothek oder kein Script von Drittanbietern, um Bilder per Lazy-Loading zu laden.

Ein Grund, weiterhin eine Drittanbieterbibliothek neben loading="lazy" zu verwenden, ist die Bereitstellung einer Polyfill für Browser, die das Attribut nicht unterstützen, oder eine bessere Kontrolle darüber, wann das Lazy-Loading ausgelöst wird.

Wie gehe ich mit Browsern um, die Lazy Loading nicht unterstützen?

Das Lazy-Loading von Bildern auf Browserebene wird von allen gängigen Browsern gut unterstützt und wird für die meisten Anwendungsfälle empfohlen, da keine zusätzlichen Abhängigkeiten von JavaScript erforderlich sind.

Wenn Sie jedoch mehr Browser unterstützen oder mehr Kontrolle über die Lazy-Loading-Grenzwerte haben möchten, können Sie eine Bibliothek von Drittanbietern verwenden, um Bilder auf Ihrer Website per Lazy-Loading zu laden.

Mit der loading-Property können Sie feststellen, ob ein Browser die Funktion unterstützt:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

lazysizes ist beispielsweise eine beliebte JavaScript-Bibliothek für Lazy Loading. Du kannst die Unterstützung des loading-Attributs nur erkennen, um Lazysizes als Fallback-Bibliothek zu laden, wenn loading nicht unterstützt wird. Das funktioniert so:

• Ersetzen Sie <img src> durch <img data-src>, um eine vorzeitige Datenübertragung in nicht unterstützten Browsern zu vermeiden. Wenn das Attribut loading unterstützt wird, ersetzen Sie data-src durch src.
• Wenn loading nicht unterstützt wird, laden Sie einen Fallback von lazysizes und starten Sie ihn. Verwenden Sie die Klasse lazyload, um anzugeben, welche Bilder per Lazy-Load geladen werden sollen:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Hier ist eine Demo dieses Musters. Probieren Sie es in einem älteren Browser aus, um den Fallback in Aktion zu sehen.

Wird Lazy Loading für iFrames auch in Browsern unterstützt?

<iframe loading=lazy> wurde ebenfalls standardisiert. So können Sie Iframes mit dem loading-Attribut per Lazy-Load laden. Weitere Informationen finden Sie unter Es ist an der Zeit, Offscreen-Iframes per Lazy Load zu laden.

Wie wirkt sich das Lazy-Loading auf Browserebene auf Anzeigen auf einer Webseite aus?

Alle Anzeigen, die Nutzern als Bilder oder iFrames präsentiert werden, werden wie jedes andere Bild oder jeder andere iFrame per Lazy Load geladen.

Wie werden Bilder behandelt, wenn eine Webseite gedruckt wird?

Alle Bilder und Iframes werden sofort geladen, wenn die Seite gedruckt wird. Weitere Informationen finden Sie unter Problem #875403.

Erkennt Lighthouse Lazy Loading auf Browserebene?

In Lighthouse 6.0 und höher werden Ansätze für das Lazy-Loading von Bildern außerhalb des Bildschirms berücksichtigt, bei denen unterschiedliche Grenzwerte verwendet werden können. So können sie die Prüfung Offscreen-Bilder verschieben bestehen.

Bilder per Lazy Loading laden, um die Leistung zu verbessern

Die Browserunterstützung für das Lazy-Loading von Bildern kann Ihnen die Optimierung der Leistung Ihrer Seiten erheblich erleichtern.

Haben Sie ein ungewöhnliches Verhalten festgestellt, wenn diese Funktion in Chrome aktiviert ist? Melden Sie den Fehler.