Lazy Loading für Bilder

Jeremy Wagner
Rachel Andrew

Bilder können auf einer Webseite angezeigt werden, weil sie im HTML-Code als <img>-Elemente eingebettet sind oder als CSS-Hintergrundbilder. In diesem Beitrag erfahren Sie, wie Sie beide Bildtypen per Lazy Loading laden.

Inline-Bilder

Die häufigsten Kandidaten für Lazy Loading sind Bilder, die in <img>-Elementen verwendet werden. Für Inline-Bilder gibt es drei Optionen für Lazy Loading. die zusammen verwendet werden können, um die beste Browserkompatibilität zu erzielen:

Lazy Loading auf Browserebene verwenden

Sowohl Chrome als auch Firefox unterstützen Lazy Loading mit dem Attribut loading. Dieses Attribut kann <img>- und <iframe>-Elementen hinzugefügt werden. Der Wert lazy weist den Browser an, das Bild sofort zu laden, wenn es sich im Darstellungsbereich befindet. und andere Bilder abrufen, wenn der Nutzer in der Nähe scrollt.

Siehe das Feld loading der MDNs Browserkompatibilität . Wenn der Browser Lazy Loading nicht unterstützt, wird das Attribut ignoriert und die Bilder werden wie gewohnt sofort geladen.

Bei den meisten Websites verbessert das Hinzufügen dieses Attributs zu Inline-Bildern die Leistung und speichern Bilder, zu denen Nutzer möglicherweise gar nicht scrollen. Wenn Sie eine große Anzahl von Bildern haben und sicherstellen möchten, dass Nutzer von Browsern ohne Unterstützung für Lazy Loading von Vorteil sind müssen Sie dies mit einer der nachfolgend erläuterten Methoden kombinieren.

Weitere Informationen finden Sie unter Lazy Loading für das Web auf Browserebene.

Intersection Observer verwenden

Zum Polyfill-Lazy Loading von <img>-Elementen verwenden wir JavaScript, um zu prüfen, ob sie sich im Darstellungsbereich. Ist dies der Fall, lauten ihre src-Attribute (und manchmal auch srcset-Attribute) mit den URLs zum gewünschten Bildinhalt gefüllt.

Wenn Sie bereits Lazy Loading-Code geschrieben haben, haben Sie Ihre Aufgabe möglicherweise mithilfe von Event-Handlern wie scroll oder resize. Dieser Ansatz ist zwar Browser sind am besten kompatibel. Moderne Browser bieten ein leistungsstärkeres die Sichtbarkeit von Elementen mithilfe der Funktion Intersection Observer API.

Intersection Observer ist einfacher zu bedienen und zu lesen als Code, der auf verschiedenen da Sie nur einen Beobachter registrieren müssen, anstatt lästigen Code zur Erkennung der Elementsichtbarkeit zu schreiben. Alle müssen Sie noch entscheiden, was geschehen soll, wenn ein Element sichtbar ist. Nehmen wir dieses grundlegende Markup-Muster für deine verzögert geladenen <img>-Elemente an:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

Es gibt drei relevante Teile dieses Markups, auf die Sie sich konzentrieren sollten:

  1. Das Attribut class, mit dem Sie das Element in JavaScript
  2. Das Attribut src, das auf ein Platzhalterbild verweist, das erscheint, wenn wenn die Seite geladen wird.
  3. Die Attribute data-src und data-srcset, bei denen es sich um Platzhalterattribute handelt mit der URL für das Bild, das geladen wird, sobald sich das Element im Darstellungsbereich befindet.

Sehen wir uns nun an, wie Sie Intersection Observer in JavaScript verwenden können, um Lazy Loading Bilder mit diesem Markup-Muster:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

Im DOMContentLoaded-Ereignis des Dokuments fragt dieses Skript das DOM für alle <img>-Elemente mit der Klasse lazy. Wenn Intersection Observer verfügbar ist, Erstellen Sie einen neuen Beobachter, der einen Callback ausführt, wenn img.lazy-Elemente den Darstellungsbereich.

Intersection Observer ist in allen modernen Browsern verfügbar. Wenn du es daher als Polyfill für loading="lazy" verwendest, ist für die meisten Besucher Lazy Loading verfügbar.

Bilder in CSS

<img>-Tags sind zwar die gebräuchlichste Methode, um Bilder auf Webseiten zu verwenden, kann auch über den CSS-Code background-image und anderen Properties. Lazy Loading auf Browserebene gilt nicht für CSS-Hintergrundbilder. Daher müssen Sie andere Methoden in Betracht ziehen, wenn Sie Hintergrundbilder zum Lazy Loading haben.

Im Gegensatz zu <img>-Elementen, die unabhängig vom beim Laden von Bildern in CSS Spekulationen. Wenn das Dokument und das CSS-Objekt Modelle und rendern Baum überprüft der Browser, wie CSS auf ein Dokument angewendet wird, externe Ressourcen anfordern. Wenn der Browser eine CSS-Regel festgelegt hat der eine externe Ressource betrifft, gilt nicht für das Dokument, da es erstellt haben, fordert der Browser sie nicht an.

