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 erfahren Sie, wie Sie Lazy Loading im Browser implementieren.

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 Lazy Loading-Verhalten einbinden. Außerdem haben viele Entwickler Bibliotheken von Drittanbietern erstellt, um Abstraktionen noch einfacher zu ermöglichen.

Da Lazy Loading direkt vom Browser unterstützt wird, ist jedoch keine externe Bibliothek erforderlich. Das Lazy Loading auf Browserebene sorgt außerdem dafür, dass das Laden von Bildern auch dann funktioniert, 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 relativ zum Darstellungsbereich des Geräts 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 die Standardeinstellung, aber es kann nützlich sein, explizit festzulegen, wenn das Tool loading="lazy" automatisch hinzufügt, wenn kein expliziter Wert vorhanden ist, oder wenn sich der Linter beschwert, 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 dass der Ladevorgang weiter verzögert wird, wenn sich das Bild außerhalb des sichtbaren Bereichs 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 unbedingt erforderlich, da der Browser das Bild wahrscheinlich trotzdem 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 Entfernungsgrenzwert hängt von den folgenden Faktoren ab:

• Der Typ der Bildressource, die abgerufen wird
• 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 Dateneinsparungen 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 Viewport anzupassen und so die Erwartungen der Entwickler besser zu erfüllen.

Bei schnellen 4G-Verbindungen haben wir die Grenzwerte für die Entfernung vom Darstellungsbereich in Chrome von 3000px auf 1250px und bei langsameren Verbindungen (3G oder niedriger) von 4000px auf 2500px gesenkt. 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-Lazy Loading-Bibliothek):

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 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. Wenn Sie width und height nicht für Ihre Bilder angeben, erhöht sich deren Einfluss auf die kumulative Layoutverschiebung. 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, kann der Browser zunächst festlegen, dass alle in den Darstellungsbereich passen, da jedes Bild keinen Platz einnimmt und kein Bild aus dem Darstellungsbereich verschoben wird. In diesem Fall entscheidet der Browser, alles zu laden, was die Ladezeit der Seite verlängert.

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>

Obwohl im Browser entschieden wird, welches Bild aus den <source>-Elementen geladen wird, müssen Sie dem <img>-Element des Fallbacks nur 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

Browser, die das Attribut loading nicht unterstützen, ignorieren es. 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" kann verhindert werden, dass Bilder geladen werden, wenn sie nicht sichtbar sind, sich aber innerhalb der berechneten Entfernung befinden. Diese Bilder können sich bei bestimmten Bildschirmgrößen hinter einem Karussell befinden oder durch CSS ausgeblendet werden. 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 scrollende Bilder wie Karussells geändert. Für diese werden jetzt dieselben Grenzwerte wie beim vertikalen Scrollen verwendet. Im Karussell-Anwendungsfall werden Bilder also geladen, 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 ist, wenn ich bereits eine Drittanbieterbibliothek oder ein Skript für das Lazy Loading 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 dafür, neben loading="lazy" weiterhin eine Bibliothek eines Drittanbieters 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 müssen oder mehr Kontrolle über Lazy-Loading-Schwellenwerte haben möchten, können Sie eine Bibliothek eines Drittanbieters verwenden, um Lazy Loading für Bilder auf Ihrer Website durchzuführen.

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
}

Beispielsweise ist lazysizes eine beliebte Lazy Loading-Bibliothek für JavaScript. 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 das Fallback in Aktion zu sehen.

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

<iframe loading=lazy> wurde ebenfalls standardisiert. Dadurch können Sie iFrames mithilfe des Attributs loading per Lazy Loading laden. Weitere Informationen

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.

Lazy Loading von Bildern zur Leistungssteigerung

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.