Springe zum Hauptinhalt

So verwenden Sie Lazy Load zum Laden von Bildern in WordPress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie lernen, wie Sie mit Lazy Loading Bilder in WordPress laden?

Lazy Load ist eine Technik, die es Ihrer Website ermöglicht, nur Bilder zu laden, wenn ein Benutzer zu einem bestimmten Bild scrollt, wodurch die Ladezeit der Website reduziert und die Leistung der Website verbessert wird.

Die beliebtesten Websites mit vielen Bildern verwenden Lazy Load, um die Geschwindigkeit und Leistung der Website zu erhöhen.

In diesem Artikel zeigen wir Ihnen, wie Sie mit Lazy Load Bilder in WordPress laden.

Warum Lazy Load Bilder in WordPress?

Lazy Loading Ihrer Bilder in WordPress kann Ihre Website beschleunigen und eine beste Benutzererfahrung.

Niemand mag langsame Websites. Tatsächlich ergab eine Leistungsstudie, dass eine einzige Verzögerung der Seitenladezeit um eine Sekunde zu 7 % weniger Conversions, 11 % weniger Seitenaufrufen und 16 % geringerer Kundenzufriedenheit führt.

Verwenden Sie Lazy Load, um Bilder zu laden

Suchmaschinen wie Google mögen auch keine langsam ladenden Websites. Aus diesem Grund ranken schnellere Websites in den Suchergebnissen höher.

Im Vergleich zu anderen Webelementen dauert das Laden von Bildern auf Ihrer Website am längsten. Wenn Sie Ihren Beiträgen viele Bilder hinzufügen, erhöht jedes Bild die Ladezeit Ihrer Seite.

Eine Möglichkeit, mit dieser Situation umzugehen, ist die Verwendung von a CDN-Dienst. Ein CDN ermöglicht es einem Benutzer, Bilder von einem Webserver in seiner Nähe herunterzuladen und die Ladegeschwindigkeit der Website zu reduzieren.

Ihre Bilder werden jedoch trotzdem geladen und wirken sich auf die Gesamtladezeit der Seite aus. Um dieses Problem zu beheben, können Sie das Laden von Bildern verzögern, indem Sie Lazy Loading oder Lazy Load auf Ihrer Website implementieren.

Wie funktioniert Lazy Loading von Bildern?

Anstatt alle Ihre Bilder auf einmal zu laden, lädt Lazy Loading nur die Bilder herunter, die auf dem Bildschirm des Benutzers sichtbar sind. Es ersetzt alle anderen Bilder durch ein Platzhalterbild oder einen leeren Raum.

Wenn ein Benutzer nach unten scrollt, lädt Ihre Website Bilder, die im Anzeigebereich des Browsers sichtbar sind.

Lazy Loading kann für Ihr WordPress-Blog sehr vorteilhaft sein.

  • Es reduziert die anfängliche Ladezeit der Webseite, sodass Benutzer Ihre Website schneller sehen
  • Es spart Bandbreite, indem zum Zeitpunkt der Anzeige nur Bilder bereitgestellt werden, und kann Hosting-Kosten sparen

Mit der Veröffentlichung von WordPress 5.5 wurde Lazy Loading als Standardfunktion hinzugefügt.

Wenn Sie jedoch die Art und Weise anpassen möchten, wie Ihre Bilder träge geladen und Hintergrundbilder träge geladen werden, müssen Sie ein WordPress-Plugin verwenden.

Hinweis: Während Lazy Loading oder Lazy Load dazu beitragen, die Ladegeschwindigkeit der Website zu verbessern, sollten Sie Bilder immer für das Web optimieren, bevor Sie sie auf WordPress hochladen, um eine maximale Leistung zu erzielen.

Wir werden zwei verschiedene WordPress-Plugins teilen, mit denen Sie auf einfache Weise das Lazy Loading von WordPress-Bildern einrichten können.

Methode 1. Lazy Load Images in WordPress mit WP Rocket

Wir empfehlen Ihnen, das Plugin zu verwenden WP Rakete um Bilder träge in WordPress zu laden. Es ist das beste WordPress-Caching-Plugin auf dem Markt und ermöglicht Ihnen das einfache Laden von Bildern.

Abgesehen davon ist es ein sehr leistungsstarkes Plugin, mit dem Sie die Geschwindigkeit Ihrer Website optimieren können, ohne die komplexen Fachbegriffe zu kennen.

Nach der Installation und Aktivierung werden alle empfohlenen Standard-Caching-Einstellungen Ihre WordPress-Website erheblich beschleunigen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Um das Lazy Loading des Bildes zu aktivieren, müssen Sie nur ein paar Kontrollkästchen aktivieren. Sie können sogar Lazy Loading für Videos aktivieren, was die Geschwindigkeit Ihrer Website weiter verbessert.

Verwenden Sie Lazy Load, um Bilder zu laden

Methode 2. Lazy Load Images in WordPress mit Optimole

