So laden Sie Lazy Load in WordPress (Bilder und Videos)

Wenn Sie Inhaber einer Website sind, haben Sie in der Vergangenheit wahrscheinlich schon mindestens einmal über die Geschwindigkeit der Website nachgedacht. Schließlich berücksichtigt Google bei der Platzierung von Websites in den Suchergebnissen die Geschwindigkeit. Wenn Ihre Website also langsam lädt, sind Sie beim Ranking im Nachteil. Und wir alle wissen, dass höhere Rankings zu mehr Verkehr führen.

Wie stellen Sie also sicher, dass Ihre WordPress-Site so schnell wie möglich geladen wird? Eine Möglichkeit besteht darin, Ihre Bilder verzögert zu laden.

Lazy Loading ist eine Technik, die das Rendern von Bildern und Videos verzögert, bis sie benötigt werden. Durch die Implementierung kann Ihre Website erheblich beschleunigt werden, und die gute Nachricht ist, dass Sie kein Entwickler sein müssen, um dies umzusetzen.

Heute zeigen wir Ihnen, wie Sie Bilder und Videos in WordPress mit zwei Methoden laden: mit und ohne Plugin.

Was ist Lazy Loading?

Lazy Loading ist eine gängige Technik zur Verbesserung der Seitengeschwindigkeit. Die Idee ist einfach: Anstatt alle Bilder auf einer Seite zu laden, wenn ein Besucher zum ersten Mal ankommt, werden nur die Bilder gerendert, die sichtbar sind. Wenn der Besucher dann auf der Seite nach unten scrollt, werden nach Bedarf weitere Bilder geladen.

Das bedeutet, dass, wenn ein Besucher nie bis zum Ende einer Seite scrollt, Bilder unterhalb des angezeigten Bereichs der Seite nie geladen werden. Somit kann Lazy Loading wertvolle Millisekunden (oder sogar Sekunden) der Ladezeit Ihrer Seite einsparen.

Darüber hinaus kann Lazy Loading auch dazu beitragen, Bandbreite zu sparen. Dies ist besonders wichtig, wenn Ihre Website von Nutzern über ein mobiles Gerät besucht wird. Indem Sie das Laden nicht sichtbarer Bilder und Videos verzögern, können Sie die Menge der verwendeten Daten verringern.

Wie funktioniert Lazy Loading?

Im Allgemeinen funktioniert Lazy Loading auf zwei Arten. WordPress fügt ab Version 5.5 ein HTML5-Attribut namens „loading“ hinzu. In diesem Fall übernimmt der Browser alle Teile des Lazy-Loading-Prozesses, ohne dass zusätzliches JavaScript erforderlich ist.

Eine andere Methode, die vor dem HTML5-Attribut entwickelt wurde, ist kreatives JavaScript. In diesem Fall wird beim Laden der Seite ein leerer Platzhalter bereitgestellt und anschließend wird JavaScript verwendet, um die Bilder zu laden, sobald sie in das Ansichtsfenster gelangen.

In beiden Fällen werden nur die Bilder geladen, die der Browser benötigt. Andere Bilder werden geladen, sobald ein Besucher auf der Seite nach unten scrollt.

Dafür gibt es verschiedene Möglichkeiten, auf die wir im Folgenden näher eingehen. Aber das ist der Kern der Funktionsweise von Lazy Loading.

Welche Vorteile bietet Lazy Loading?

Das verzögerte Laden von Bildern bietet drei Hauptvorteile:

• Erhöhte Website-Geschwindigkeit
• Reduzierte Bandbreitennutzung
• Bessere Benutzererfahrung

Eine erhöhte Geschwindigkeit der Website ist normalerweise der Hauptgrund für die Implementierung von Lazy Loading. Indem Sie mit dem Rendern unnötiger Bilder warten, können Sie die Ladezeit Ihrer Seite verkürzen. Dies gilt insbesondere dann, wenn Sie viele Bilder auf einer Seite haben oder wenn Ihre Bilder groß sind.

Als nächstes kann Ihnen Lazy Loading dabei helfen, Bandbreite zu sparen. Wenn Besucher sich nie auf die Seite wagen, wird keine Bandbreite durch das Laden von Bildern verschwendet, die sie nie sehen werden.

Schließlich kann Lazy Loading Ihre Benutzererfahrung verbessern. Dies liegt daran, dass Besucher nicht warten müssen, bis alle Bilder auf einer Seite geladen sind, bevor sie mit Ihrer Website interagieren können.

Lädt WordPress standardmäßig verzögert?

