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

Endlich ist das integrierte Lazy Loading verfügbar.

Im Web wird jetzt Lazy Loading von Bildern auf Browserebene unterstützt. In diesem Video siehst du eine Demo der Funktion:

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. Sehen wir uns die Details einmal genauer an.

Browserkompatibilität

Browser, die das Attribut loading nicht unterstützen, ignorieren es einfach ohne Nebeneffekte.

Was spricht für Lazy Loading auf Browserebene?

Laut HTTP-Archiv sind Bilder bei den meisten Websites der am häufigsten angeforderte Asset-Typ und belegen in der Regel mehr Bandbreite als jede andere Ressource. Beim 90. Perzentil senden Websites über 5 MB an Bildern auf Computern und Mobilgeräten. Das sind ganz schön viele Katzenbilder.

Bisher gab es zwei Möglichkeiten, das Laden von nicht sichtbaren Bildern zu verzögern:

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

Beide Optionen können Entwicklern die Lazy Loading-Funktion ermöglichen und viele Entwickler haben Drittanbieterbibliotheken erstellt, um Abstraktionen bereitzustellen, die noch einfacher zu verwenden sind. Da Lazy Loading direkt vom Browser unterstützt wird, ist jedoch keine externe Bibliothek erforderlich. Außerdem sorgt Lazy Loading auf Browserebene dafür, dass das verzögerte Laden von Bildern auch dann funktioniert, wenn JavaScript auf dem Client deaktiviert ist.

Das Attribut loading

Chrome lädt Bilder mit unterschiedlichen Prioritäten, je nachdem, wo sie sich in Bezug auf den Darstellungsbereich des Geräts befinden. Bilder unterhalb des Darstellungsbereichs werden mit einer niedrigeren Priorität geladen, werden aber beim Laden der Seite abgerufen.

Mit dem Attribut loading können Sie das Laden von nicht sichtbaren Bildern, die durch Scrollen erreicht werden, 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 verzögert, bis eine berechnete Entfernung vom Darstellungsbereich erreicht ist.
• eager: Das Standardladeverhalten des Browsers, das dem Fehlen des Attributs entspricht. Es bedeutet, dass das Bild unabhängig von seiner Position auf der Seite geladen wird. Dies ist zwar die Standardeinstellung, es kann jedoch nützlich sein, sie explizit festzulegen, wenn Ihre Tools loading="lazy" automatisch hinzufügen, wenn kein expliziter Wert vorhanden ist, oder wenn Ihr Linter sich meldet, wenn er nicht explizit festgelegt ist.

Beziehung zwischen dem Attribut loading und der Abrufpriorität

Der Wert eager ist einfach eine Anweisung, das Bild wie gewohnt zu laden, ohne dass der Ladevorgang weiter verzögert wird, wenn es sich nicht auf dem Bildschirm befindet. Dies bedeutet nicht, dass das Bild schneller als ein anderes Bild ohne das Attribut loading="eager" geladen wird.

Browser priorisieren Ressourcen basierend auf verschiedenen Heuristiken, und das Attribut loading gibt nur an, wann die Bildressource in die Warteschlange gestellt wird, und nicht, wie sie in dieser Warteschlange priorisiert wird. eager impliziert nur, dass die Browser für E-Mail-Warteschlangen standardmäßig verwendet werden.

Wenn Sie die Abrufpriorität für ein wichtiges Bild (z. B. das LCP-Bild) erhöhen möchten, sollte Abrufpriorität mit fetchpriority="high" verwendet werden.

Ein Bild mit loading="lazy" und fetchpriority="high" wird auch dann verzögert angezeigt, wenn es sich außerhalb des Darstellungsbereichs befindet. Es wird dann mit hoher Priorität abgerufen, wenn es sich fast innerhalb des Darstellungsbereichs befindet. Er würde in diesem Fall wahrscheinlich ohnehin mit einer hohen Priorität abgerufen werden, sodass diese Kombination weder benötigt noch verwendet werden sollte.

Grenzwerte für „Distance-of-viewport“