Diese Methode verwendet das kostenlose Plugin Optimole. Es ist eines der besten WordPress-Bildkomprimierungs-Plugins und ermöglicht Ihnen das einfache Laden von Bildern.

Wenn Sie mehr als 5 Besucher pro Monat haben, benötigen Sie die Premium-Version.

Gehen Sie bei der Aktivierung zu Medien »Optimole, Dann melden Sie sich für einen API-Schlüssel an.

Klicken Sie einfach auf die Schaltfläche API-Schlüssel registrieren und per E-Mail sendenUnd es wird Ihnen per E-Mail zugesendet.

Geben Sie dann Ihren API-Schlüssel ein und klicken Sie auf " Mit OptiMole-Dienst verbinden ".

Danach klicken Sie auf die Registerkarte " Einstellungen ".

Hier können Sie sicherstellen, dass die " Skalieren von Bildern & Lazy Load" ist aktiviert. Dadurch werden Bilder basierend auf der Bildschirmgröße Ihres Besuchers generiert und die Ladegeschwindigkeit verbessert.

Klicken Sie dann auf den Menüpunkt " Erweitert »Und wählen Sie «Lazyload».

Auf diesem Bildschirm gibt es verschiedene Einstellungen, mit denen Sie anpassen können, wie Ihre Bilder träge geladen werden.

Zunächst können Sie die " Zuerst ausschließen von Bildern von Lazyload ". Dies verhindert die ersten Bilder von Ihrem Artikel oder Seiten um die faule Last zu verwenden.

Sie können diese Option auf 0 setzen, wenn jedes Bild träge geladen werden soll.

Dann können Sie die Option " Bilder skalieren ".

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Dadurch werden die Bilder an die Bildschirmgröße des Besuchers angepasst und Ihre Seite wird schneller geladen.

Danach können Sie die Einstellung " Lazyload für Hintergrundbilder aktivieren ".

Dadurch werden Ihre Hintergrundbilder träge geladen, die einige der größeren Bilder auf Ihrer Website sein können.

Eine weitere Einstellung, die Sie aktivieren können, ist das Lazy Loading von eingebetteten Videos und Iframes. Wenn Sie viele eingebettete Videoinhalte haben, sollten Sie diese Einstellung aktivieren.

Dadurch wird ein Platzhalterbild anstelle des Videos geladen. Wenn Sie darauf klicken, wird das vollständige Video geladen.

Sie können diese Einstellungen weiterhin anpassen und sehen, was für Ihre Website und Bilder am besten funktioniert.

Bevor Sie die Plugin-Einstellungen verlassen, klicken Sie unbedingt auf die Schaltfläche " Änderungen speichern ".

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. ARMember

ARMember ist ein WordPress-Plugin zum Schutz von Inhalten. Es ist eine einzigartige Lösung, mit der Sie Abonnements auf jeder Website verkaufen können. Es verfügt über eine Reihe von Tools, mit denen der Inhalt vollständig oder teilweise geschützt werden kann.

ARMember WordPress-Mitgliedschafts-Plugin

Ein weiteres Merkmal ist die Tatsache, dass es eine kostenlose Option bietet, die in Bezug auf die Funktionalität etwas eingeschränkt ist. Apropos Funktionen, dieses leistungsstarke WordPress-Plugin bietet unter anderem:

Die Möglichkeit, Inhalte zu planen, Unterstützung für mehrere Abonnements, einfache Einrichtung, Migration zwischen Abonnements, WooCommerce-Unterstützung, verschiedene Formularvorlagen und mehr.

Es ist auch eine Referenz in dieser Nische.

Download | Demo | Web-Hosting 

2. Steueranzeige nach Land für WooCommerce

Steueranzeige nach Ländern für WooCommerce ist ein Plugin, mit dem Sie die Preise von Produkten mit oder ohne Steuern je nach Land des Besuchers anzeigen können. Außerdem können Sie das Rechnungsland des Besuchers vorab auswählen. Steuer Anzeige von Land für WooCommerce

Denken Sie daran, dass Kunden manchmal aufgrund der unterschiedlichen Währungen verwirrt sein können und wenn dies Steuern beinhaltet, ist dies sogar noch komplizierter. Mit der Steueranzeige nach Land können Sie diese Hindernisse beseitigen und den Kaufprozess vereinfachen.

Download | DemoWeb-Hosting

3. Slick Popup Pro

Slick Popup Pro ist ein ziemlich einfaches und leichtes WordPress-Plugin, das alle vom Plugin erstellten Formulare konvertiert Kontaktformular 7 in einem Popup. Sie verwendet das Formular und konvertiert es in ein schönes und perfekt ansprechendes Popup.WordPress Popup-Plugin Slick Popup Pro

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Das Popup-Formular kann verschiedene Verwendungszwecke haben, darunter: ein Informationssammlungsformular, a Kontaktformular, ein Anmeldeformular, ein Angebotsformular, ein Vorschlags- / Beschwerdeformular und andere.

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Voila! Das war's für dieses Tutorial. Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder in WordPress träge laden. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...  

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben