So laden Sie Bilder und Videos in WordPress faul (und ersetzen YouTube YouTube iFrames durch ein Vorschaubild) für bessere GTmetrix-Ergebnisse

Was ist der beste Weg, um faul Bilder und Videos laden in WordPress?


Dies hängt davon ab, ob Sie bereits ein Cache-Plugin verwenden, das das verzögerte Laden unterstützt (WP Rocket, W3-Gesamtcache, Swift, LiteSpeed-Cache). Wenn Ihr Cache-Plugin das verzögerte Laden von Bildern und Videos unterstützt, verwenden Sie dies am besten, um zu vermeiden, dass Sie ein zusätzliches Plugin installieren müssen. Wenn Ihr Cache-Plugin jedoch kein verzögertes Laden unterstützt, empfehle ich die Verwendung eines Plugins (insbesondere WP Rocket). Andernfalls habe ich unten alternative Plugins zum verzögerten Laden aufgeführt, die Sie einzeln installieren können.

Was ist Lazy Loading??
Lazy Loading bedeutet, dass Bilder und Videos erst geladen werden, wenn Benutzer die Seite nach unten scrollen und sie tatsächlich sehen. Dies führt zu weniger HTTP-Anforderungen auf der Seite. Wenn Sie jedoch viele Bilder oder eingebettete Videos haben, müssen Sie diese ständig laden und durch die Seite scrollen.

Was bedeutet es, YouTube Iframe durch ein Vorschaubild zu ersetzen??
Wenn Sie Videos in Ihre WordPress-Site einbetten, wird der „fette YouTube-Player“ erst geladen, wenn Benutzer auf die Schaltfläche „Abspielen“ klicken. Mit anderen Worten, das einzige, was anfangs geladen wird, ist ein Vorschaubild.

Sollten Sie faul Bilder und Videos laden?
Ich lade Bilder nicht faul, da das ständige Laden von Bildern beim Scrollen auf der Seite für Benutzer ärgerlich sein kann. Alle meine Bilder sind jedoch in GTmetrix zu 100% optimiert. Ich lade faul Videos und ersetze den Iframe durch ein Vorschaubild. Da das Laden jedes eingebetteten Videos 2 Sekunden dauern kann (viel schwerer als ein Bild), ist der Vorteil des verzögerten Ladens von Videos erheblich.

1. WP Rocket

WP Rocket ist meine erste Wahl für faules Laden und war das beste Cache-Plugin in Facebook-Umfragen.

Da bereits ein verzögertes Laden integriert ist, müssen Sie kein zusätzliches Plugin installieren. Das ist der gesamte Vorteil von WP Rocket. Es bietet mehr Funktionen als fast jedes andere Cache-Plugin (was zu besseren Ladezeiten und GTmetrix-Ergebnissen führt), jedoch weniger Plugins auf Ihrer Site. WP Rocket hat umfangreiche Dokumentation zum verzögerten Laden und Konfigurieren der WP Rocket-Einstellungen.

WP Rocket

So aktivieren Sie Lazy Load in WP Rocket
Um das verzögerte Laden in WP Rocket zu aktivieren, gehen Sie zu Einstellungen > WP Rocket > Medien > LazyLoad. Sie können es für Bilder, Iframes und Videos aktivieren und YouTube-Iframes durch ein Vorschaubild ersetzen.

Lazy Load Images WP Rakete

2. SG Optimizer

SiteGround Lazy Loading in ihrem großen Update von eingeführt SG Optimizer.

Natürlich müssen Sie ein SiteGround-Kunde sein, um dieses Plugin verwenden zu können (was ich für Shared Hosting tun würde, wenn man bedenkt, dass sie in über 20 Facebook-Umfragen als Host Nr. 1 eingestuft wurden). SG Optimizer ist vergleichbar mit WP Rocket, verfügt jedoch nicht über annähernd so viele Funktionen. Wenn Sie SiteGround für Ihren Host verwenden, würde ich WP Rocket dennoch dem SG Optimizer vorziehen.

SiteGround SG Optimizer