Dieses spekulative Verhalten kann verwendet werden, um das Laden von Bildern in CSS zu verzögern. Sie verwenden JavaScript, um zu bestimmen, wann sich ein Element im Darstellungsbereich befindet, und anschließend eine Klasse auf dieses Element an, die Stile zum Aufrufen einer Hintergrundbild. Dadurch wird das Bild zum Zeitpunkt der Anforderung heruntergeladen. statt beim anfänglichen Ladevorgang. Nehmen wir als Beispiel ein Element, das ein Großes Hintergrundbild für Hero:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

Das div.lazy-background-Element enthält normalerweise den Hero-Hintergrund von einem CSS-Code aufgerufen wird. In diesem Beispiel für Lazy Loading Die Eigenschaft background-image des div.lazy-background-Elements über visible -Klasse, die dem Element hinzugefügt wird, wenn es sich im Darstellungsbereich befindet:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

Verwenden Sie nun JavaScript, um zu überprüfen, ob sich das Element im Darstellungsbereich befindet (mit Intersection Observer!) und fügen Sie die visible-Klasse zur div.lazy-background-Element, mit dem das Bild geladen wird:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

Auswirkungen auf Largest Contentful Paint (LCP)

Lazy Loading ist eine hervorragende Optimierung, die sowohl die Datennutzung insgesamt als auch die Netzwerkkonflikte während des Starts reduziert, indem das Laden der Bilder auf den Zeitpunkt verschoben wird, an dem sie tatsächlich benötigt werden. Dies kann die Startzeit verbessern und die Verarbeitung im Hauptthread reduzieren, da die Zeit für die Bilddecodierung reduziert wird.

Das Lazy Loading ist jedoch eine Technik, die sich negativ auf den Largest Contentful Paint-LCP Ihrer Website auswirken kann, wenn Sie die Methode zu sehr interessiert. Sie sollten vermeiden, Lazy Loading für Bilder zu verwenden, die sich beim Start im Darstellungsbereich befinden.

Wenn Sie JavaScript-basierte Lazy Loader verwenden, sollten Sie Lazy Loading für Bilder im Darstellungsbereich vermeiden, da bei diesen Lösungen häufig ein data-src- oder data-srcset-Attribut als Platzhalter für die Attribute src und srcset verwendet wird. Das Problem ist hier, dass sich das Laden dieser Bilder verzögert, da der Scanner zum Vorabladen des Browsers sie beim Start nicht finden kann.

Selbst wenn Sie Lazy Loading auf Browserebene für das Lazy Loading von Bildern im Darstellungsbereich verwenden, kann dies nach hinten ausgelöst werden. Wenn loading="lazy" auf ein Bild im Darstellungsbereich angewendet wird, wird dieses Bild verzögert angezeigt, bis der Browser sicher ist, dass es sich im Darstellungsbereich befindet. Dies kann sich auf den LCP einer Seite auswirken.

Bilder, die beim Start im Darstellungsbereich sichtbar sind, sollte nie per Lazy Loading geladen werden. Dieses Muster kann sich negativ auf den LCP und damit die Nutzererfahrung auswirken. Wenn Sie ein Image beim Start benötigen, laden Sie es so schnell wie möglich, indem Sie kein Lazy Loading verwenden.

Lazy Loading von Bibliotheken

Nach Möglichkeit sollten Sie Lazy Loading auf Browserebene verwenden. Wenn dies jedoch nicht möglich ist, weil z. B. eine beträchtliche Gruppe von Nutzern immer noch ältere Browser nutzt, können Sie die folgenden Bibliotheken zum Lazy Loading von Bildern verwenden:

  • lazysizes bietet viele Funktionen für Lazy. die Bilder und iFrames per Lazy Loading lädt. Das verwendete Muster ist ziemlich ähnlich wie die hier gezeigten Codebeispiele, da sie automatisch an ein lazyload-Klasse für <img>-Elemente. Sie müssen Bild-URLs in data-src- und/oder data-srcset-Attribute, deren Inhalte vertauscht werden in src- und/oder srcset-Attribute. Es wird Intersection verwendet. Observer (mit Polyfill) und mit einer Reihe von Plug-ins hinzu, um zum Beispiel Lazy Loading für Videos. Weitere Informationen zur Verwendung von Lazysize
  • vanilla-lazyload ist ein für Lazy Loading Bilder, Hintergrundbilder, Videos, iFrames und Skripte. Es nutzt Intersection Observer, unterstützt responsive Bilder und aktiviert Lazy Loading auf Browserebene.
  • lozad.js ist eine weitere einfache die nur Intersection Observer verwendet. Daher ist es sehr leistungsfähig, müssen aber mit Polyfill nachgerüstet sein, damit sie in älteren Browsern verwendet werden können.
  • Wenn Sie eine React-spezifische Lazy Loading-Bibliothek benötigen, react-lazyload. Während es und zwar nicht Intersection Observer, sondern dafür, mit React Bilder für diejenigen zu laden, die gewöhnt sind, Anwendungen zu entwickeln.