Unterstützte Browser
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 nicht sichtbaren Bildern zu verschieben:
- Intersection Observer API verwenden
scroll
-,resize
- oderorientationchange
-Event-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 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. Beachten Sie jedoch, dass der Ladevorgang nur verzögert wird, 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 unter dem Darstellungsbereich werden mit einer niedrigeren Priorität geladen, aber beim Laden der Seite werden sie trotzdem 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 standardmäßige Ladeverhalten des Browsers. Dieses Verhalten entspricht dem ohne Attribut und bedeutet, dass das Bild unabhängig davon, wo es sich auf der Seite befindet, geladen wird. Dies ist der Standardwert. Es kann jedoch nützlich sein, ihn explizit festzulegen, wenn Ihre Toolsloading="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 Attribut loading
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 sofort und ohne Scrollen sichtbar sind, 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 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 Schwellenwerten experimentieren, indem Sie das Netzwerk in den Entwicklertools 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 Viewport 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. Diese Änderung hat zwei Vorteile:
<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 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, 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 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>
Der Browser entscheidet zwar, welches Bild aus einem der <source>
-Elemente geladen werden soll, Sie müssen aber 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 im Hilfeartikel Auswirkungen von zu viel Lazy Loading auf die Leistung.
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 es wirkt sich auch nicht negativ auf das Einbeziehen von Lazy Loading aus.
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 ändern, wie nahe 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 anderen Schwellenwertabstä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. opacity:0
-Stile, führen aber dennoch dazu, dass das Bild im 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 beim Karussell 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 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 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
}
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 Attributloading
unterstützt wird, ersetzen Siedata-src
durchsrc
. - Wenn
loading
nicht unterstützt wird, laden Sie einen Fallback von lazysizes und starten Sie ihn. Verwenden Sie die Klasselazyload
, 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?
Unterstützte Browser
<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 Lazy Loading von Bildern kann es Ihnen erheblich erleichtern, die Leistung Ihrer Seiten zu verbessern.
Haben Sie ein ungewöhnliches Verhalten festgestellt, wenn diese Funktion in Chrome aktiviert ist? Melden Sie den Fehler.