So aktivieren Sie Lazy Load in SG Optimizer
Um das verzögerte Laden in SG Optimizer zu aktivieren, gehen Sie zu Einstellungen > SG Optimizer > Standardeinstellungen pro Site > Bildoptimierung. Sie können Bilder, Gravatare, Miniaturansichten, reaktionsschnelle Bilder und Widgets verzögert laden. Wenn Sie Kommentare in Ihrem Blog haben, kann das verzögerte Laden von Gravatars enorm helfen.

SG Optimizer Lazy Loading

3. W3 Total Cache

Wenn Sie bereits W3 Total Cache verwenden, haben sie auch eine Option zum verzögerten Laden.

W3 Total Cache galt für einige Zeit als aufgegeben, aber der Entwickler hat seitdem begonnen, sein Plugin zu warten. Ich habe ein umfangreiches Tutorial zum Konfigurieren der W3 Total Cache-Einstellungen.

W3 Total Cache Plugin

So aktivieren Sie Lazy Load im W3 Total Cache
Um das Laden des Ladens in W3 Total Cache zu aktivieren, gehen Sie zu Einstellungen > Allgemeine Einstellungen > Benutzererfahrung > Faules Laden. Aktivieren Sie diese Option und wechseln Sie zu Benutzererfahrung > Faules Laden. Wählen Sie diese Option, um HTML-Bild-Tags, Hintergrundbilder, das Ausschließen von Wörtern und die Methode zum Einbetten von Skripten zu verarbeiten.

W3 Total Cache Lazy Loading

4. Litespeed-Cache

Litepseed-Cache faules Laden wird auch die Arbeit erledigen (Litespeed ist ein gut bewertetes Cache-Plugin).

LiteSpeed ​​Cache Plugin

So aktivieren Sie Lazy Load im LiteSpeed-Cache
Wechseln Sie zum LiteSpeed-Cache, um das Laden des Ladens im LiteSpeed-Cache zu aktivieren > die Einstellungen > Medien > Medieneinstellungen. Hier können Sie das verzögerte Laden von Bildern und Iframes aktivieren, Bilder ausschließen, die Optimierung automatisch über einen Cron-Job anfordern, die Javascript-Bibliothek inline einbinden und andere Einstellungen umschalten.

Lazy Load Images Videos Litespeed-Cache

5. Schnelle Leistung

Schnelle Leistung ist ein weiteres Cache-Plugin, das das verzögerte Laden unterstützt. Swift hat großartige Bewertungen in der WordPress Speed ​​Up Facebook-Gruppe erhalten, aber die Bewertungen auf der WordPress-Plugin-Seite sind nur etwa 4 Sterne. Ich habe Swift Performance noch nicht ausprobiert. Ich bin sehr zufrieden mit WP Rocket.

Swift Performance Lite Plugin

So aktivieren Sie Lazy Load in Swift Performance
Um das Laden des Ladens in Swift Performance zu aktivieren, gehen Sie zu Einstellungen > Medien > Faule Ladung. Hier haben Sie die Möglichkeit, Bilder verzögert zu laden, bestimmte Bilder auszuschließen und Bilder verzögert zu laden.

Lazy Load Images Schnelle Leistung

6. Autoptimieren

Autoptimize wird häufig bei Hosts wie GoDaddy und WP Engine verwendet, bei denen sie über ein eigenes integriertes Caching-System verfügen Blacklist-Cache-Plugins. In diesem Fall (da Sie sich um andere Geschwindigkeitsoptimierungen kümmern möchten) ist Autoptimize normalerweise das richtige Plugin dafür. Eine der vielen Funktionen ist faules Laden, Sie können damit aber auch HTML, CSS, JavaScript und Google Fonts optimieren.

Plugin automatisch optimieren

So aktivieren Sie Lazy Load in Autoptimize
Um das Laden des Ladens in Autoptimize zu aktivieren, gehen Sie zu Einstellungen > Bilder > Lazy Load Images. Sie haben auch die Möglichkeit, das CDN von ShortPixel zur Bildoptimierung zu verwenden (dies ist das Plugin, das ich verwende)..

Lazy Load Images Autoptimieren

7. Smush

