The Complete Guide to Lazy Loading Bilder

0
39

Bilder sind kritisch. Ob es marketing-Banner, Produkt-Bilder oder logos, es ist unmöglich, sich eine website ohne Bilder. Leider aber, Bilder sind oft große Dateien, wodurch Sie der größte Beitrag auf die Seite aufblähen. Nach der HTTP-Archiv der State-of-Bilder berichten, die Mediane Größe der Seite auf dem Desktop ist 1511 KB und Bilder machen fast 45% (650 KB) dieser Summe.

Das heißt, es ist nicht so, dass wir einfach tun, Weg mit den Bildern. Sie sind zu wichtig, um die Allgemeine Benutzerfreundlichkeit. Stattdessen müssen wir uns auf unsere web-Seiten laden wirklich schnell mit Ihnen. In diesem Handbuch werden wir alle die ins und outs der faul laden von Bildern, eine Technik, die hilft, verbessern die Zeit, die für eine web-Seite geladen werden, indem das zurückstellen Bild geladen, bis Sie gebraucht werden.

Bevor wir Tauchen rechts in, hier ist ein video Beispiel, das veranschaulicht das Konzept. Kurz gesagt, ein graues Platzhalter-box gerendert wird, auf die Seite, bis es Schriftrollen, die in den Blick, an welcher Stelle das eigentliche Bild wird anstelle der box.

Kapitel 1: Was ist Lazy Loading?

Wir haben oft assoziieren das Wort “faul” mit der Vermeidung so lange wie möglich arbeiten, oder die schiere Akt des Wollens zu tun, gar nichts.

Ähnlich, lazy loading verzögert das laden von Ressourcen, auf die Seite, solange Sie nicht benötigt werden. Anstatt Sie zu laden auf Anhieb, das ist, was normalerweise passiert, wir laden Sie später.

Lazy Loading ist eine Reihe von Techniken im web-und Applikations-Entwicklung, verzögert das laden der Ressourcen auf einer Seite zu einem späteren Zeitpunkt—wenn die Ressourcen tatsächlich benötigt werden, anstatt Sie zu laden vorne. Diese Techniken helfen bei der Verbesserung der performance, bessere Auslastung der Ressourcen und die Senkung der damit verbundenen Kosten.

Die Technik des lazy loading angewendet werden können, um gerade über jede mögliche Ressourcen auf einer Seite. Zum Beispiel, auch eine JavaScript-Datei, können zurückgehalten werden, wenn es am besten ist Sie nicht, laden Sie es zunächst. Gleichen deal für ein Bild laden, wenn wir es brauchen.

Halten wir uns an die lazy-laden von Bildern in dieser Anleitung, aber es ist gut zu wissen, es kann angewendet werden, um andere Vermögenswerte.

Kapitel 2: Warum Lazy Load?

Wenn der Benutzer nie scrollt bis zu dem Punkt die Seite, die das Bild enthält, dann wird der Benutzer nie sehen, dass Bild. Es auch niemals Lasten in den ersten Platz, weil, hey, es war nie notwendig.

Können Sie schon beginnen zu sehen, wie dieser nutzen für Sie und die user. Hier sind zwei der Vorteile, die wir bekommen, mit lazy loading.

Performance-Gewinne

Der offensichtliche Vorteil ist, dass wir kleinere web-Seiten, die schneller geladen werden. Lazy loading reduziert die Anzahl der Bilder, die geladen werden müssen, auf einer Seite vorne. Weniger Bild-Anforderungen bedeuten weniger bytes herunterzuladen. Und weniger bytes zu laden bedeutet, die Seite wird schneller gerendert, als wenn diese bytes und Anfragen wurden getätigt.

Dadurch wird sichergestellt, dass jedes Gerät in jedem Netzwerk ist in der Lage, herunterladen und verarbeiten der verbleibenden Ressourcen viel schneller. Also, die Zeit von der Anfrage zum Rendern wird kleiner und die Seite wird nutzbare viel früher. Win-Win!

