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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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:

<ph type="x-smartling-placeholder">

</ph>

Lazy-Loading-Bilder werden geladen, während der Nutzer durch die Seite scrollt.

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- oder orientationchange-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 Darstellungsbereich
• eager: 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 automatisch loading="lazy" hinzufügt, wenn keine expliziten Wert oder wenn sich der Linter beschwert, wenn er nicht explizit festgelegt wurde.

Achtung :Kein Lazy Loading. Bilder, die beim Laden der Seite wahrscheinlich im Darstellungsbereich zu sehen sind, insbesondere LCP-Images.

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.

Hinweis :Tests in Chrome für Android deuten darauf hin, dass bei 4G 97,5% des Lazy-Loading-Modells erforderlich sind. Bilder wurden innerhalb von 10 ms, nachdem sie sichtbar waren, vollständig geladen. Auch bei langsamem 2G Netzwerken wurden 92, 6% der Lazy-Loading-Bilder innerhalb von 10 ms vollständig geladen. Das bedeutet, Das Lazy Loading auf Browserebene sorgt für eine stabile Bildsichtbarkeit.

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

</ph>

Vergleich der älteren und neueren Grenzwerte für natives Lazy Loading.

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

<ph type="x-smartling-placeholder">

</ph>

Vergleich der Grenzwerte für Lazy Loading in Chrome und LazySizes.

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 Attribut loading unterstützt wird, tausche data-src für src.
• Wenn loading nicht unterstützt wird, laden Sie ein Fallback aus Lazysizes und initiieren Sie und verwenden Sie die Klasse lazyload, 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.

Hinweis: Die Lazysize-Bibliothek bietet auch eine Plug-in wird geladen das Lazy Loading auf Browserebene verwendet (sofern verfügbar), an das benutzerdefinierte Verhalten der Bibliothek anpassen.

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.