Alle Bilder, die ohne Scrollen sichtbar sind, also ohne Scrollen sichtbar sind, werden normal geladen. Elemente, die sich weit unter dem Darstellungsbereich des Geräts befinden, werden nur abgerufen, wenn der Nutzer in seiner Nähe scrollt.

Die Implementierung von Lazy Loading in Chromium sorgt dafür, dass nicht sichtbare Bilder früh genug geladen werden, sodass sie vollständig geladen sind, sobald der Nutzer zu ihnen scrollt. Bilder in der Nähe werden abgerufen, lange bevor sie im Darstellungsbereich sichtbar sind. Dadurch maximieren wir die Wahrscheinlichkeit, dass sie bereits geladen sind, wenn sie sichtbar werden.

Im Vergleich zu JavaScript-Bibliotheken für Lazy Loading sind die Grenzwerte für das Abrufen von Bildern, die durch Scrollen sichtbar werden, unter Umständen nicht ganz einfach.

Der Schwellenwert für die Entfernung ist nicht festgelegt und hängt von mehreren Faktoren ab:

• Der Typ der abgerufenen Bildressource
• Der effektive Verbindungstyp

Die Standardwerte für die verschiedenen effektiven Verbindungstypen finden Sie in der Chromium-Quelle. Diese Zahlen und sogar der Ansatz, nur abzurufen, wenn eine bestimmte Entfernung zum Darstellungsbereich erreicht ist, können sich in Zukunft ändern, da das Chrome-Team die Heuristik verbessert, um den Beginn des Ladevorgangs zu bestimmen.

Verbesserte Dateneinsparung und Schwellenwerte für die Entfernung vom Darstellungsbereich

Seit Juli 2020 wurden in Chrome erhebliche Verbesserungen vorgenommen, um die Grenzwerte für das Lazy Loading von Entfernung vom Darstellungsbereich für Bilder an die Erwartungen von Entwicklern anzupassen.

Bei schnellen Verbindungen (4G) haben wir die Grenzwerte für den Abstand vom Darstellungsbereich in Chrome von 3000px auf 1250px gesenkt. Bei langsameren Verbindungen (3G oder niedriger) haben wir den Schwellenwert von 4000px zu 2500px geändert. Mit dieser Änderung werden zwei Ziele erreicht:

• <img loading=lazy> ähnelt dem von JavaScript-Lazy Loading-Bibliotheken.
• Durch die neuen Grenzwerte für den Abstand vom Darstellungsbereich können wir weiterhin garantieren, dass die Bilder wahrscheinlich bereits geladen sind, wenn der Nutzer zu ihnen gescrollt hat.

Unten finden Sie einen Vergleich der alten und neuen Grenzwerte für „Entfernung vom Darstellungsbereich“ für eine unserer Demos über eine schnelle Verbindung (4G):

Alte und neue Grenzwerte im Vergleich:

und die neuen Grenzwerte im Vergleich zu LazySizes (einer beliebten Lazy-Loading-Bibliothek in JS):

Wir arbeiten gemeinsam mit der Gemeinschaft für Webstandards daran, die Grenzwerte für den Abstand vom Darstellungsbereich in verschiedenen Browsern besser aufeinander abzustimmen.

Bilder müssen Abmessungsattribute enthalten

Während der Browser ein Bild lädt, kann er die Abmessungen des Bildes nicht unmittelbar erkennen, sofern diese nicht ausdrücklich angegeben wurden. Damit der Browser auf einer Seite genügend Platz für Bilder reservieren kann, sollten alle <img>-Tags sowohl width- als auch height-Attribute enthalten. Ohne angegebene Abmessungen können Layoutverschiebungen auftreten, die auf Seiten, die eine längere Ladezeit benötigen, stärker wahrgenommen werden.

<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 beim Festlegen von Dimensionen gilt für <img>-Tags unabhängig davon, ob sie verzögert geladen werden. Mit Lazy Loading kann dies relevanter werden. Wenn Sie width und height für Bilder in modernen Browsern festlegen, können Browser ihre systeminterne Größe auch ableiten.