Kostenreduzierung

Der zweite Vorteil ist für Sie als website-administrator. Cloud-hosting-Diensten wie Content Delivery Networks (CDNs) oder web-Server oder Speicher, bereitstellen von Bildern (oder jeden Vermögenswert für diese Angelegenheit) zu einem Preis basierend auf der Anzahl der übertragenen bytes. Ein lazy geladene Bild wird nie geladen, wenn der Benutzer nie erreicht. So können Sie reduzieren die Gesamtanzahl der bytes auf der Seite und letztlich sparen Sie sich ein paar Pfennige in den Prozess. Dies gilt insbesondere für Anwender, die sofort hüpfen von einer Seite oder interagieren nur mit dem oberen Teil der Inhalte.

Die Reduktion im übertragenen bytes von deiner delivery network oder server reduziert die Versandkosten. Dies wird offensichtlicher werden, während wir untersuchen, lazy loading, die in den kommenden Abschnitten.

Nur wie viel werden Sie sparen? Finden Sie heraus, welche Bilder ein Kandidat für lazy loading und wie viele bytes ein, die Sie speichern können, auf das erstmalige laden der Seite mit Hilfe der Google-Leuchtturm-audit-tool. Dies hat einen speziellen Abschnitt für die offscreen-Bilder. Sie können auch ImageKit website analyzer, um zu identifizieren, wenn Ihre website nutzt lazy loading oder nicht, abgesehen von anderen wichtigen image-bezogene Optimierungen auf Ihrer Seite.

Lazy loading ist von entscheidender Bedeutung nicht nur gute Leistung, sondern auch liefern eine gute user experience. Da die Kombination von performance und user experience mit lazy loading ist wichtig und anspruchsvoll sind, werden wir uns weiterhin um dieses Thema wird in mehr detail in diesem Handbuch, nachdem wir geschaut haben, auf verschiedenen wegen zu faul laden von Bildern.

Kapitel 3: Lazy Loading-Techniken für Bilder

Es gibt zwei übliche Wege, die wir laden Bilder auf eine Seite: das <img> – Tags und der CSS-Eigenschaft background-image. Wir werden zunächst einen Blick auf die häufiger von den beiden, die <img> – tag und dann bewegen, um CSS-hintergrund-Bilder.

Lazy loading Bilder in einem image-tag

Beginnen wir mit dem typischen HTML-markup für ein Bild:

<img src=”/path/to/some/image.jpg” />

Das markup für faule laden von Bildern ist ziemlich ähnlich.

Schritt eins ist, um zu verhindern, dass das Bild laden vorne. Der browser verwendet das src-Attribut des-Tags zum auslösen des Bildes zu laden. Es spielt keine Rolle, ob es das erste oder das 1.000-th image in den HTML-Code. Wenn der browser erhält das src-Attribut, es auslösen wird das Bild heruntergeladen werden, unabhängig davon, ob es sich innerhalb oder außerhalb der aktuellen Ansicht.

Zum verschieben der Last, legen Sie die Bild-URL in einem anderen Attribut als src. Sagen wir, wir geben Sie die Bild-URL aus dem data-src-Attribut des image-tag. Nun, die src ist leer und der browser wird nicht ausgelöst das Bild laden:

<img data-src=”https://ik.imagekit.io/demo/default-image.jpg” />

Jetzt, da wir verhindern, das Bild vom laden, müssen wir dem browser mitteilen, wenn es zu laden. Ansonsten, es wird nie passieren. Für diese, überprüfen wir, dass, sobald ein Bild (Platzhalter) in das Ansichtsfenster, die wir auslösen der Last.

Es gibt zwei Möglichkeiten, um zu überprüfen, wenn ein Bild tritt in den viewport. Schauen wir uns die beiden von Ihnen arbeiten mit code-Beispielen.

Methode 1: führen Sie das Bild laden mit Javascript-Ereignisse

