Best Practices für Lazy Loading

Jeremy Wagner

Rachel Andrew

Lazy Loading für Bilder und Videos hat eine positive und messbare Leistung nicht auf die leichte Schulter zu nehmen. Wenn Sie eine falsche Angabe machen, unbeabsichtigte Folgen haben. Daher ist es wichtig, Bedenken bedenken.

„Mind the fold“

Es mag verlockend sein, jede einzelne Medienressource auf der Seite per Lazy Loading JavaScript, aber Sie müssen dieser Versuchung widerstehen. Alles, was sich oberhalb des sollte kein Lazy-Loading sein. Solche Ressourcen sollten als und sollten daher normal geladen werden.

Lazy Loading verzögert das Laden von Ressourcen, bis das DOM interaktiv ist wenn die Skripts geladen wurden und mit der Ausführung begonnen haben. Für Bilder unterhalb der ist das kein Problem, doch wichtige Ressourcen sollten nur mit Scrollen sichtbar sein, das Standardelement <img>, damit sie so schnell wie möglich angezeigt werden.

Natürlich ist es heutzutage nicht so klar, wo der Falz liegt, Bildschirmen unterschiedlicher Größe angesehen werden können. Was bei einem Laptop „above the fold“ liegt auf Mobilgeräten unterhalb liegen. Es gibt keine eindeutigen Ratschläge für und dies in jeder Situation optimal angehen zu können. Sie müssen eine der kritischen Assets Ihrer Seite und laden Sie diese Bilder Mode.

Außerdem sollten Sie die Faltlinie nicht so genau festlegen, Grenzwert zum Auslösen des Lazy Loadings. Unter Umständen ist es für Ihre Zwecke, Legen Sie eine Pufferzone in einem Abstand unterhalb des Falzbereichs fest, damit die Bilder beginnen. lange bevor der Nutzer sie in den Darstellungsbereich scrollt. Beispiel: Der Parameter Mit der Intersection Observer API können Sie die Eigenschaft rootMargin in einer Optionsobjekt, wenn Sie eine neue IntersectionObserver-Instanz erstellen. Dieses Elemente effektiv einen Puffer ein, der Lazy Loading-Verhalten auslöst, sich das Element im Darstellungsbereich befindet:

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

Wenn der Wert für rootMargin den Werten ähnelt, die Sie für ein CSS angeben würden margin, weil das so ist. In diesem Fall unterer Rand des beobachteten Elements (standardmäßig der Darstellungsbereich des Browsers, aber Dies kann mit der Eigenschaft root in ein bestimmtes Element geändert werden) wird um 256 erweitert. Pixel. Das bedeutet, dass die Callback-Funktion ausgeführt wird, wenn ein Bildelement 256 Pixel vom Darstellungsbereich entfernt liegen, und das Bild beginnt zu laden. bevor der Nutzer sie sieht.

Um denselben Effekt in Browsern zu erzielen, die Intersection Observe nicht unterstützen, verwenden Sie Code für die Verarbeitung von Scroll-Ereignissen und passen Sie getBoundingClientRect aktivieren Sie diese Option, um einen Puffer einzubeziehen.

Layout Shifts und Platzhalter

Lazy Loading von Medien kann zu Verschiebungen im Layout führen, wenn keine Platzhalter verwendet werden. Diese Änderungen können für Nutzer verwirrend sein und ein teures DOM-Layout auslösen Vorgänge, die Systemressourcen verbrauchen und zu Verzögerungen beitragen. Es sollten mindestens sollten Sie einen Platzhalter für eine Volltonfarbe verwenden, Zielbild oder Techniken wie LQIP oder SQIP mit Hinweis auf den Inhalt eines Mediums bevor es geladen wird.

Bei <img>-Tags sollte src anfangs auf einen Platzhalter verweisen, bis wird mit der finalen Bild-URL aktualisiert. Verwenden Sie das Attribut poster in einer <video>-Element, um auf ein Platzhalterbild zu verweisen. Verwenden Sie außerdem width und height-Attribute sowohl für <img>- als auch für <video>-Tags. Dadurch wird sichergestellt, Der Wechsel von Platzhaltern zu endgültigen Bildern ändert die gerenderte Größe nicht des Elements beim Laden der Medien.

Verzögerungen bei der Bilddecodierung

