Unterstützte Browser
- 77
- 79
- 75
- 15,4
Sie können das Attribut loading
verwenden, um Bilder per Lazy Loading zu laden, ohne
benutzerdefinierten Lazy-Loading-Code schreiben oder eine separate JavaScript-Bibliothek verwenden. Hier ist ein
Demo der Funktion:
Auf dieser Seite erfahren Sie, wie Sie Lazy Loading im Browser implementieren.
Warum Lazy Loading auf Browserebene?
Laut HTTP-Archiv sind Bilder der am häufigsten angefragte Asset-Typ für die meisten Websites. mehr Bandbreite als jede andere Ressource. Beim 90. Perzentil werden Websites über 5 MB Bilder an Desktop-Computer und Mobilgeräte senden.
Bisher gab es zwei Möglichkeiten, das Laden von nicht sichtbaren Bildern zu verschieben:
- Intersection Observer API verwenden
scroll
-,resize
- oderorientationchange
-Event-Handler verwenden
Beide Optionen ermöglichen es Entwicklern, Lazy Loading Entwickelnden Bibliotheken von Drittanbietern entwickelt, um Abstraktionen bereitzustellen, noch einfacher zu nutzen.
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. Beachten Sie jedoch, dass der Ladevorgang nur verzögert wird, wenn JavaScript aktiviert ist.
Das Attribut loading
Chrome lädt Bilder mit unterschiedlichen Prioritäten, je nachdem, wo sie sich befinden relativ zum Darstellungsbereich des Geräts. Bilder unter dem Darstellungsbereich werden mit einem Priorität hat, werden aber beim Laden der Seite abgerufen.
Mit dem Attribut loading
können Sie das Laden von nicht sichtbaren
Bilder:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Folgende Werte werden für das Attribut loading
unterstützt:
lazy
: Laden der Ressource auf später verschieben, bis sie einen berechnete Entfernung vom Darstellungsbereicheager
: Standardladeverhalten des Browsers (entspricht nicht dem) einschließlich des Attributs. Dies bedeutet, dass das Bild unabhängig davon geladen wird, wo es sich befindet. auf der Seite. Dies ist die Standardeinstellung, aber es kann nützlich sein, festzulegen, wenn Ihr Tool automatischloading="lazy"
hinzufügt, wenn keine expliziten Wert oder wenn sich der Linter beschwert, wenn er nicht explizit festgelegt wurde.
Beziehung zwischen dem Attribut loading
und der Abrufpriorität
Der Wert eager
ist eine Anweisung, das Bild wie gewohnt ohne Verzögerung zu laden.
wenn das Bild außerhalb des Bildschirms liegt. Das Bild wird nicht schneller geladen.
als ein anderes Bild ohne loading
-Attribut.
Wenn Sie die Abrufpriorität eines wichtigen Images erhöhen möchten, z. B.
LCP), verwenden Sie Fetch Priority mit
fetchpriority="high"
Ein Bild mit loading="lazy"
und fetchpriority="high"
verzögert sich in folgendem Zeitraum:
außerhalb des Bildschirms gespeichert und dann mit hoher Priorität abgerufen,
Darstellungsbereich. Diese Kombination ist nicht unbedingt erforderlich, da der Browser
dieses Bild wahrscheinlich trotzdem
mit hoher Priorität laden.
Grenzwerte für die Entfernung vom Darstellungsbereich
Alle Bilder, die sofort und ohne Scrollen sichtbar sind, werden normal geladen. Google Bilder die weit unterhalb des Darstellungsbereichs des Geräts liegen, werden nur abgerufen, wenn der Nutzer in deren Nähe scrollt.
Durch die Implementierung von Lazy Loading in Chromium soll erreicht werden, dass nicht sichtbare Bilder werden so früh geladen, dass sie fertig sind, wenn der Nutzer scrollt. indem sie abgerufen werden, bevor sie im Darstellungsbereich sichtbar sind.
Der Grenzwert für die Entfernung hängt von folgenden Faktoren ab:
- Der Typ der Bildressource, die abgerufen wird
- Der effektive Verbindungstyp
Die Standardwerte für die verschiedenen effektiven Verbindungstypen finden Sie in Chromium-Quelle Sie können mit diesen verschiedenen Grenzwerten experimentieren, Drosselung des Netzwerks in den Entwicklertools.
Verbesserte Dateneinsparungen und Grenzwerte für die Entfernung vom Darstellungsbereich
Im Juli 2020 wurden in Chrome erhebliche Verbesserungen vorgenommen, um die Grenzwerte für Lazy Loading für den Abstand vom Darstellungsbereich für Bilder an die Erwartungen der Entwickler anzupassen.
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. Diese Änderung hat zwei Vorteile:
<img loading=lazy>
ähnelt eher dem von JavaScript-Lazy Loading-Bibliotheken.- Die neuen Grenzwerte für die Entfernung zum Darstellungsbereich bedeuten weiterhin, dass die Bilder wahrscheinlich noch zu dem Zeitpunkt geladen sind, zu dem der Nutzer zu ihnen gescrollt hat.
Unten finden Sie einen Vergleich zwischen den alten und den neuen Grenzwerten für die Entfernung vom Darstellungsbereich in einer unserer Demos mit einer schnellen Verbindung (4G):
Alte und neue Grenzwerte im Vergleich:
<ph type="x-smartling-placeholder">![Die neuen und verbesserten Grenzwerte für Lazy Loading für Bilder, mit denen die Grenzwerte für die Entfernung vom Darstellungsbereich für schnelle Verbindungen von 3.000 Pixeln auf 1.250 Pixel reduziert werden.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-and-improved-thresho-a20c669983f73.png?authuser=6&hl=de)
und die neuen Grenzwerte im Vergleich zu LazySizes (einer beliebten JavaScript-Lazy Loading-Bibliothek):
<ph type="x-smartling-placeholder">![Die neuen Grenzwerte für den Abstand vom Darstellungsbereich in Chrome, bei denen 90 KB an Bildern geladen werden, im Vergleich zu LazySizes, die unter denselben Netzwerkbedingungen in 70 KB geladen werden](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-distance-viewport-b99ee22471f28.png?authuser=6&hl=de)
Bildgrößenattribute zuweisen
Während der Browser ein Bild lädt, erkennt er nicht sofort,
Dimensionen enthalten, es sei denn, sie werden explizit angegeben. Damit der Browser
auf einer Seite genügend Platz für Bilder bieten und störende Layoutverschiebungen,
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 deren Werte direkt in einem Inline-Style 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 von
Dabei spielt es keine Rolle, ob Sie Lazy Loading einsetzen.
Durch die Implementierung von Lazy Loading in Chromium wird die Wahrscheinlichkeit von Bildern erhöht
geladen werden, sobald sie sichtbar sind. Es kann jedoch trotzdem vorkommen,
laden sie nicht zur richtigen Zeit. In diesem Fall sollten Sie width
und
height
auf Ihren Bildern erhöht den Einfluss auf Cumulative Layout Shift. Wenn
können Sie keine Bilder angeben. Durch Lazy Loading können
Sie Ihre Netzwerkdaten sparen.
Ressourcen, bei denen das Risiko dieser erhöhten Layoutverschiebungen besteht.
In den meisten Fällen wird für Bilder weiterhin Lazy Loading verwendet, wenn Sie keine Abmessungen angeben.
gibt es einige Grenzfälle,
die Sie kennen sollten. Ohne width
und height
festgelegt ist, werden die Bildabmessungen standardmäßig auf 0 × 0 Pixel festgelegt. Wenn Sie eine Galerie mit
kann der Browser festlegen, dass alle
in den Darstellungsbereich passen,
da jedes Bild keinen Platz einnimmt und kein Bild aus dem Bildschirm verschoben wird. In
In diesem Fall beschließt der Browser, alles zu laden, was dazu führt, dass die Seite häufiger geladen wird.
langsam.
Ein Beispiel dafür, wie loading
mit einer großen Anzahl von Bildern funktioniert, finden Sie unter
finden Sie in dieser Demo.
Sie können Bilder, die Sie mit dem Element <picture>
definiert haben, auch per Lazy Loading 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 den <source>
geladen wird.
-Elemente, müssen Sie nur loading
zum Fallback-Element <img>
hinzufügen.
Bilder, die im ersten Darstellungsbereich sichtbar sind, immer direkt laden
Für Bilder, die sichtbar sind, wenn der Nutzer die Seite zum ersten Mal lädt, und vor allem für LCP-Bilder den standardmäßigen Eager Loading des Browsers verwenden, damit sie . 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 anfänglichen Darstellungsbereichs. Der Browser
Ein Bild kann erst dann per Lazy Loading geladen werden, wenn bekannt ist, wo es auf der Seite platziert werden soll.
wodurch sie langsamer geladen werden.
<!-- 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 es. Sie erhalten nicht
Vorteile des Lazy Loadings, hat aber keine negativen Auswirkungen.
FAQ
Kann ich in Chrome automatisch Lazy Loading für Bilder verwenden?
Bisher hat Chromium alle Bilder, die gut geeignet waren, automatisch per Lazy Loading geladen.
wird im Lite-Modus zurückgestellt.
wurde in Chrome für Android aktiviert und das Attribut loading
war entweder nicht
angegeben oder auf loading="auto"
festgelegt. Sie können jedoch
Lite-Modus und loading="auto"
wurden eingestellt
Es ist nicht geplant, in Chrome automatisch Lazy Loading für Bilder bereitzustellen.
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 kann sich in Zukunft ändern, da Browser mit anderen Schwellenwerten und Variablen zu verstehen.
Kann das Attribut loading
für CSS-Hintergrundbilder verwendet werden?
Nein, Sie können es 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, aber innerhalb der berechneten Entfernung liegen.
Diese Bilder können sich hinter einem Karussell befinden oder für bestimmte Bildschirme durch CSS ausgeblendet werden
Größen. So werden beispielsweise in Chrome, Safari und Firefox keine Bilder mit
display: none;
-Stil, entweder für das Bildelement oder ein übergeordnetes Element
-Elements. Andere Techniken zum Ausblenden von Bildern, z. B. opacity:0
immer noch das Bild im Browser lädt. Testen Sie immer
um sicherzustellen, dass alles wie gewünscht funktioniert.
In Chrome 121 wurde das Verhalten für horizontal scrollende Bilder wie Karussells geändert. Dabei gelten jetzt dieselben Grenzwerte wie beim vertikalen Scrollen. 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 auffällt, allerdings auf Kosten von mehr Downloads. Mithilfe der Demo zum horizontalen Lazy Loading können Sie das Verhalten von Chrome mit Safari und Firefox vergleichen.
Was ist, wenn ich bereits eine Drittanbieterbibliothek oder ein Skript für das Lazy Loading von Bildern verwende?
Da in modernen Browsern Lazy Loading bereits integriert ist, Sie brauchen eine Bibliothek oder ein Skript eines Drittanbieters, um Bilder per Lazy Loading zu laden.
Ein Grund, die Bibliothek eines Drittanbieters zusammen mit loading="lazy"
zu verwenden
ist die Bereitstellung eines Polyfills für Browser, die das Attribut nicht unterstützen, oder
haben mehr Kontrolle darüber,
wann Lazy Loading ausgelöst wird.
Wie gehe ich mit Browsern um, die Lazy Loading nicht unterstützen?
Erstelle einen Polyfill oder verwende die Bibliothek eines Drittanbieters, um Lazy Loading für Bilder auf deiner Website zu nutzen.
Mit dem Attribut loading
können Sie ermitteln, ob ein Browser den
Funktion:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
Lazysizes ist beispielsweise ein beliebter
JavaScript-Lazy Loading-Bibliothek. Sie erkennen, dass loading
unterstützt wird
Attribut, um Lazysizes nur dann als Fallback-Bibliothek zu laden, wenn loading
nicht
unterstützt. Das funktioniert so:
- Ersetzen Sie
<img src>
durch<img data-src>
, um ein starkes Laden in zu vermeiden. Browser nicht unterstützt werden. Wenn das Attributloading
unterstützt wird, tauschedata-src
fürsrc
. - Wenn
loading
nicht unterstützt wird, laden Sie ein Fallback aus Lazysizes und initiieren Sie und verwenden Sie die Klasselazyload
, um anzugeben, für welche Bilder Lazy Loading verwendet werden soll:
<!-- 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 der 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?
Unterstützte Browser
- 77
- 79
- 121
- 16.4
<iframe loading=lazy>
wurde ebenfalls standardisiert. Damit können Sie iFrames mithilfe der loading
per Lazy Loading laden.
. Weitere Informationen
Wie wirkt sich Lazy Loading auf Browserebene auf Werbung auf einer Webseite aus?
Alle Anzeigen, die Nutzern wie andere Bilder oder iFrames per Lazy Loading angezeigt werden Bild oder iFrame.
Wie werden Bilder gedruckt, wenn eine Webseite gedruckt wird?
Alle Bilder und iFrames werden sofort geladen, wenn die Seite gedruckt wird. Weitere Informationen finden Sie unter issue #875403.
Erkennt Lighthouse Lazy Loading auf Browserebene?
Lighthouse 6.0 und höher für Lazy Loading von Bildern mit unterschiedlichen Schwellenwerten, und sie die Prüfung von nicht sichtbaren Images verschieben.
Lazy Loading von Bildern zur Leistungssteigerung
Die Browserunterstützung für Lazy Loading von Bildern kann Ihnen die Arbeit erheblich erleichtern. um die Leistung Ihrer Seiten die Leistung.
Bemerken Sie ungewöhnliches Verhalten bei der Aktivierung dieser Funktion in Chrome? Melden Sie den Fehler.