Smush ist ein Bildoptimierungs-Plugin, das unterstützt das verzögerte Laden. Es wurde von WPMU entwickelt, aber ich persönlich verwende ShortPixel für verlustfreie Komprimierung, da es das einzige ist, das ich verwendet habe, um meine Bilder zu 100% in GTmetrix zu machen (und ich habe viele Plugins zur Bildoptimierung getestet)..

Smush Plugin

So aktivieren Sie Lazy Load In Smush
Um das Laden des Ladens in Smush zu aktivieren, gehen Sie zu Smush > Instrumententafel > Faule Ladung. Sie können auswählen, welche Dateitypen faul geladen werden sollen (.jpeg, png, .gif, .svg, iframe) und ob diese für Inhalte, Widgets, Miniaturansichten und Gravatare aktiviert werden sollen. Es hat sogar Lazy Load Animation Einstellungen.

Smush Lazy Load

8. Lazy Load von WP Rocket

Lazy Load von WP Rocket ist gut, wenn Sie WP Rocket nicht verwenden, aber Bilder verzögert laden möchten.

Lazy Load Plugin

So aktivieren Sie Lazy Load in Lazy Load von WP Rocket
Gehe zu den Einstellungen > LazyLoad. Sie haben die Möglichkeit, Bilder und Iframes verzögert zu laden & Videos und ersetzen Sie YouTube-Videos durch Miniaturansichten. Es müssen nicht viele Einstellungen konfiguriert werden. Ich persönlich wünschte, es gäbe mehr. Vielleicht hat dieses Lazy Load-Plugin deshalb nicht die besten Bewertungen.

Lazy Load von WP Rocket

9. A3 Lazy Load

A3 Lazy Load unterstützt das verzögerte Laden von Bildern und Videos.

a3 Lazy Load Plugin

So aktivieren Sie Lazy Load in A3 Lazy Load
Um das Laden des Ladens in A3 Lazy Load zu aktivieren, gehen Sie zu Einstellungen > A3 Lazy Load. Sie können Einstellungen für das verzögerte Laden von Bildern, Videos, Iframes und Gravataren konfigurieren und auswählen, auf welche Bereiche Ihrer Website das verzögerte Laden angewendet werden soll (einschließlich Mobilgeräte). Es gibt auch Optionen zum Aktivieren eines verzögerten Ladeeffekts, zum Laden der Hintergrundfarbe und zum Ausschließen von URLs und Beitragstypen.

a3 Lazy Load-Einstellungen

10. BJ Lazy Load

BJ Lazy Load scheint nicht gut gepflegt zu sein, daher würde ich wahrscheinlich ein anderes Plugin verwenden.

BJ Lazy Load Plugin

So aktivieren Sie Lazy Load in BJ Lazy Load
Um das Laden des Ladens in BJ Lazy Load zu aktivieren, gehen Sie zu Einstellungen > BJ Lazy Load. Die Einstellungen sind relativ einfach und bieten Ihnen die Möglichkeit, Bilder, Iframes und Gravatare verzögert zu laden und verzögertes Laden von Inhalten, Text-Widgets und Post-Thumbnails auszuschließen. Es besteht auch die Möglichkeit, ein Platzhalterbild und einen Schwellenwert für das Ansichtsfenster einzuschließen und beim verzögerten Laden ein Vorschaubild mit niedriger Auflösung zu verwenden.

BJ Lazy Load-Einstellungen

11. Lazy Load für Bilder

Lazy Load für Bilder ist gut, wenn Sie es nur für Bilder tun möchten.

Lazy Load für Bilder Plugin

So aktivieren Sie Lazy Load In für Bilder
Im Lazy Load For Images-Plugin müssen keine Einstellungen konfiguriert werden (automatisch)..

12. Lazy Load für Videos

Lazy Load für Videos Ersetzt eingebettete Videos durch anklickbare Vorschaubilder.

Lazy Load für Videos Plugin

So aktivieren Sie Lazy Load in Lazy Load für Videos
Um das Laden des Ladens in Lazy Load For Videos zu aktivieren, gehen Sie zu Einstellungen > Lazy Load für Videos. Wählen Sie diese Option, um CSS / JS nur bei Bedarf zu laden, die Wiedergabetaste anzupassen und benutzerdefiniertes CSS anzuwenden.

Lazy Load für Videos Plugin

13. Lazy Load für Kommentare