In den meisten Szenarien gilt das Lazy Loading von Bildern auch, wenn keine Dimensionen enthalten sind. Es gibt jedoch einige Grenzfälle, die Sie beachten sollten. Wenn width und height nicht angegeben sind, betragen die Bildabmessungen zunächst 0 × 0 Pixel. Wenn Sie eine Galerie mit solchen Bildern haben, kann der Browser zu Beginn davon ausgehen, dass alle in den Darstellungsbereich passen, da jedes Bild praktisch keinen Platz einnimmt und keine Bilder aus dem Bildschirm verschoben werden. In diesem Fall stellt der Browser fest, dass alle diese für den Nutzer sichtbar sind, und beschließt, alles zu laden.

Durch die Angabe von Bildabmessungen verringert sich außerdem die Wahrscheinlichkeit, dass Layoutverschiebungen auftreten. Wenn Sie keine Abmessungen für Ihre Bilder hinzufügen können, kann Lazy Loading einen Kompromiss zwischen der Einsparung von Netzwerkressourcen und einem erhöhten Risiko für Layoutverschiebungen darstellen.

Obwohl Lazy Loading in Chromium so implementiert ist, dass Bilder wahrscheinlich geladen werden, sobald sie sichtbar sind, besteht dennoch eine kleine Chance, dass sie noch nicht geladen sind. In diesem Fall erhöhen fehlende width- und height-Attribute bei solchen Bildern ihre Auswirkungen auf den Cumulative Layout Shift.

Für Bilder, die mit dem Element <picture> definiert werden, kann auch Lazy Loading verwendet werden:

<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 von einem der <source>-Elemente geladen wird, das loading-Attribut muss aber nur in das <img>-Fallback-Element aufgenommen werden.

Lazy Loading von Bildern vermeiden, die sich im ersten sichtbaren Darstellungsbereich befinden

Sie sollten loading=lazy nicht für Bilder festlegen, die sich im ersten sichtbaren Darstellungsbereich befinden. Das ist insbesondere für LCP-Bilder relevant. Weitere Informationen finden Sie im Artikel Die Auswirkungen von zu viel Lazy Loading auf die Leistung.

Wir empfehlen, loading=lazy nur zu Bildern hinzuzufügen, die „below the fold“ (mit Scrollen sichtbar) platziert sind. Schnell geladene Bilder können sofort abgerufen werden. Bilder, die verzögert geladen werden, muss der Browser derzeit warten, bis er weiß, wo sich das Bild auf der Seite befindet. Dafür ist IntersectionObserver erforderlich.

Im Allgemeinen sollten alle Bilder im Darstellungsbereich unter Verwendung der Standardeinstellungen des Browsers geladen werden. Sie müssen loading=eager nicht angeben, damit dies bei Bildern im Darstellungsbereich der Fall ist.

<!-- 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">

Graceful Degradation

Browser, die das Attribut loading nicht unterstützen, ignorieren dieses Attribut. Auch wenn diese Browser natürlich nicht von den Vorteilen des Lazy Loadings profitieren, wirkt sich das Attribut nicht negativ auf sie aus.

Häufig gestellte Fragen

Gibt es Pläne, Bilder in Chrome automatisch per Lazy Loading zu laden?

Bisher hat Chromium automatisch alle Bilder per Lazy Loading geladen, die gut dafür geeignet waren, verzögert zu werden, wenn der Lite-Modus in Chrome für Android aktiviert war und das Attribut loading entweder nicht bereitgestellt oder auf loading="auto" festgelegt war. Der Lite-Modus wurde jedoch wie der nicht standardmäßige loading="auto" eingestellt. Es gibt derzeit keine Pläne, Bilder in Chrome automatisch per Lazy Loading zu laden.

Kann ich ändern, wie nah ein Bild sein muss, bevor ein Ladevorgang ausgelöst wird?

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

Können CSS-Hintergrundbilder das Attribut loading nutzen?

Nein, sie kann derzeit nur mit <img>-Tags verwendet werden.