Diese Technik verwendet Ereignis-Listener für das scroll, resize und orientationChange-events im browser. Das scroll-Ereignis ist ziemlich eindeutig, weil es Uhren, wo sich der Benutzer auf einer Seite scrollen. Die Größe und orientationChange-Veranstaltungen sind gleichermaßen wichtig. Das resize-Ereignis tritt auf, wenn die Größe des Browserfensters ändert, in der Erwägung, dass orientationChange-wird ausgelöst, wenn das Gerät gedreht, von quer-auf hochformat oder Umgekehrt.

Wir können diese drei Ereignisse zu erkennen, die eine änderung in den Bildschirm und bestimmen Sie die Anzahl der Bilder, die sichtbar auf dem Bildschirm, und lösen Sie Sie zum laden entsprechend.

Wenn eines dieser Ereignisse auftreten, finden wir alle die Bilder auf der Seite, die verschoben werden, und aus diesen Bildern werden wir prüfen, welche zurzeit in den viewport. Dies erfolgt über ein Bild-top-offset des aktuellen Dokuments top-position, und die Fenster der Höhe. Wenn Sie ein Bild in das Ansichtsfenster, wählen wir die URL aus dem data-src-Attribut und verschieben Sie Sie in das src-Attribut und das Bild geladen werden, die als Ergebnis.

Beachten Sie, dass wir bitten Sie JavaScript, um Bilder zu wählen, die eine lazy-Klasse. Sobald das Bild geladen wurde, entfernen wir die Klasse, da es nicht mehr benötigt, um ein Ereignis auszulösen. Und, sobald alle Bilder geladen sind, entfernen wir die Ereignis-Listener als gut.

Wenn wir Blättern, das scroll-Ereignis löst mehrere Male schnell. So, für die Leistung, die wir hinzufügen, ist ein kleines timeout zu unserem Skript, das drosselt die lazy loading-Funktion-Ausführung, damit es nicht blockieren andere Aufgaben ausführen, die in dem gleichen thread im browser.

Hier ist ein funktionierendes Beispiel für diesen Ansatz.

Finden Sie den Stift, Faul laden von Bildern, die mit Hilfe von event-Handler – Beispiel-code von ImageKit.io (@imagekit_io) auf CodePen.

Beachten Sie, dass die ersten drei Bilder, in diesem Beispiel sind geladen vorne. Die URL vorhanden ist direkt in das src-Attribut anstelle des data-src-Attribut. Dies ist essentiell für eine gute user experience. Da diese Bilder sind am oberen Rand der Seite, Sie sollte sichtbar gemacht werden, so bald wie möglich. Es gibt keine Notwendigkeit zu warten, für die JavaScript, um diese zu laden.

Methode 2: führen Sie das Bild laden mit dem Schnittpunkt Beobachter API

Die Kreuzung Beobachter API ist relativ neu. Es macht es einfach zu erkennen, wenn ein element tritt in den viewport und nehmen Sie eine Aktion, wenn es funktioniert. In der vorherigen Methode, mussten wir binden Ereignisse, damit die Leistungsfähigkeit in Geist und implementieren Sie einen Weg, um zu berechnen, ob das element in den Arbeitsbereich, oder nicht. Die Kreuzung Beobachter API entfernt alle dieser Aufwand durch die Vermeidung der Mathematik und große Leistung aus der box.

Unten ist ein Beispiel für die Verwendung der API zu faul laden von Bildern. Wir bringen den Betrachter auf alle Bilder, die zu faul geladen. Sobald das API erkennt, dass das element in den viewport mit der isIntersecting Eigenschaft, Holen wir die URL aus dem data-src-Attribut und verschieben Sie Sie in das src-Attribut für browser auslösen, das Bild zu laden. Sobald dies geschehen ist, entfernen wir die lazy-Klasse aus das Bild, und entfernen Sie auch den Betrachter von diesem Bild.

Finden Sie den Stift, Faul laden von Bildern, die mit IntersectionObserver – Beispiel-code von ImageKit.io (@imagekit_io) auf CodePen.