Wenn Sie große Bilder in JavaScript laden und in das DOM einfügen, kann dadurch das Hauptthreads, wodurch die Benutzeroberfläche kurzzeitig nicht reagiert. Zeit während der Decodierung stattfindet. Asynchrones Decodieren von Bildern mit dem decode vor dem Einfügen in das DOM können diese Art von Verzögerung verringert werden. Achtung: Diese Funktion ist noch nicht überall verfügbar und macht die Lazy Loading-Logik komplexer. Wenn Sie es verwenden möchten, müssen Sie danach suchen. Sendungen unten wie Sie Image.decode() mit einem Fallback verwenden können:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

Über diesen CodePen-Link Code, der diesem Beispiel in Aktion ähnelt. Wenn die meisten Bilder relativ klein sind, Das bringt Ihnen zwar nicht viel, kann aber sicherlich Verzögerungen reduzieren, und das Einfügen großer Bilder in das DOM.

Wenn etwas nicht geladen wird

Manchmal werden Medienressourcen aus einem bestimmten Grund nicht geladen und es treten Fehler auf. auftreten. Wann könnte das passieren? Das kommt darauf an, aber hier ist ein hypothetisches Szenario. für Sie: Sie haben für einen kurzen Zeitraum eine Richtlinie für das HTML-Caching (z.B. fünf Minuten) und der Nutzer die Website besucht oder er einen veralteten Tab geöffnet hat, nach einem langen Zeitraum (z.B. mehreren Stunden) und kehrt zurück, um Ihre Inhalte zu lesen. An einem bestimmten Punkt dieses Prozesses findet eine erneute Bereitstellung statt. Während dieser Bereitstellung Namensänderungen der Image-Ressource aufgrund von hashbasierter Versionierung oder werden entfernt gesprochen. Wenn der Nutzer das Bild per Lazy Loading lädt, nicht verfügbar und schlägt daher fehl.

Auch wenn dies relativ selten der Fall ist, kann es nötig sein, dass Sie eine Sicherung haben. falls Lazy Loading fehlschlägt. Bei Bildern sieht eine solche Lösung etwa so aus: dies:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

Was Sie im Falle eines Fehlers tun, hängt von Ihrer Anwendung ab. Für Sie können den Bildplatzhalterbereich beispielsweise durch eine Schaltfläche ersetzen, mit der wenn der Nutzer versucht, das Bild erneut zu laden, oder eine Fehlermeldung anzuzeigen. in den Platzhalterbereich ein.

Es können aber auch andere Szenarien eintreten. Was auch immer Sie tun, es ist nie eine schlechte Idee, dem Nutzer signalisieren, wenn ein Fehler aufgetreten ist, und ihm möglicherweise eine Aktion wenn etwas schiefgeht.

Verfügbarkeit von JavaScript

Es darf nicht davon ausgegangen werden, dass JavaScript immer verfügbar ist. Wenn Sie vorhaben, Du kannst Lazy Loading für Bilder verwenden. Du kannst auch <noscript>-Markup verwenden, das Bilder in falls JavaScript nicht verfügbar ist. Das einfachste Fallback-Beispiel ist Verwendung von <noscript>-Elementen zur Auslieferung von Bildern, wenn JavaScript deaktiviert ist:

Wenn JavaScript deaktiviert ist, sehen Nutzer sowohl das Platzhalterbild als auch das Bild, das in den <noscript>-Elementen enthalten ist. Um dies zu umgehen, Eine Klasse von no-js im <html>-Tag:

<html class="no-js">

Fügen Sie dann eine Zeile des Inline-Scripts vor den Stylesheets in <head> ein. werden über <link>-Tags angefordert, wodurch die Klasse no-js aus dem <html> entfernt wird. -Element, wenn JavaScript aktiviert ist:

<script>document.documentElement.classList.remove("no-js");</script>

Verwenden Sie schließlich etwas CSS, um Elemente mit der Klasse „lazy“ auszublenden, JavaScript ist nicht verfügbar:

.no-js .lazy {
  display: none;
}

Dies verhindert nicht, dass Platzhalterbilder geladen werden, aber das Ergebnis ist eher erwünscht sind. Nutzer mit deaktiviertem JavaScript erhalten mehr als nur Platzhalter Bilder, was besser ist als Platzhalter und keine aussagekräftigen Bildinhalte alle.