Lazy Loading Images: Vollständige Anleitung plus 3 Möglichkeiten zur Implementierung

Lazy Loading Images: Vollständige Anleitung


Mit zunehmender Funktionalität und Interaktivität im Web hat die Größe der Webseiten in den letzten Jahren stetig zugenommen. Ab Anfang 2018, die durchschnittliche Seitengröße im Internet standen über 2 MB! Wie kann man das bekämpfen? Ein kleines Ding namens Lazy Loading Images ist eine der besseren Lösungen.

In diesem Handbuch gehen wir durch all die Feinheiten des faulen Ladens von Bildern, und über drei verschiedene Arten der Implementierung sprechen.

Beginnen wir mit dem Inhaltsverzeichnis der kommenden Aufgaben:

  • Warum faules Laden wichtig ist?
  • Was ist faul laden?
  • Vorteile des verzögerten Ladens
  • Was ist zu beachten, wenn Bilder faul geladen werden?
  • Option 1: Implementieren Sie das verzögerte Laden von Grund auf neu (anfängerfreundlich: ⭐ / 5)
  • Option 2: Verwenden Sie ein JavaScript-Plugin (anfängerfreundlich: ⭐⭐ / 5)
  • Option 3: Verwenden Sie ein WordPress-Plugin (anfängerfreundlich: ⭐⭐⭐⭐⭐ / 5)
  • Fazit

Warum faules Laden wichtig ist?

Die enorme Nutzlast einer Webseite besteht hauptsächlich aus Bildern, Skripten, Stylesheets, Schriftarten und Videos. Bilder nehmen jedoch mehr als 60% der Größe einer typischen Webseite ein. Bilder sind auch für das Design einer Webseite von entscheidender Bedeutung. Sie können sie also nicht entfernen.

Ohne Optimierung lädt der Webbrowser des Benutzers alle Ressourcen herunter, bevor eine Seite vollständig gerendert wird. Dies führt zu längeren Ladezeiten, die Personen wegziehen können. WooCommerce geschätzt dass eine E-Commerce-Website pro 100 ms Verbesserung der Seitengeschwindigkeit den Umsatz um 1% steigern kann.

In einem solchen Szenario ist es sehr sinnvoll, alles zu tun, um die Ladezeiten zu optimieren. Und da Bilder den Hauptbeitrag zur Webseitengröße leisten, ist es eine gute Idee, mit ihnen zu beginnen. Hier kommt das faule Laden ins Spiel.

Was ist faul laden?

Um zu verstehen, wie das verzögerte Laden funktioniert, finden Sie hier ein schnell animiertes GIF, das zeigt, wie Bilder in CodeinWP gerendert werden.

Lazy Loading Images DemoDemonstration des faulen Ladens auf CodeinWP

Wenn die Seite geladen wird, werden nicht alle Bilder sofort heruntergeladen. Wenn Sie zu einem Bild nach unten scrollen, sehen Sie zuerst eine unscharfe Version davon, und das eigentliche Bild wird im Hintergrund geladen. Dieses unscharfe Bild ist eine niedrigauflösende Version des endgültigen Bildes in einem Bruchteil der Größe. Dieses Phänomen, das Herunterladen und Rendern des Bildes zu verschieben, bis ein Benutzer einen Bildlauf darüber durchführt, wird genau als verzögertes Laden bezeichnet.

Obwohl "faul" ist im Allgemeinen negativ verbunden, verzögertes Laden ist eine gute Praxis und führt zu einer Verkürzung der Ladezeiten von Seiten, indem Ihre Website insgesamt optimiert wird.

Hinweis. In diesem Beitrag befassen wir uns mit dem Prozess des verzögerten Ladens von Bildern, aber das verzögerte Laden beschränkt sich nicht nur auf Bilder. Sie können dieselbe Idee verwenden, wenn Sie eine andere Ressource wie Videos oder Kommentare rendern (es gibt einen ganzen Abschnitt dazu im dieser Beitrag) und sogar Schriftarten.

Vorteile des verzögerten Ladens

Da die Ladezeit einer Webseite einen wesentlichen Beitrag zum Abbruch leistet, kann das verzögerte Laden von Bildern erheblich dazu führen, dass mehr Benutzer auf der Seite bleiben, bis sie geladen wird, was letztendlich zu höheren Verkäufen oder Conversions führen kann.

