Wie Lazy Load Bilder und Videos in WordPress?

Wie man Lazy Load in WordPress

Es gibt viele verschiedene Ans├Ątze, um Lazy Loading auf Ihrer Website zu implementieren. Werfen Sie einen Blick auf unsere Rangliste der Top-Plugins f├╝r WordPress, die langsames Laden unterst├╝tzen.

Es gibt zahlreiche kostenlose Plugins im WordPress-Verzeichnis, die zum verz├Âgerten Laden von Bildern und Videos verwendet werden k├Ânnen. Nachdem wir einige Dutzend Plugins in Betracht gezogen und einige getestet haben, haben wir zwei Plugins gefunden, die die Leistung der Website erheblich steigern. Wenn Sie Lazy Loading implementieren m├Âchten, sollten Sie die folgenden Optionen in Betracht ziehen.

WP Rocket verwenden (Premium)

WP Rocket ist der einfachste Ansatz, um langsames Laden auf Ihrer Website zu implementieren. Dar├╝ber hinaus dauert der Prozess der Aktivierung weniger als eine Minute. LazyLoad ist der Name des Plugins, das WP Rocket als seine Version von Lazy Image Loading enth├Ąlt.

Wenn LazyLoad aktiviert ist, stoppt WP Rocket sofort das WordPress-eigene "Lazy Loading" von Bildern, um m├Âgliche Probleme zu vermeiden.

F├╝hren Sie die folgenden Schritte aus, um die LazyLoad-Funktion von WP Rocket zu aktivieren: -

WP rocket lazy load Einstellungen

Das ist alles, was noch getan werden muss. Das hat zur Folge, dass die Besucher die Fotos nur langsam laden k├Ânnen.

LazyLoad bietet im Gegensatz zum nativen Ansatz von WordPress ein "Lazy Loading" f├╝r zus├Ątzliche HTML-Elemente, wie z. B. Iframes und Videos. Au├čerdem wird LazyLoad f├╝r Hintergrundbilder verwendet, wenn solche Bilder inline f├╝r bestimmte HTML-Komponenten verwendet werden.

Wenn Sie die WordPress-eigene Funktion zum langsamen Laden von Bildern nutzen m├Âchten, k├Ânnen Sie die Option LazyLoad in WP Rocket deaktivieren. Andererseits wird die neue Ladeeigenschaft noch nicht von allen Browsern unterst├╝tzt. Dar├╝ber hinaus ist die Installation von WordPress nur auf Fotos ausgerichtet. Daher ist LazyLoad von WP Rocket immer noch die bessere Alternative, insbesondere wenn Ihre Website viele Bilder, Videos und Einbettungen enth├Ąlt.

Was ist bei der Aktivierung von WP Rocket's Native Lazy Loading zu beachten?

Auch wenn WP Rocket keine automatische Kompatibilit├Ąt mit Chrome-Browsern bietet, die natives Lazy Loading verwenden, haben Sie immer noch die M├Âglichkeit, die Unterst├╝tzung f├╝r Chrome's natives Lazy Loading zu w├Ąhlen, indem Sie es durch ein Helper-Plugin aktivieren. Ebenso ist es der Fall, obwohl WP Rocket keine automatische Kompatibilit├Ąt mit anderen Browsern bietet, die natives Lazy Loading verwenden.

Mit diesem hilfreichen Plugin k├Ânnen Sie die folgenden Dinge sicherstellen:

Das h├Ąngt ganz von Ihnen ab! Probieren Sie zun├Ąchst beide Ans├Ątze an Ihrem Standort aus und entscheiden Sie sich dann f├╝r den, der f├╝r Sie am besten geeignet ist.

a3 Lazy Load verwenden (kostenlos)

Wenn Sie nach einer kostenlosen Option suchen, empfehlen wir Ihnen das a3LazyLoad Plugin. Mit dem a3-Plugin k├Ânnen Sie das faule Laden f├╝r bestimmte Bilder und Seiten deaktivieren. Au├čerdem erm├Âglicht es das verz├Âgerte Laden von Videos auf Ihrer Website:┬á

Au├čerdem unterst├╝tzt dieses Plugin das faule Laden externer Bilder und Videos. Die WordPress-Kernimplementierung f├╝hrt diese Aktion nicht durch.

Sie k├Ânnen dieses Plugin ├╝ber Ihr WordPress-Dashboard installieren und aktivieren. Jetzt k├Ânnen Sie die Einstellungen des Tools anpassen.