Vergleicht man die Bild-Ladezeiten für die beiden Methoden (Ereignis-Listener vs. Kreuzung Beobachter), werden Sie feststellen, dass Bilder viel schneller laden mit dem Schnittpunkt Beobachter API und, dass die Aktion ausgelöst wird, schneller als gut und aber die Website erscheint nicht träge, sogar im Prozess des Rollens. In der Methode unter Einbeziehung Ereignis-Listener, mussten wir ein timeout, um es performant, hat einen leicht negativen Einfluss auf die user experience, wie das Bild geladen wird ausgelöst, mit einer leichten Verzögerung.

Jedoch, wie bei jedem neuen feature wird die Unterstützung für die Kreuzung Beobachter API ist nicht auf allen Browsern.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
58 45 55 Keine 16 Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Keine 46 Keine 67 69 62

So müssen wir zurückgreifen, um die Ereignis-listener-Methode in Browsern, wo die Kreuzung Beobachter-API wird nicht unterstützt. Wir haben diese Rechnung in dem obigen Beispiel.

Kapitel 4: Lazy Loading CSS-Hintergrund-Bilder

Eine gemeinsame background-image in CSS:

.meine-Klasse {
background-image: url(‘/path/to/some/image.jpg’);
/* styles */
}

CSS-Hintergrundbilder sind nicht so einfach, wie der image-tag. Um diese zu laden, muss der browser zu bauen, der DOM-Baumstruktur als auch das CSSOM Baum zu entscheiden, ob der CSS-Stile angewendet werden, um einen DOM-Knoten im aktuellen Dokument. Wenn die CSS-Regel festlegen das Hintergrundbild nicht anwenden, um ein element in das Dokument, dann wird der browser nicht laden Sie das Hintergrundbild. Wenn die CSS-Regel anwendbar ist, um ein element in das aktuelle Dokument ein, dann wird der browser das Bild lädt.

Huh? Dies mag kompliziert erscheinen auf den ersten, aber dieses Verhalten bildet die Grundlage für die Technik des lazy loading hintergrund-Bilder. Einfach ausgedrückt, wir überlisten den browser in die nicht die Anwendung der background-image CSS Eigenschaft auf ein element, bis das element kommt in den Arbeitsbereich.

Hier ist ein funktionierendes Beispiel, dass faul lädt eine CSS-hintergrund-Bild.

Finden Sie den Stift, Faul Laden von Hintergrundbildern in CSS durch ImageKit.io (@imagekit_io) auf CodePen.

Eine Sache zu beachten hier ist, dass der JavaScript-code für lazy loading ist immer noch die gleiche. Wir sind immer noch mit der Kreuzung Beobachter API-Methode mit einem fallback auf die Ereignis-Listener. Der “trick” liegt in der CSS.

Wir haben ein element mit der ID bg-Bild, hintergrund-Bild. Jedoch, wenn wir die lazy-Klasse auf das element ist, können wir überschreiben Sie die Eigenschaft background-image, indem Sie den Wert auf none in der CSS.

Da ein element mit einer ID und eine Klasse hat eine höhere Spezifität in CSS über eine ID alleine der browser wendet die Eigenschaft background-image: none, um das element zunächst. Wenn wir nach unten scrollen, an der Kreuzung Beobachter-API (oder Ereignis-Listener, je nachdem, welche Methode Sie wählen) erkennt, dass das Bild in das Ansichtsfenster, entfernt es die lazy-Klasse aus dem element. Diese änderungen der geltenden CSS und wendet die eigentliche background-image-Eigenschaft auf das element, das auslösen der laden des hintergrund-Bildes.

Kapitel 5: Schaffung einer Besseren User-Erfahrung Mit Lazy Loading

Lazy loading ist eine große Leistung. Für eine e-commerce-Unternehmen, lädt Hunderte von Produkt-Bilder auf einer Seite, lazy loading kann eine erhebliche Verbesserung in der ersten Seite geladen, während die Verringerung der Bandbreite Verbrauch.