Der andere wesentliche Vorteil des verzögerten Ladens von Bildern ist die Senkung der Serverrechnungen. Sie stellen nur die Bilder bereit, durch die der Betrachter blättert, und sparen Bandbreite für Teile der Seite, die nicht angezeigt wurden. Da Bilder einen dominierenden Teil des Seitengewichts ausmachen, kann dies zu potenziell niedrigeren Serverkosten führen.

Das Laden aller Bilder im Voraus ist möglicherweise auch für Ihre Leser schädlich. Wenn sich der Benutzer in einem unbegrenzten Datentarif für das Web befindet, sollte dies wahrscheinlich keine Rolle spielen. Bei Plänen mit begrenzten Daten speichern Sie jedoch die Daten Ihres Betrachters, indem Sie Bilder verzögert laden.

Was ist zu beachten, wenn Bilder faul geladen werden?

Nachdem Sie sich entschlossen haben, das verzögerte Laden auf Ihrer Website richtig zu implementieren, lassen Sie uns einige wichtige Überlegungen zur Vorgehensweise durchgehen.

Identifizieren Sie die Bilder, die Sie verzögert laden möchten

Nicht alle Bilder eignen sich ideal zum verzögerten Laden. Zum Beispiel möchten Sie nicht diejenigen verzögern, die in die Struktur Ihres Designs integriert sind und geladen werden müssen, um alles korrekt zu rendern.

Nur die Bilder, die sich außerhalb des Bildschirms befinden und nicht zur Seitenstruktur beitragen, sollten für das verzögerte Laden berücksichtigt werden. In der Regel sind dies Bilder in der  Elemente, die im Hauptteil der Seite angezeigt werden.

Wählen Sie Ihre Bildplatzhalter aus

Als nächstes ist das Zwischenbild oder die Zwischenfarbe zu berücksichtigen, die angezeigt werden soll, wenn das Bild geladen wird, sobald ein Betrachter darüber gescrollt hat. Die Ladezeit des Bildes hängt davon ab, wie groß das Bild ist, und kann sogar einige Sekunden dauern. Daher müssen Sie überlegen, was Sie während der Ladezeit bevorzugen.

Entwickler gehen in dieser Hinsicht normalerweise in zwei Richtungen:

  • Verwenden Sie die dominante Farbe des Bildes als Hintergrund
  • Verwenden Sie eine Version des Bildes mit geringer Qualität

Platzhalter mit niedriger AuflösungEin Beispiel für Versionen von Bildern mit geringer Qualität als Platzhalter für das verzögerte Laden

Die richtige Wahl hängt vom Design Ihrer Website ab und davon, was dem Benutzer beim Warten auf das Laden des Bildes angezeigt werden soll.

Obwohl eine Technik darin besteht, Bilder zu laden, sobald sie in den Ansichtsfenster gelangen, sollten Sie eine Pufferzeit hinzufügen, bevor dies geschieht, damit der Benutzer den Platzhalter nie sieht.

Achten Sie beim Laden von Bildern darauf, die Seitenstruktur nicht zu ändern

Bevor ein Bild geladen wird, wird es möglicherweise mit 0 px-Abmessungen angezeigt. Dies ist nicht ideal für die Aufrechterhaltung Ihrer Designstruktur.

Dies kann leicht das Layout der Seite und die Position des Textes ändern. Eine einfache Lösung besteht darin, dem Bild sofort die richtigen Abmessungen hinzuzufügen. Dadurch wird sichergestellt, dass die Größe des Bildelements nach dem Laden gleich bleibt.

Schauen wir uns nun an, wie wir das verzögerte Laden auf einer WordPress-Site tatsächlich implementieren können.

Option 1: Implementieren Sie das verzögerte Laden von Grund auf neu

Schauen wir uns zunächst an, wie dies ohne Verwendung von Plugins geschieht. Diese Option wird für diejenigen unter Ihnen empfohlen, die mit JavaScript vertraut sind. Im Idealfall müssen folgende Schritte ausgeführt werden:

  1. Verhindern des Ladens von Bildern während des Ladens von Seiten: Wenn Sie die URL oder den Pfad des Bildes im src-Attribut von angeben  Tag, das Bild wird vom Browser beim Laden der Seite heruntergeladen. Um zu verhindern, dass der Browser das Bild herunterlädt, müssen Sie den Speicherort des Bildes im data-src-Attribut von angeben  Tag stattdessen.
  2. Registrieren Sie Ereignishandlerfunktionen in JavaScript, um bei zwei Ereignissen nach Elementen zu suchen: Laden und Scrollen.
  3. Wenn ein Element in den Ansichtsport gelangt, laden Sie den Wert des data-src-Elements in das src-Element, wodurch der Browser das Bild lädt.