Ja, ab WordPress 5.5 ist Lazy Loading standardmäßig automatisch bei der Installation aktiviert. Es gibt jedoch einige Möglichkeiten, das Erlebnis individuell anzupassen, die ziemlich einfach und intuitiv sind. Wir werden diese Methoden weiter unten ausführlicher besprechen.

Soll ich meine Bilder verzögert laden? Gibt es Nachteile?

In den meisten Fällen ist das verzögerte Laden Ihrer Bilder eine gute Idee, wenn Sie die Geschwindigkeit Ihrer Seite verbessern oder Bandbreite sparen möchten. Es sind jedoch auch einige potenzielle Nachteile zu berücksichtigen.

Layoutverschiebung

Wenn Sie Ihre Bilder zu langsam laden, kann sich das Layout Ihrer Seite verschieben. Wenn Sie beispielsweise eine Seitenleiste auf der rechten Seite Ihrer Seite haben und ein darin befindliches Bild verzögert laden, wird die Seitenleiste möglicherweise nach unten verschoben, um Platz zu schaffen. Dies kann für Ihre Besucher sehr verwirrend sein.

Als allgemeine Regel wird die Verwendung von Platzhaltern empfohlen, um dieses Problem zu vermeiden.

Möglicher SEO-Schaden

Wenn Sie es nicht richtig machen, kann das verzögerte Laden von Bildern dazu führen, dass Suchmaschinen wie Google Probleme bei der Indexierung haben. Wenn es um Rankings geht, kommt es auf den Inhalt an, und in diesem Fall könnten Sie wertvolle Brocken verlieren.

Ihre Bilder erscheinen möglicherweise nicht mehr in den Suchergebnissen und je nachdem, wie wichtig die Bilder im Verhältnis zum restlichen Seiteninhalt sind (z. B. Produktbilder für einen E-Commerce-Eintrag), könnte dies auch Ihr reguläres Suchranking beeinträchtigen.

Wenn Sie Lazy Loading jedoch richtig einrichten, stellt dies kein Problem dar. Wenn Sie kein erfahrener Entwickler sind, ist es daher die beste Vorgehensweise, ein Lazy-Loading-Plugin zu verwenden oder bei der standardmäßigen Lazy-Loading-Funktion von WordPress zu bleiben.

Plugin-Konflikte

Darüber hinaus kann Lazy Loading bei einigen WordPress-Plugins zu Problemen führen – etwa bei Plugins, die Bilder verwenden, um Vorschauen für soziale Medien zu erstellen.

Jedes Mal, wenn Sie Änderungen an Ihrer Website vornehmen, sollten Sie diese gründlich testen, um sicherzustellen, dass alles wie gewünscht funktioniert.

Und für den Fall, dass etwas schief geht, halten Sie für eine schnelle Wiederherstellung ein Backup Ihrer WordPress-Site bereit.

So aktivieren Sie Lazy Loading in WordPress

Lazy Loading ist jetzt in WordPress standardmäßig aktiviert. Wenn Sie keine moderne WordPress-Iteration verwenden (obwohl wir dies empfehlen) oder wenn Sie eine detailliertere Kontrolle über den Lazy-Loading-Prozess wünschen, können Sie dies mit einer von zwei verschiedenen Methoden tun: mithilfe eines Plugins oder durch Hinzufügen von Code zu Ihrem Grundstück.

1. Lazy Load mit einem Plugin

Wenn Sie kein erfahrener Entwickler sind, empfehlen wir die Verwendung eines Plugins, da jedes Mal, wenn Sie den Code Ihrer Website bearbeiten, das Risiko besteht, dass Probleme auftreten. Selbst wenn Sie Backups zur Hand haben, für den Fall, dass etwas kaputt geht, ist es möglicherweise dennoch am besten, einfach ein seriöses Plugin zu verwenden.

Jetpack Boost ist ein kostenloses Plugin, das Ihnen dabei hilft, die Leistung Ihrer Website zu messen und zu verbessern. Es bietet Funktionen wie:

• Zurückstellen von nicht unbedingt erforderlichem JavaScript
• Optimierung des CSS-Ladens
• Verzögertes Laden von Bildern
• Testen der Site-Performance

Um mit Jetpack Boost zu beginnen, laden Sie es kostenlos aus dem WordPress-Plugin-Verzeichnis herunter.

Oder gehen Sie in Ihrem WordPress-Dashboard zu Plugins → Neu hinzufügen, suchen Sie dann nach „Jetpack Boost“ und klicken Sie auf Jetzt installieren . Klicken Sie nach der Installation auf Aktivieren .