Jedoch, eine Menge von Unternehmen, die sich nicht entscheiden kann, für lazy loading, weil Sie glauben, es geht gegen liefert eine große Benutzererfahrung (user experience, also der erste Platzhalter ist hässlich, die Ladezeiten sind langsam, etc.).

In diesem Abschnitt werden wir versuchen zu lösen, handelt es sich um Benutzer-Erfahrung mit lazy-laden von Bildern.

Tipp 1. Verwenden Sie die Richtigen Platzhalter

Ein Platzhalter ist, was erscheint, in den Behälter, bis das eigentliche Bild geladen ist. Normalerweise sehen wir Entwickler, die mit einem solid-Farbe Platzhalter für Bilder oder ein einzelnes Bild als Platzhalter für alle Bilder.

Die Beispiele, die wir angeschaut haben, so weit haben, verwendet einen ähnlichen Ansatz: eine box mit einem einfarbigen hellgrauen hintergrund. Jedoch, wir können besser tun, um eine angenehmere user experience. Unten sind zwei Beispiele für die Verwendung besserer Platzhalter für unsere Bilder.

Dominierende Farbe Platzhalter

Anstelle der Verwendung einer festen Farbe für den Bild-Platzhalter, finden wir die dominierende Farbe vom ursprünglichen Bild und verwenden, die als Platzhalter. Diese Technik ist verwendet worden seit geraumer Zeit von Google in seiner Bildersuche Ergebnisse, als auch durch Pinterest in Ihr raster design.

Pinterest nutzt die dominierende Farbe des Bildes als Hintergrundfarbe für Bild-Platzhalter.

Dies mag Komplex Aussehen zu erreichen, aber eine sehr einfache Möglichkeit, dies zu erreichen ist, verkleinere das Bild unten, um eine 1×1 pixel und dann skaliere es auf die Größe des Platzhalters—eine sehr grobe Näherung, aber eine einfache, no-fuss Weg, um eine einzelne dominierende Farbe. Mit ImageKit, die dominierende Farbe Platzhalter können bezogen werden über eine verkettete Transformation im ImageKit wie unten gezeigt.

<!– Original Bild in 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt=”original-image” />

<!– Dominante Farb-Bild mit gleichen Dimensionen –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-1 h-1:B-400 h-300″ alt=”dominante Farbe “Platzhalter” />

Die Platzhalter-Bild ist nur 661 bytes in der Größe im Vergleich zu dem ursprünglichen Bild, das 12700 bytes—19x kleiner. Und es bietet sich ein schöner übergang Erfahrung von Platzhalter für das eigentliche Bild.

Hier ist ein video demonstriert, wie dieser Effekt funktioniert für den Benutzer.

Finden Sie den Stift Dominierende Farbe Platzhalter – Faul laden von Bildern, die mit IntersectionObserver – Beispiel-code von ImageKit.io (@imagekit_io) auf CodePen.

Low Quality Bild-Platzhalter (LQIP)

Erweitern wir die obige Idee mit einer dominanten Farbe Platzhalter weiter. Anstelle der Verwendung einer einzelnen Farbe, die wir verwenden eine sehr niedrige Qualität, verschwommene version des ursprünglichen Bildes als Platzhalter. Nicht nur, dass es gut Aussehen, aber es gibt dem Benutzer eine Vorstellung darüber, was das eigentliche Bild aussieht und die Wahrnehmung, dass das Bild geladen ist im Gange. Dies ist ideal für die Verbesserung der wahrgenommenen Belastung erleben. Diese Technik wurde genutzt von Leuten und Medium.

LQIP Bild-URL Beispiel mit ImageKit:

<!– Original Bild in 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt=”original-image” />

<!– Low quality Bild-Platzhalter mit gleichen Abmessungen – – – >
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300,bl-30,f-50″ alt=”dominante Farbe “Platzhalter” />