Schritt 2: Anpassen der Plugin-Bildeinstellungen

Gehen Sie nun zu Einstellungen > a3 Lazy Load. Wenn Sie unter Lazy Load Activation nachsehen, ist das Plugin nach der Installation standardm├Ą├čig aktiviert.

├ľffnen Sie nun die Registerkarte LazyLoad-Bilder. Sie k├Ânnen (1) ausw├Ąhlen, welche Website-Bilder verz├Âgert werden sollen und (2) einen Fallback f├╝r Webbrowser bereitstellen, die JavaScript nicht akzeptieren. F├╝r Bilder, deren Laden Sie nicht verz├Âgern m├Âchten, k├Ânnen Sie (3) eine CSS-Klasse festlegen:

Konfigurieren, welche Bilder im a3 Lazy Load Plugin verz├Âgert geladen werden sollen

In den Standardeinstellungen sind alle Optionen aktiviert. Wir empfehlen Ihnen dringend, diese Einstellung beizubehalten. Erstellen Sie eine CSS-Klasse, die es Ihnen erm├Âglicht, das verz├Âgerte Laden f├╝r bestimmte Bilder zu ├╝berspringen.

Schritt 3: Anpassen der Plugin-Videoeinstellungen

Die Registerkarte Lazy Load Videos und iframes ist der n├Ąchste Schritt. Mit a3 Lazy Load k├Ânnen Sie das verz├Âgerte Laden f├╝r bestimmte Clips ausw├Ąhlen, genau wie bei Bildern.

Das Plugin erlaubt Videos in (1) Inhalten und Widgets und bietet (2) eine Fallback-Funktion f├╝r Browser, die JavaScript nicht unterst├╝tzen:

Konfigurieren der Videoeinstellungen f├╝r tr├Ąges Laden

Sie k├Ânnen in den Videoeinstellungen (3) eine CSS-Klasse angeben, um bestimmte Videos vom verz├Âgerten Laden auszuschlie├čen. Wenn Sie eine einfachere Konfiguration w├╝nschen, verwenden Sie dieselbe Klasse, die Sie im Abschnitt Bilder gew├Ąhlt haben.

Mehr Lazy Loading Plugins f├╝r WordPress

Abgesehen von WP rocket & a3 Lazy Load gibt es mehrere n├╝tzliche Plugins f├╝r Lazy Load, die Sie in Betracht ziehen k├Ânnen:

Abschlie├čende ├ťberlegungen┬á

Wenn Sie Ihre Website aktualisieren oder ├Ąndern, sollten Sie sich unbedingt ├╝ber m├Âgliche Konflikte im Klaren sein. Schauen Sie sich diese Liste mit h├Ąufigen Problemen im Zusammenhang mit Lazy Load an, wenn Sie feststellen, dass das Zulassen von Lazy Loading dazu gef├╝hrt hat, dass irgendein Aspekt Ihrer Website nicht mehr funktioniert.

Es ist m├Âglich, dass es Inkompatibilit├Ąten gibt, weil die Funktion "Lazy Loading" nicht auf die Bilder angewendet wird, die von Plugins wie Revolution Slider und Envira Gallery hochgeladen werden. Die gesamte Liste der kompatiblen Plugins finden Sie hier.

Diesen und viele andere Artikel finden Sie im Seahawk Media Blog.

Verwandte Beitr├Ąge

Komal Bothra 3. Februar 2023

Suchmaschinen-Marketing (SEM) 

Suchmaschinenmarketing (Search Engine Marketing, SEM) ist eine Form des Online-Marketings, bei der bezahlte Werbung eingesetzt wird.

SEO-Glossar
Komal Bothra 2. Februar 2023

Fallstudie: Mabry Technology Solutions

Mabry Tech ist ein Unternehmen, das sich auf die Beratung und Entwicklung innovativer L├Âsungen f├╝r Unternehmen spezialisiert hat. Mabry's

Fallstudie
Komal Bothra 2. Februar 2023

Addon-Bereich

Eine Addon-Domain ist eine sekund├Ąre Domain, die Sie zu Ihrem Hosting-Account hinzuf├╝gen k├Ânnen. Addon

Hosting-Glossar

Erste Schritte mit Seahawk

Melden Sie sich in unserer App an, um unsere Preise einzusehen und Rabatte zu erhalten.