Sie können Kommentare mit der Option faul laden Lazy Load für Kommentare Plugin.

Dies kann dazu beitragen, weniger HTTP-Anfragen zu stellen, wenn Sie viele Kommentare in Ihrem Blog haben, insbesondere da das Laden von Gravatars zwischen allen Anfragen von Drittanbietern lange dauern kann.

Lazy Load für Kommentare Plugin

So aktivieren Sie Lazy Load in Lazy Load für Kommentare
Um das Laden des Ladens in Lazy Load For Comments zu aktivieren, gehen Sie zu Einstellungen > Diskussion > Lazy Load Kommentare. Dies ist die einzige Einstellungskonfiguration für dieses Plugin, aber es hat gute Bewertungen.

Lazy Load Kommentare

14. WP YouTube Lyte

WP YouTube Lyte ist eines meiner Lieblings-Plugins (und am besten bewertet) zum verzögerten Laden von Videos. Es wurde vom Team von Autoptimize erstellt, das in der Regel gute Plugin-Bewertungen hat.

WP YouTube Lyte Plugin

So aktivieren Sie Lazy Load in WP YouTube Lyte
Um das Laden des Ladens in WP YouTube Lyte zu aktivieren, gehen Sie zu Einstellungen > WP YouTube Lyte. Schnapp dir deine YouTube-API-Schlüssel und geben Sie es in Autoptimize ein. Wählen Sie Ihre Player-Größe aus, ob Sie Links, Player-Position, HD erzwingen, als normale YouTube-Links / Iframes fungieren und Mikrodaten hinzufügen möchten. Das lokale Zwischenspeichern von Miniaturansichten kann häufig GTmetrix-Fehler beim Einbetten von YouTube-Videos beheben.

YouTube Thumbnails GTmetrix

Wp YouTube Lyte Einstellungen

Brauchst du noch immer Hilfe?

Ich habe ein großartiges Video zur Geschwindigkeitsoptimierung in WordPress:

Ich habe auch Tutorials zum Optimieren von Bildern, Konfigurieren von WP Rocket, Reduzieren der Serverantwortzeiten und mehr. Mit diesen Tipps kann ich für fast jeden meiner Beiträge 100% (oder nahezu) GTmetrix-Ergebnisse erzielen. Wenn Sie Fragen haben, schreiben Sie mir bitte einen Kommentar – wir helfen Ihnen gerne weiter!

Häufig gestellte Fragen

&# x2705; Welches Plugin eignet sich am besten zum verzögerten Laden von Bildern??

Wenn Sie bereits ein Cache-Plugin verwenden, das Lazy Load unterstützt (z. B. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), versuchen Sie dies am besten zuerst. Ansonsten sind Autoptimize oder das Lazy Load Plugin von WP Rocket gute Lazy Load Plugins.

&# x2705; Was ist mit dem faulen Laden von Videos??

Mit WP Rocket und einigen anderen Cache-Plugins können Sie Videos faul laden und den YouTube-Iframe durch ein Vorschaubild ersetzen. Andernfalls funktioniert WP YouTube Lyte.

&# x2705; Wird das verzögerte Laden die Benutzererfahrung beeinträchtigen??

Ich lade Bilder auf dieser Website nicht faul, aber ich lade Videos faul, weil das Laden viel länger dauert. Das verzögerte Laden von Bildern kann für Benutzer ärgerlich sein und meine Affiliate-Verkäufe verringern. Daher habe ich es deaktiviert.

&# x2705; Was macht faules Laden??

Das verzögerte Laden beschleunigt die anfänglichen Ladezeiten, indem darauf gewartet wird, Bilder und Videos zu laden, bis Benutzer die Seite nach unten scrollen und sie tatsächlich sehen.

&# x2705; So deaktivieren Sie das verzögerte Laden auf bestimmten Seiten?

Mit den meisten Plugins können Sie dies tun. Wenn Sie beispielsweise WP Rocket verwenden und eine Seite oder einen Beitrag bearbeiten, wird in Ihrem Dashboard eine Option angezeigt, mit der Sie das verzögerte Laden dieses bestimmten Inhalts deaktivieren (oder aktivieren) können.

Prost,
Tom

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