Die LQIP 1300 bytes groß ist, immer noch fast 10x kleiner als das original Bild und eine deutliche Verbesserung im Hinblick auf die visuelle Erfahrung über alle anderen Platzhalter-Technik.

Hier ist ein video demonstriert, wie dieser Effekt funktioniert für den Benutzer.

Finden Sie den Stift LQIP Platzhalter – Faul laden von Bildern, die mit IntersectionObserver – Beispiel-code von ImageKit.io (@imagekit_io) auf CodePen.

Es ist klar, dass entweder dominanten Farbe oder LQIP Platzhalter sorgt für einen sanfteren übergang von der Platzhalter für das eigentliche Bild, gibt dem Benutzer eine Vorstellung von dem, was kommen wird anstelle der Platzhalter, und verbessert das laden der Wahrnehmung.

Tipp 2: Fügen Sie die Pufferzeiten für die Bilder zu Laden

Wenn wir diskutierten über verschiedene Methoden, um die trigger-Bild geladen, checkten wir für den Zeitpunkt, wo das Bild betritt, der viewport, d.h. das Bild geladen wird ausgelöst, wenn der Obere Rand des Bild-Platzhalters fällt mit dem unteren Rand des Viewports.

Das problem mit diesem ist, dass der Nutzer scrollt wirklich schnell durch die Seite und das Bild wird einige Zeit brauchen, um zu laden und auf dem Bildschirm erscheinen. Kombiniert mit Drosselung möglicherweise weitere Verzögerung der Belastung, die der Benutzer möglicherweise wind-up-warten ein paar Millisekunden länger, das Bild zu zeigen. Nicht so toll für die user experience!

Während wir erhalten eine ziemlich gute user-experience mit dem Schnittpunkt Beobachter API für Leistung und LQIP für glattere übergänge, es ist ein weiterer einfacher trick, die Sie verwenden können, um sicherzustellen, dass die Bilder immer komplett geladen, wenn Sie in den viewport : die Einführung einer Marge der Auslöser für Bilder.

Stattdessen laden Sie das Bild genau, wenn Sie in den viewport laden, wenn es, sagen wir mal, 500 Pixel, bevor es in den viewport. Dies bietet zusätzliche Zeit, die zwischen der Last auslösen und dem tatsächlichen Eintrag in das Ansichtsfenster, das für die Bilder zu laden.

Mit der Verschränkung von Beobachter-API verwenden, können Sie den root-parameter zusammen mit den rootMargin parameter (arbeitet als standard-CSS margin-Regel), zur Vergrößerung der effektiven bounding box, der betrachtet wird, zu finden, um die Kreuzung. Mit dem Ereignis-listener-Methode, anstelle der überprüfung für die Differenz zwischen dem Bildrand und der viewport-Rand 0 ist, können wir eine positive Zahl ist, fügen Sie einige Schwelle.

Finden Sie den Stift, Faul laden von Bildern, die mit zusätzlichen Schwellenwert – Beispiel-code von ImageKit.io (@imagekit_io) auf CodePen.

Wenn du dir die folgenden screencast eng, Sie werden feststellen, dass das fünfte Bild in der Sequenz geladen ist, wenn das Dritte Bild ist in Sicht. Ähnlich, das sechste Bild wird geladen, wenn der vierte ist in Sicht, und so weiter. Auf diese Weise geben wir ausreichend Zeit für die Bilder komplett geladen werden und in den meisten Fällen der Benutzer nicht sehen, den Platzhalter an alle.

Wenn Sie nicht frühere Ankündigung, in allen unseren Beispielen, das Dritte Bild (image3.jpg) ist immer geladen vorne, auch wenn es außerhalb des Viewports. Dies war auch nach dem gleichen Prinzip: Last leicht im Voraus statt laden genau an der Schwelle für eine bessere Benutzer-Erfahrung.

Tipp 3: Vermeiden Sie Inhalte Reflow

Dies ist ein weiterer trivialer Punkt, die, wenn gelöst, kann helfen, eine gute Benutzer Erfahrung.