Hat das Lazy Loading von Bildern, die sich im Darstellungsbereich des Geräts befinden, einen Nachteil?

Es ist sicherer, loading=lazy nicht auf Bildern „above the fold“ zu platzieren, da Chrome loading=lazy-Bilder im Vorabladescanner nicht vorab lädt und das Abrufen solcher Bilder verzögert, bis das gesamte Layout fertig ist. Weitere Informationen finden Sie unter Lazy Loading von Bildern im ersten sichtbaren Darstellungsbereich vermeiden.

Wie funktioniert das Attribut loading bei Bildern, die sich im Darstellungsbereich befinden, aber nicht sofort sichtbar sind (z. B. hinter einem Karussell oder bei bestimmten Bildschirmgrößen von CSS ausgeblendet)?

Mit loading="lazy" kann verhindert werden, dass sie geladen werden, wenn sie nicht sichtbar sind, aber innerhalb der berechneten Entfernung. In Chrome, Safari und Firefox werden z. B. keine Bilder mit dem display: none;-Stil geladen – weder für das Bildelement noch für ein übergeordnetes Element. Andere Techniken zum Ausblenden von Bildern, z. B. die Verwendung des opacity:0-Stils, führen dennoch dazu, dass die Bilder geladen werden. Testen Sie Ihre Implementierung immer gründlich, um sicherzustellen, dass sie wie vorgesehen funktioniert.

Was ist, wenn ich bereits eine Drittanbieterbibliothek oder ein Skript für das Lazy Loading von Bildern verwende?

Da natives Lazy Loading jetzt vollständig in modernen Browsern unterstützt wird, sollten Sie überdenken, ob Sie für das Lazy Loading von Bildern weiterhin eine Drittanbieterbibliothek oder ein Skript benötigen.

Ein Grund, weiterhin eine Drittanbieterbibliothek zusammen mit loading="lazy" zu verwenden, ist die Bereitstellung eines Polyfill für Browser, die das Attribut nicht unterstützen, oder um mehr Kontrolle darüber zu haben, wann Lazy Loading ausgelöst wird.

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

Erstelle einen Polyfill oder verwende eine Bibliothek eines Drittanbieters, um Bilder auf deiner Website per Lazy Loading zu laden. Mit dem Attribut loading lässt sich feststellen, ob die Funktion im Browser unterstützt wird:

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

Lazysizes ist beispielsweise eine beliebte Lazy Loading-Bibliothek für JavaScript. Sie können erkennen, dass das Attribut loading nur dann Lazysizes als Fallback-Bibliothek lädt, wenn loading nicht unterstützt wird. Das funktioniert so:

• Ersetzen Sie <img src> durch <img data-src>, um ein schnelleres Laden 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 ein Fallback (Lazysizes) und initiieren Sie es. In Dokumenten mit Lazysizes können Sie die Klasse lazyload verwenden, um festzulegen, für welche Bilder ein Lazy Loading erforderlich ist.

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

Eine Demo dieses Musters finden Sie hier. Probieren Sie es in einem älteren Browser aus, um das Fallback in Aktion zu sehen.

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

<iframe loading=lazy> wurde außerdem standardisiert und in Chromium und Safari bereits implementiert. So können Sie iFrames mithilfe des Attributs loading Lazy Loading verwenden. Weitere Informationen finden Sie in diesem Artikel zu Lazy Loading in iFrames.

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

Alle Anzeigen, die dem Nutzer in Form von Lazy Loading für Bilder oder iFrames wie jedes andere Bild oder iFrame angezeigt werden.

Wie werden Bilder gehandhabt, 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?

Bei Lighthouse 6.0 und höher werden Ansätze für Lazy Loading von nicht sichtbaren Bildern berücksichtigt, bei denen möglicherweise andere Grenzwerte verwendet werden. Das bedeutet, dass sie die Prüfung Nicht sichtbare Bilder zurückstellen bestehen.

Fazit

Die Unterstützung von Bildern mit Lazy Loading kann die Leistung Ihrer Webseiten erheblich verbessern.

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