Diese Technik verbessert die Leistung von Webseiten, indem Bilder nur dann geladen werden, wenn sie sichtbar sind oder sich in der Nähe des Bildschirms des Benutzers befinden.

In der heutigen schnelllebigen digitalen Welt ist eine leistungsstarke Website unerlässlich. Ein entscheidender Aspekt dabei ist die Sicherstellung, dass Ihre Bilder effizient geladen werden. Benutzer erwarten ein reibungsloses und schnelles Surferlebnis. Dieser Artikel zeigt Ihnen, wie Sie dies erreichen.

Sie erkunden das Konzept des Lazy Loading von Bildern und erfahren, wie Sie es mithilfe von HTML und JavaScript mit der Intersection Observer API implementieren.

Was ist Lazy Loading?

Lazy Loading verzögert das Laden von Elementen, z. B. Bildern, bis es benötigt wird. Anstatt beim Laden einer Seite alle Bilder zu laden, werden beim verzögerten Laden nur die Bilder geladen, die derzeit sichtbar sind oder sich in der Nähe des Anzeigebereichs des Benutzers befinden. Diese Verbesserung der Website-Leistung verkürzt die anfängliche Ladezeit und spart Bandbreite.

instagram viewer

Warum Lazy Loading verwenden?

Es gibt mehrere zwingende Gründe, Lazy Loading von Bildern auf Ihrer Website zu verwenden, wie zum Beispiel:

  • Schnelleres Laden der ersten Seite: Lazy Loading verhindert, dass alle Bilder gleichzeitig geladen werden, wodurch die anfängliche Ladezeit der Seite verkürzt wird. Benutzer können früher mit Ihrer Website interagieren, was zu einem besseren Benutzererlebnis führt.
  • Verbesserte Seitenreaktionsfähigkeit: Durch das Laden von Bildern beim Scrollen der Benutzer bleibt die Website reaktionsfähig und flüssig, sodass ein reibungsloses Scrollen und Navigieren gewährleistet ist, ohne dass auf das Laden aller Inhalte gewartet werden muss.
  • Bandbreiteneinsparungen: Lazy Loading spart Bandbreite und ist daher ideal für mobile Benutzer und Benutzer mit langsamen Internetverbindungen. Das kann Reduzieren Sie den Datenverbrauch Ihrer Website, was den Benutzern zugute kommt.
  • SEO-Vorteile: Suchmaschinen wie Google Betrachten Sie die Seitengeschwindigkeit als Rankingfaktor. Lazy Loading kann wirken sich positiv auf die SEO-Leistung Ihrer Website aus durch Verbesserung der Ladezeit.

Nachdem Sie nun verstanden haben, warum Lazy Loading von Vorteil ist, wollen wir uns mit der Implementierung befassen.

Lazy Loading implementieren: Das HTML-Markup

Um zu beginnen, müssen Sie Ihren HTML-Code so ändern, dass er Folgendes enthält wird geladen="faul" Attribut auf Ihrem Stichworte.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

Der Wird geladen Das Attribut wird in HTML verwendet, um das Ladeverhalten von Elementen auf einer Webseite zu steuern. Wenn Sie einstellen wird geladen="faul" auf einen -Tag weist es den Browser an, das Laden der Ressource zu verschieben, bis sie benötigt wird.

Im Moment sieht die Seite so aus:

Lazy Loading implementieren: Die JavaScript-Implementierung

Um Ihr Lazy Loading auf die nächste Stufe zu heben, verwenden Sie die Intersection Observer API. Mit dieser API können Sie beobachten, wann ein Element in das Ansichtsfenster eintritt oder es verlässt.

Der Grund für die Verwendung des Intersection Observer zum verzögerten Laden von Bildern ist einfach: Wenn die Seite geladen wird, wird ein Bild mit geringerer Qualität abgerufen.

Sobald dieses Bild dann im Ansichtsfenster sichtbar wird, tauscht JavaScript es gegen die Version mit höherer Qualität aus. Um dies in die Praxis umzusetzen, ändern Sie Ihren HTML-Code.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Hier ist die primäre Bildquelle die Version mit niedriger Qualität und das Bild mit hoher Qualität die sekundäre Quelle. Die Seite sieht dann so aus:

Wählen Sie als Nächstes alle Bilder aus, die Sie verzögert laden möchten:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Erstellen Sie anschließend eine IntersectionObserver Objekt.

const observer = new IntersectionObserver();

Übergeben Sie dann die Einträge (ein Array von IntersectionObserverEntry Objekte, die die beobachteten Elemente und ihren Schnittpunkt mit dem Ansichtsfenster darstellen) und Beobachter (die IntersectionObserver Instanz selbst).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Überprüfen Sie als Nächstes, ob sich das Element überschneidet, und tauschen Sie das Bild mit niedriger Qualität gegen ein Bild mit hoher Qualität aus.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Abschließend initialisieren Sie die Beobachtung für jedes Element.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Und damit haben Sie Lazy Loading mit JavaScript implementiert.

Überlegungen zum verzögerten Laden

Bei der Integration von Lazy Loading ist es wichtig, die folgenden Aspekte zu berücksichtigen:

  • Barrierefreiheit: Um die Barrierefreiheit zu gewährleisten, stellen Sie alternativen Text für Bilder mit bereit alt Attribut. Diese Informationen dienen als Anhaltspunkt für Screenreader.
  • Browser-Kompatibilität: Überprüfen Sie vor der Implementierung von Lazy Loading die Kompatibilität mit verschiedenen Browsern. Nicht alle Browser unterstützen diese Funktion. In bestimmten Fällen kann die Einbindung eines Polyfills zwingend erforderlich sein, insbesondere bei älteren Browsern. Ein Werkzeug wie Kann ich benutzen ist eine wertvolle Ressource zur Bewertung der Browserkompatibilität.
  • Testen: Das umfassende Testen der Lazy-Loading-Implementierung über ein Spektrum von Geräten und Bildschirmdimensionen hinweg ist von größter Bedeutung.

Verbesserung der Website-Geschwindigkeit und Benutzererfahrung

Wenn Sie Lazy Loading für Bilder auf Ihrer Website integrieren, können Sie Ihre Website beschleunigen und das Benutzererlebnis verbessern. Benutzer wünschen sich eine schnellere Ladezeit und ein reibungsloseres Surferlebnis, und diese Technik liefert dasselbe.

Darüber hinaus profitieren Sie von einer besseren SEO und sparen Bandbreitenverbrauch. Warum also warten? Beginnen Sie noch heute mit der Optimierung Ihrer Website mit dieser einfachen, aber leistungsstarken Methode.