Wenn es kein Bild, der browser nicht weiß, wie groß es wird dauern bis. Und wenn wir das nicht angeben, es mit CSS, dann den umschließenden container hätte keine Dimensionen, also wird es gelesen werden als 0 x 0 Pixel.

Wenn das Bild geladen ist, der browser legen Sie es in den Bildschirm und reflow-Inhalte, um es zu passen. Diese plötzliche änderung in der layout-Ursachen, andere Elemente zu bewegen, und heißt es content reflow, oder verschieben. Michael Scharnagl geht in großer Tiefe zu erklären, wie diese erzeugt einen unangenehmen user experience.

Dies kann vermieden werden, durch die Angabe einer Höhe und/oder Breite für den umschließenden container, so dass der browser das Bild zu zeichnen container mit einer bekannten Höhe und Breite. Später, wenn das Bild geladen, da der Behälter die Größe ist bereits angegeben und das Bild passt in perfekt, der rest des Inhalts etwa, dass die container nicht verschieben.

Tipp 4: Vermeiden Sie Jedes Bild Lazy Loading

Das ist ein Fehler, dass die Entwickler oft machen, weil es super verlockend zu glauben, dass das zurückstellen Bild geladen ist gut die ganze Zeit. Aber, wie das Leben selbst, ist es möglich, zu viel von einer guten Sache. Lazy loading reduziert möglicherweise das erstmalige laden der Seite, aber es könnte auch sein Ergebnis in einer negativen Nutzererfahrung, wenn einige Bilder verschoben werden, wenn Sie nicht sein sollte.

Wir können Folgen einige Allgemeine Prinzipien zu identifizieren, welche die Bilder sollten lazy geladen. Zum Beispiel, jedes Bild, das in das Ansichtsfenster, oder am Anfang der Webseite, sollte wohl nicht faul geladen. Dies gilt für alle header-image -, marketing-banner, – logos, oder wirklich alles, was der Benutzer sehen würde, wenn zunächst die Landung auf einer Seite. Denken Sie auch daran, dass mobile und desktop-Geräte haben unterschiedliche Bildschirmgrößen und somit eine unterschiedliche Anzahl von Bildern, die sichtbar werden auf dem Bildschirm zunächst. Sie wollen das Gerät, das verwendet wird, zu berücksichtigen und zu entscheiden, welche Ressourcen zu laden, bis Vorder-und die lazy load.

Ein weiteres Beispiel ist jedes Bild, das noch etwas abseits der viewport in den ersten laden sollten nicht wahrscheinlich nicht faul geladen. Dies wird durch das Prinzip oben diskutiert—laden etwas im Voraus. Also, lasst uns sagen, dass jedes Bild, das 500 Pixel oder eine einzelne schriftrolle aus dem unteren Rand des Viewports geladen werden kann bis vor als gut.

Ein weiteres Beispiel ist, wenn die Seite kurz ist. Es kann nur eine einzige schriftrolle oder ein paar Schriftrollen, oder vielleicht sind es weniger als fünf Bilder außerhalb des Viewports. In diesen Fällen können Sie wahrscheinlich verlassen lazy loading, insgesamt. Es würde keine bedeutenden Vorteil für den Endbenutzer in Bezug auf die Leistung und die zusätzlichen JavaScript-Code, laden Sie auf der Seite enable lazy loading wird ausgeglichen Potenzial zu gewinnen, die Sie von ihm bekommen.

Kapitel 5: Lazy Loading ist die Abhängigkeit von JavaScript

Die gesamte Idee von lazy loading ist abhängig von JavaScript als aktiviert und verfügbar in den browser des Benutzers. Während die meisten Ihrer Benutzer dürften deshalb JavaScript aktiviert haben, ist es wichtig, plan für die Fälle, wo es nicht ist.

Entweder Sie zeigen eine Meldung an, dass der Benutzer, warum die Bilder nicht geladen werden, und Sie ermutigen, entweder verwenden Sie einen modernen browser oder aktivieren Sie JavaScript.

