Es gibt viele verschiedene Möglichkeiten, Lazy Loading auf Ihrer Website zu implementieren. Schauen Sie sich gerne unsere Rangliste der besten WordPress-Plugins an, die langsames Laden unterstützen.
Im WordPress-Verzeichnis finden sich zahlreiche kostenlose Plugins, mit denen sich Bilder und Videos verzögert laden lassen. Nach eingehender Prüfung einiger Dutzend Plugins und dem Testen einiger davon haben wir zwei Plugins gefunden, die die Website-Performance deutlich verbessern. Wenn Sie verzögertes Laden implementieren möchten, sollten Sie die folgenden Optionen in Betracht ziehen.
Verwendung von WP Rocket (Premium)
WP Rocket ist die einfachste Methode, um langsames Laden auf Ihrer Website zu implementieren. Die Aktivierung dauert zudem weniger als eine Minute. LazyLoad ist der Name des Plugins, das WP Rocket für verzögertes Laden von Bildern verwendet.
Wenn LazyLoad aktiviert ist, stoppt WP Rocket sofort das native Lazy Loading von Bildern in WordPress, um mögliche Probleme zu vermeiden.
Führen Sie die folgenden Schritte aus, um die LazyLoad-Funktion von WP Rocket zu aktivieren:
- Sie können LazyLoad aktivieren, indem Sie in Ihrer WordPress-Installation zu Einstellungen > WP Rocket > Medienbereich navigieren.
- Klicken Sie oben auf dem Bildschirm unter dem Bereich „LazyLoad“ auf „Für Bilder aktivieren“.
- Klicken Sie nach Ihrer Auswahl auf „Änderungen speichern“.
Das ist alles, was sonst noch erledigt werden muss. Daher kann es für Besucher zu Verzögerungen beim Laden der Fotos kommen.
LazyLoad ermöglicht verzögertes Laden zusätzlicher HTML-Elemente wie iFrames und Videos, im Gegensatz zum nativen Ansatz von WordPress. Außerdem werden Hintergrundbilder verzögert geladen, sofern diese in bestimmte HTML-Komponenten eingebunden sind.
Wenn Sie die native Lazy-Loading-Funktion von WordPress für Bilder nutzen möchten, können Sie die LazyLoad-Option in WP Rocket deaktivieren. Allerdings wird die neue Ladefunktion noch nicht von allen Browsern unterstützt. Zudem ist die WordPress-Installation ausschließlich auf Fotos ausgerichtet. Daher ist WP Rockets LazyLoad weiterhin die bessere Alternative, insbesondere wenn Ihre Website viele Bilder, Videos und eingebettete Inhalte enthält.
Wichtige Hinweise zur Aktivierung des nativen Lazy Loading von WP Rocket
Obwohl WP Rocket keine automatische Kompatibilität mit Chrome-Browsern bietet, die natives Lazy Loading verwenden, können Sie die Unterstützung für Chromes natives Lazy Loading über ein Hilfs-Plugin aktivieren. Dasselbe gilt, obwohl WP Rocket keine automatische Kompatibilität mit anderen Browsern bietet, die natives Lazy Loading verwenden.
Mit diesem hilfreichen Plugin können Sie Folgendes sicherstellen:
- Jedes Ihrer Fotos enthält die notwendige HTML-Syntax für die Verwendung von nativem Lazy Loading; Browser, die mit Chrome kompatibel sind, nutzen automatisch natives Lazy Loading; alle anderen Browser verwenden automatisch WP Rocket's LazyLoad.
- Sie haben die Möglichkeit, weiterhin unsere bewährte LazyLoad-Technologie zu nutzen oder auf die in Chrome integrierte Lazy-Loading-Funktion umzusteigen.
Es liegt ganz an Ihnen! Testen Sie zunächst beide Ansätze an Ihrem Standort und wählen Sie denjenigen, der für Sie am besten funktioniert.
Verwendung von a3 Lazy Load (kostenlos)
Wenn Sie eine kostenlose Option suchen, empfehlen wir das a3LazyLoading- Plugin. Mit diesem Plugin können Sie das verzögerte Laden einzelner Bilder und Seiten deaktivieren. Außerdem ermöglicht es das verzögerte Laden von Videos auf Ihrer Website.
Dieses Plugin unterstützt außerdem das verzögerte Laden externer Bilder und Videos. Die WordPress-Standardimplementierung führt diese Funktion nicht aus.
Sie können dieses Plugin über Ihr WordPress-Dashboard installieren und aktivieren. Anschließend können Sie die Einstellungen des Tools anpassen.
Schritt 2: Passen Sie die Plugin-Bildeinstellungen an
Gehen Sie als Nächstes zu Einstellungen > a3 Lazy Load. Unter Lazy Load-Aktivierung sehen Sie, dass das Plugin nach der Installation standardmäßig aktiviert ist.
Öffnen Sie nun den Tab „LazyLoad-Bilder“. Sie können (1) auswählen, welche Bilder der Website verzögert geladen werden sollen, und (2) eine Ausweichlösung für Webbrowser angeben, die JavaScript nicht akzeptieren. Für Bilder, deren Laden nicht verzögert werden soll, können Sie (3) eine CSS-Klasse festlegen
Die Standardeinstellungen beinhalten alle aktivierten. Wir empfehlen dringend, diese Einstellung beizubehalten. Erstellen Sie eine CSS-Klasse, mit der Sie das verzögerte Laden bestimmter Bilder überspringen können.
Schritt 3: Passen Sie die Videoeinstellungen des Plugins an
Der nächste Schritt ist der Tab „Lazy Load Videos und iFrames“. Mit a3 Lazy Load können Sie, genau wie bei Bildern, das verzögerte Laden bestimmter Clips festlegen.
Das Plugin ermöglicht die Einbindung von Videos in (1) Inhalten und Widgets und bietet (2) eine Fallback-Funktion für Browser, die kein JavaScript unterstützen:
In den Videoeinstellungen (3) können Sie eine CSS-Klasse festlegen, um bestimmte Videos vom verzögerten Laden auszuschließen. Für eine einfachere Konfiguration verwenden Sie dieselbe Klasse, die Sie im Bereich „Bilder“ gewählt haben.
Weitere Lazy-Loading-Plugins für WordPress
Neben WP Rocket und A3 Lazy Load stehen noch einige weitere nützliche Plugins für Lazy Load zur Verfügung, die Sie in Betracht ziehen könnten:
- Lazy Load für Videos
- BJ Lazy Load
- Mehr Produkte für WooCommerce laden
- WordPress Unendliches Scrollen – Ajax Mehr laden
- Disqus Bedingte Ladung
- Kommentare werden erst geladen
Schlussbetrachtung
Es ist wichtig, mögliche Konflikte zu beachten, wenn Sie Ihre Website aktualisieren oder ändern. Sollten Sie feststellen, dass die Aktivierung von Lazy Loading dazu geführt hat, dass Teile Ihrer Website nicht mehr funktionieren, werfen Sie einen Blick auf diese Liste häufiger Probleme im Zusammenhang mit Lazy Loading.
Es kann zu Inkompatibilitäten kommen, wenn die Lazy-Loading-Funktion bei Bildern, die von Plugins wie Revolution Slider und Envira Gallery hochgeladen werden, nicht angewendet wird. Die vollständige Liste der kompatiblen Plugins finden Sie hier.
Diesen Artikel sowie viele weitere finden Sie im Seahawk Media Blog.