Gehen Sie als Nächstes zur neuen Dashboard-Menüoption mit dem Titel „Boost“ . Klicken Sie dann auf „Kostenlos starten“ .

Scrollen Sie auf der nächsten Seite nach unten zum großen Schalter mit der Aufschrift „Lazy Image Loading“ und schalten Sie ihn ein. Werfen Sie nun einen Blick auf Ihre Website und stellen Sie sicher, dass alles ordnungsgemäß gerendert wird und gut aussieht. Das ist es! Lazy Loading ist mit nur wenigen Klicks möglich.

Wenn Sie noch einen Schritt weiter gehen und das verzögerte Laden Ihrer Website anpassen möchten, können Sie dies mithilfe von Code-Snippets tun, die Sie Ihrer Datei „functions.php“ hinzufügen können. Oder Sie können sie mit einem Funktions-Plugin einfügen.

Hier sind nur einige Aufgaben, die Sie erledigen können:

1. Deaktivieren Sie Lazy Loading auf bestimmten Seiten
2. Legen Sie einen Platzhalter fest, der angezeigt wird, bis das Bild geladen wird
3. Deaktivieren Sie Lazy Loading für bestimmte Bilder
4. Deaktivieren Sie Lazy Loading für eine bestimmte CSS-Klasse

Wenn Sie beispielsweise eine CSS-Klasse vom Lazy-Loading-Prozess ausschließen möchten, würden Sie diesen Code verwenden:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Weitere Informationen finden Sie in der vollständigen Lazy-Loading-Dokumentation.

2. So laden Sie Bilder in WordPress ohne Plugin verzögert

Wie bereits erwähnt, aktiviert WordPress standardmäßig Lazy Loading für alle Bilder mit festgelegten Abmessungen. Sie müssen dazu nichts einschalten oder Code hinzufügen. Es kann jedoch vorkommen, dass Sie die Funktionsweise dieser Funktionalität anpassen möchten.

Angenommen, Sie möchten nicht, dass Vorlagenbilder einbezogen werden. Sie würden diesen Code zu Ihrer Datei „functions.php“ hinzufügen:

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Oder vielleicht möchten Sie sehr detailliert vorgehen und Lazy Loading für bestimmte Bilder deaktivieren. Sie können dies tun, indem Sie jedem Bild eine zusätzliche Bildklasse zuweisen, wenn es einer Seite oder einem Beitrag hinzugefügt wird, und diese Klasse dann dem folgenden Code in Ihrer Datei „functions.php“ hinzufügen:

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Um die Bildklasse „skip-lazy“ im obigen Beispiel zu einem Bild hinzuzufügen:

1. Fügen Sie das Bild zur Seite hinzu oder veröffentlichen Sie es über die Medienbibliothek.
2. Nachdem Sie das Bild hinzugefügt haben, finden Sie Ihre Bildeinstellungen. Dies kann unterschiedlich aussehen, je nachdem, ob Sie den Gutenberg Blocks-Editor, den klassischen Editor oder ein Site Builder-Plugin verwenden. Die Möglichkeit, eine neue CSS-Klasse hinzuzufügen, finden Sie normalerweise entweder im Bereich „Erweiterte Einstellungen“ (Gutenberg und klassische Editoren) oder unten in Ihren Bildeinstellungsoptionen (die meisten anderen Site-Builder).
3. Fügen Sie dem Bild die Klasse „skip-lazy“ hinzu und speichern Sie Ihr Update.

Weitere Informationen zu den Möglichkeiten finden Sie in der WordPress-Dokumentation.

Wie man Videos in WordPress verzögert lädt

Wenn Sie Ihre Videos verzögert laden möchten, können Sie dies tun, indem Sie dem Video selbst im Beitrag oder auf der Seite Code hinzufügen. Dieser Code sollte etwa so aussehen:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Häufig gestellte Fragen zum Lazy Loading in WordPress

Möchten Sie mehr über WordPress Lazy Loading erfahren? Nachfolgend haben wir einige häufig gestellte Fragen beantwortet:

Ist Lazy Loading und das Verzögern von Offscreen-Bildern dasselbe?

Das Zurückstellen von Offscreen-Bildern bedeutet, mit dem Laden der Bilder zu warten, bis der Rest des wichtigen, „above-the-fold“-Inhalts geladen ist. Es gibt mehrere Möglichkeiten, dies zu tun, aber WordPress-Sites verwenden normalerweise Lazy Loading.

Im Wesentlichen ist Lazy Loading eine Methode zum Verzögern von Offscreen-Bildern.