Ein anderer Weg ist die Verwendung der noscript-tag. Allerdings ist dieser Ansatz bietet einige Fallstricke. Diese Frage thread auf Stack Overflow hat eine große Aufgabe der Bewältigung dieser Anliegen und ist eine Empfehlenswerte Lektüre für alle, die sich um diese Gruppe von Benutzern.

Kapitel 6: Beliebte JavaScript-Bibliotheken für Lazy Loading

Da die Umgebungen und Implementierungsdetails variieren können, die in allen Browsern und Geräten, möchten Sie vielleicht zu prüfen, eine bewährte Bibliothek für lazy loading eher als Spinnerei etwas von Grund auf neu.

Hier ist eine Liste der beliebtesten Bibliotheken und Plattform-spezifische plugins, die Ihnen erlauben, zu implementieren lazy loading mit minimalem Aufwand:

    >Yet Another Lazy Loader: Diese Bibliothek verwendet die Kreuzung Beobachter API und fällt zurück auf Ereignis-basierten lazy loading für Browser, die das noch nicht unterstützen Sie. Dies ist ideal für gerade ungefähr jedem HTML-element, aber funktioniert leider nicht auf hintergrund-Bilder in CSS. Die gute Nachricht ist, dass es unterstützt Internet Explorer wieder auf die version 11.

  • lazysizes: Dies ist eine sehr beliebte Bibliothek mit umfangreicher Funktionalität. Es enthält Unterstützung für responsive image srcset und Größen, – Attribute und liefert hervorragende Leistung, obwohl Sie nicht Gebrauch machen von der Kreuzung Beobachter-API.
  • WordPress A3 Lazy Load: Es gibt eine Vielzahl von lazy loading WordPress plugins die es gibt, aber dieser kommt mit einem robusten Satz von Funktionen, darunter ein fallback, wenn JavaScript nicht verfügbar ist.
  • jQuery Lazy: Eine einfache Bibliothek, die verwendet ein jQuery-Umsetzung.
  • WeltPixel Lazy Loading Verbessert: Magento-2-Erweiterung.
  • Magento Faul Image Loader: ein Weiterer Magento Erweiterung, für 1.x.
  • Shopify Faul Image Plugin (bezahlt): Enable lazy loading auf Shopify Website.

Kapitel 7: Testen Von Lazy Load

Sobald Sie implementiert, lazy loading, werden Sie wahrscheinlich wollen, um zu überprüfen, dass es wie vorgesehen funktioniert. Der einfachste Weg wäre, zum öffnen der Entwickler-tools in Ihrem browser.

Von dort aus gehen Sie zu Netzwerk – > Bilder. Wenn Sie die Seite aktualisieren, zum ersten mal, Sie sollten nur geladene Bilder in der Liste.

Dann, als Sie beginnen, nach unten scrollen die Seite, das andere Bild laden Anfragen bekommen würde ausgelöst und geladen. Sie können auch beachten Sie die Anzeigedauer für das Bild laden in der Wasserfall-Spalte in dieser Ansicht. Es würde helfen, Sie zu identifizieren Bild laden Fragen, ob oder Probleme bei der Auslösung das Bild laden.

Ein weiterer Weg wäre, um führen Sie den Google Chrome Leuchtturm audit-Bericht auf Ihrer Seite, die Sie nach der Implementierung der änderungen und der Blick für die Vorschläge unter “Offscreen-images” Abschnitt.

Fazit

Wir haben sehr viel durchgenommen zu faul laden von Bildern! Lazy loading—wenn gut umgesetzt—kann erhebliche Vorteile auf die Leistung Ihrer Website in den laden Leistung bei der Verringerung der Gesamt-Größe der Seite und die Versandkosten, Dank verzögern unnötig Ressourcen in den Vordergrund.

Also, was sind Sie warten für? Einstieg mit lazy loading Bilder jetzt!