Eine einfache Implementierung dieses Prozesses wurde von erklärt Robin Osborne und die Demo ist verfügbar auf CodePen.

Option 1.1: Verwenden Sie die Schnittpunktbeobachter-API

Die Schnittpunktbeobachter-API Hilft bei der Identifizierung von DOM-Elementen, die sich zu einem bestimmten Zeitpunkt im Ansichtsfenster befinden. Dies ist eine sauberere Methode zum Implementieren von Lazy Load, ohne Event-Handler-Funktionen zu schreiben. Die Anzahl der Codezeilen zum Implementieren des verzögerten Ladens nimmt ebenfalls erheblich ab. Die Browserkompatibilität bleibt jedoch ein Problem.

Der Google Developers Blog erklärt die Implementierung der Intersection Observer API durch diese CodePen-Demo.

Option 2: Verwenden Sie ein JavaScript-Plugin

Die beiden oben beschriebenen Optionen erfordern Kenntnisse in JavaScript auf mittlerem Niveau. Wenn Sie nach einer einfacheren Implementierung des verzögerten Ladens suchen, ohne ein umfangreiches Plugin zu verwenden, das den Server belastet, können Sie das einfache JavaScript-Plugin ausprobieren, bLazy.

Das bLazy Bibliothek Bei einer Größe von weniger als 2 KB wird die Nutzlast nicht zusätzlich belastet, und Sie können problemlos mit dem verzögerten Laden von Bildern umgehen.

Um die bLazy-Bibliothek verwenden zu können, müssen Sie initialisieren  Elemente mit folgenden Attributen:

  • Klasse: Legt die Klasse aller fest  Tags zu b-faul
  • src: Link zum Platzhalterbild
  • data-src: Link zum zu ladenden Bild
  • data-src-small: Link zum Bild zum Laden auf Bildschirmen mit einer Breite von weniger als 420 Pixel

Sie müssen die bLazy-Bibliothek in nur wenigen Codezeilen initialisieren, und alle Ihre Bilder werden durch verzögertes Laden gerendert.

; (function () {
// Initialisieren
var bLazy = new Blazy ();
}) ();

Eine CodePen-Demo ist verfügbar Hier.

Option 3: Verwenden Sie ein WordPress-Plugin

Es gibt einige Optionen, mit denen Sie faul laden können. Vor allem:

Alle diese Plugins übernehmen das verzögerte Laden automatisch für Sie. Jedes kommt auch mit einigen schönen Nebenfunktionen.

Zum Beispiel lädt Lazy Load von WP Rocket auch faul YouTube-Videos und ersetzt sie durch ein Miniaturbild.

Optimole ist nicht nur das neueste Mitglied der ThemeIsle-Familie, sondern bietet Ihnen auch eine solide Bildoptimierung (wie hier getestet) mit diesbezüglich recht fortgeschrittenen Funktionen. Beispielsweise erhalten Sie eine dynamische Größenänderung basierend auf der Bildschirmgröße des Benutzers.


Bildoptimierung & Lazy Load von Optimole Bildoptimierung & Lazy Load von Optimole

Autor (en): Optimole

Aktuelle Version: 2.3.1

Letzte Aktualisierung: 21. April 2020

optimole-wp.zip


96% Bewertungen


50.000 + Installationen


WP 4.7 + Erforderlich

Wie bei den meisten Plugins installieren Sie einfach das Plugin und aktivieren Sie die Funktion im Control Panel des Plugins, um ein verzögertes Laden zu erreichen:

Optimole für das langsame Laden von Bildern

Fazit

In diesem Beitrag wurden die Notwendigkeit und die Vorteile des verzögerten Ladens von Bildern untersucht. Wir haben auch drei verschiedene Möglichkeiten zum Implementieren des verzögerten Ladens auf einer WordPress-Website besprochen:

  • Wenn Sie über fortgeschrittene Kenntnisse in JavaScript verfügen, können Sie das verzögerte Laden von Grund auf neu implementieren
  • Wenn Sie sich mit Programmierung auskennen, aber keine Plugins, eine leichtgewichtige JavaScript-Bibliothek, möchten, ist bLazy eine Option
  • Wenn Sie eine Ein-Klick-Lösung zum verzögerten Laden von Bildern auf Ihrer Website wünschen, sollten Sie sich für ein Plugin wie Optimole entscheiden

Was halten Sie von faulem Laden? Haben Sie versucht, damit die Leistung Ihrer Website zu verbessern??

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map