Kann ich Hintergrundbilder in WordPress verzögert laden?

Ja, Sie können Hintergrundbilder auch verzögert laden, wenn Sie möchten. Jetpack Boost aktiviert Lazy Loading für Hintergrundbilder. Je nachdem, wie Ihre Bilder eingerichtet sind, können jedoch möglicherweise nicht alle Bilder identifiziert werden. Wenn das Bild beispielsweise über die Eigenschaft „background:url“ geladen wird, liest das Plugin es nicht als Bild und ermöglicht daher kein verzögertes Laden dafür.

In dieser Situation können Sie ein Tool wie Lazy Loader verwenden, mit dem Sie die spezifischen Hintergrundbilder auswählen können, die Sie verzögert laden möchten.

Kann ich ein YouTube-Video verzögert laden?

Ja, du kannst! Fügen Sie dazu den folgenden Codeausschnitt von WPOrbit in die Datei „functions.php“ Ihres Themes ein. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie unsere Anleitung zum Zugriff und Bearbeiten der Datei „functions.php“ .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Hat Lazy Loading Auswirkungen auf die Suchmaschinenoptimierung?

Ja, Lazy Loading kann sich positiv auf Ihr Suchmaschinenranking auswirken. Google berücksichtigt die Website-Geschwindigkeit, wenn es entscheidet, wo Seiten in den Suchergebnissen ranken. Und da Lazy Loading die Leistung verbessert, kann es auch die Wahrnehmung Ihrer Website durch Google steigern.

Wenn Sie dies manuell tun, anstatt ein Lazy-Loading-Plugin zu verwenden, und einen Fehler machen, kann dies negative Auswirkungen auf die Suchmaschinenoptimierung haben, da die Fähigkeit von Suchmaschinen beeinträchtigt wird, Ihre Bilder zu erkennen.

Beeinträchtigt Lazy Loading das Benutzererlebnis?

Ja, Lazy Loading kann Ihr Benutzererlebnis verbessern, da es die Ladezeit Ihrer Website verkürzt und gleichzeitig sicherstellt, dass Besucher Ihre Inhalte sofort sehen können. Dies wiederum kann die Wahrnehmung Ihrer Marke verbessern.

Benötige ich ein Plugin, um meine Inhalte verzögert zu laden?

Nein, Sie benötigen kein Plugin, um Ihre Inhalte verzögert zu laden. Lazy Loading ist in WordPress standardmäßig aktiviert. Wenn Sie jedoch mehr Kontrolle über den verzögerten Ladevorgang wünschen, können Sie ein Plugin verwenden. Hier ist eine Auswahl der besten Lazy-Load-Plugins für WordPress.

Gibt es einen Nachteil beim verzögerten Laden von Inhalten?

Das verzögerte Laden von Inhalten hat nicht viele Nachteile. Es verbessert Ihre Geschwindigkeit, Benutzererfahrung und Suchmaschinen-Rankings. Allerdings kann es gelegentlich zu seltsamen Verschiebungen in Ihren Seitenlayouts kommen. Daher sollten Sie Ihre Website immer testen, nachdem Sie Lazy Loading aktiviert haben.

Muss ich alle meine Inhalte verzögert laden?

Nein, Sie müssen nicht alle Ihre Inhalte per Lazy Load laden. Sie können festlegen, dass nur bestimmte Elemente verzögert geladen werden, z. B. Bilder, Videos oder iFrames.

Was kann ich sonst noch tun, um die Ladegeschwindigkeit zu verbessern?

Neben Lazy Loading gibt es eine Reihe anderer Möglichkeiten, wie Sie die Geschwindigkeit Ihrer WordPress-Site verbessern können, darunter:

• Verwendung eines Content Delivery Network (CDN)
• Konzentrieren Sie sich darauf, die gleichen Dinge zu verbessern, die auch die Core Web Vitals verbessern.
• Optimieren Sie Ihre Bilder
• Browser-Caching aktivieren
• Ressourcen minimieren

Beschleunigen Sie Ihre Website mit WordPress Lazy Loading

Das verzögerte Laden Ihrer Bilder ist eine großartige Möglichkeit, die Leistung Ihrer Website zu optimieren und Ihr allgemeines Benutzererlebnis zu verbessern. Jetpack Boost bietet die bequemste und robusteste Möglichkeit, Lazy Loading zu ermöglichen und bietet gleichzeitig weitere leistungsstarke Geschwindigkeitstools. Bereit anzufangen? Holen Sie sich Jetpack Boost!