Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man Bilder in WordPress ganz einfach „Lazy Load“ (2 Wege)

Niemand möchte warten, bis eine Seite langsam geladen ist, z. B. wenn ein Blog-Beitrag viele Bilder enthält. Auch wenn sie atemberaubend aussehen, kann die Wartezeit, bis sie angezeigt werden, für Ihre Besucher frustrierend sein.

Hier kann „Lazy Loading“ helfen. Dabei handelt es sich um einen cleveren Trick, bei dem Bilder nur dann geladen werden, wenn sie benötigt werden. Anstatt jedes Bild auf einer Seite auf einmal zu laden, wartet Ihre Website, bis ein Besucher nach unten scrollt, wo ein Bild erscheinen soll.

Das bedeutet schnellere Ladezeiten der Seiten, zufriedenere Besucher und sogar einen Schub für die Suchmaschinenoptimierung Ihrer Website.

Das Beste daran ist, dass das Hinzufügen von „Lazy Loading“ zu Ihrer WordPress Website einfacher ist, als Sie denken. In diesem Artikel führen wir Sie durch den Prozess, damit Sie eine schnellere, effizientere Website genießen können.

How to Easily Lazy Load Images in WordPress

Warum Lazy Load Bilder in WordPress?

Lazy Loading WordPress-Bilder können Ihre Website beschleunigen und dem Benutzer ein besseres Erlebnis bieten.

Niemand mag langsame Websites. Eine Studie zur Website-Performance hat ergeben, dass eine Verzögerung von 1 Sekunde bei der Seitenladezeit zu 7 % weniger Konversionen, 11 % weniger Seitenaufrufen und einem Rückgang der Kundenzufriedenheit um 16 % führt.

Strangeloop case study

Auch Suchmaschinen wie Google mögen keine langsam ladenden Websites. Deshalb werden schnellere Websites in den Suchergebnissen höher eingestuft.

Bilder benötigen im Vergleich zu anderen Webelementen die meiste Zeit, um auf Ihrer WordPress-Website zu laden. Wenn Sie viele Bilder zu Ihren Artikeln hinzufügen, erhöht jedes Bild die Ladezeit Ihrer Seite.

Eine Möglichkeit, mit dieser Situation umzugehen, ist die Nutzung eines CDN-Dienstes wie BunnyCDN. Mit einem CDN können Benutzer Bilder von einem Webserver in ihrer Nähe herunterladen und die Ladegeschwindigkeit der Website verringern.

Ihre Bilder werden jedoch trotzdem geladen und beeinträchtigen die Ladezeit der Seite insgesamt. Um dieses Problem zu umgehen, können Sie das Laden von Bildern verzögern, indem Sie „Lazy Load“ auf Ihrer Website implementieren.

Wie funktioniert das faule Laden von Bildern?

Anstatt alle Bilder auf einmal zu laden, werden beim „Lazy Loading“ nur die Bilder heruntergeladen, die auf dem Bildschirm des Nutzers sichtbar sind. Alle anderen Bilder werden durch ein Platzhalterbild oder Leerraum ersetzt.

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

Lazy Loading kann für Ihren WordPress-Blog sehr vorteilhaft sein:

  • Es reduziert die anfängliche Ladezeit der Webseite, so dass die Nutzer Ihre Website schneller sehen.
  • Es spart Bandbreite, indem es nur Bilder bereitstellt, die auch angesehen werden, wodurch Sie bei den WordPress-Hostingkosten Geld sparen können.

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

Wenn Sie jedoch die Art und Weise, wie Ihre Bilder „lazy“ geladen werden, anpassen und auch Hintergrundbilder „lazy“ laden möchten, müssen Sie ein WordPress-Plugin verwenden.

Schauen wir uns an, wie man Bilder in WordPress mit Hilfe von zwei verschiedenen Plugins verzögert laden kann. Sie können die Links unten verwenden, um direkt zu der Methode zu gelangen, die Sie verwenden möchten:

Methode 1: Lazy Load Bilder in WordPress mit WP Rocket

Wir empfehlen die Verwendung des WP Rocket-Plugins für das Lazy Loading von Bildern in WordPress. Es ist das beste WordPress-Caching-Plugin auf dem Markt, mit dem Sie einfach das Lazy Loading von Bildern aktivieren können.

Abgesehen davon ist es ein sehr leistungsfähiges Plugin, das Ihnen hilft, Ihre Seitengeschwindigkeit zu optimieren, ohne komplexe technische Begriffe zu kennen oder Experteneinstellungen zu konfigurieren.

Alle standardmäßig empfohlenen Caching-Einstellungen beschleunigen Ihre WordPress-Website erheblich.

Als Erstes müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Um das „Lazy Loading“ für Bilder zu aktivieren, müssen Sie nur ein paar Kästchen ankreuzen. Sie können sogar das „Lazy Loading“ für Videos aktivieren, was die Geschwindigkeit Ihrer Website noch weiter verbessert.

Alles, was Sie tun müssen, ist, in Ihrem WordPress-Dashboard zu Einstellungen “ WP Rocket zu gehen und auf die Registerkarte „Medien“ zu klicken. Dann können Sie zum Abschnitt „LazyLoad“ scrollen und die Kästchen neben „Für Bilder aktivieren“ und „Für Iframes und Videos aktivieren“ ankreuzen.

Enabling Lazyload in WP Rocket

Weitere Einzelheiten finden Sie in unserer Anleitung zur korrekten Installation und Einrichtung von WP Rocket in WordPress.

Hinweis: Wenn Sie Siteground als Ihren WordPress-Hosting-Provider verwenden, können Sie das kostenlose SiteGround Optimizer-Plugin verwenden, das ähnliche Funktionen für träges Laden bietet.

Methode 2: Lazy Load Bilder in WordPress mit Optimole

Diese Methode verwendet das kostenlose Optimole-Plugin. Es ist eines der besten WordPress-Plugins für die Bildkomprimierung, mit dem Sie das „Lazy Loading“ von Bildern leicht aktivieren können.

Wenn Sie mehr als 5.000 Besucher pro Monat haben, benötigen Sie die Premium-Version von Optimole. Weitere Einzelheiten finden Sie in unserem vollständigen Optimole-Test.

Zunächst müssen Sie das Optimole-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung wird ein Bildschirm angezeigt, auf dem Sie aufgefordert werden, sich für einen API-Schlüssel zu registrieren. Sie können diesen Bildschirm auch finden, indem Sie im Verwaltungsmenü zu Optimole navigieren.

Sign Up for an Optimole API Key

Vergewissern Sie sich, dass die angegebene E-Mail-Adresse korrekt ist, und klicken Sie dann auf die Schaltfläche „Create & connect your account“. Wenn Sie bereits ein Nutzer sind, können Sie auch einfach auf die Schaltfläche „Ich habe bereits einen API-Schlüssel“ klicken.

Es kann sein, dass Sie ein paar Sekunden warten müssen, während das Plugin eine Verbindung zu Optimole herstellt. Danach wird das Plugin automatisch damit beginnen, Ihre Bilder zu optimieren, so dass Ihre Besucher nun die besten Bilder für ihre Geräte sehen.

Während dies geschieht, können Sie auf die Registerkarte „Einstellungen“ klicken, um die Ladeverzögerung zu konfigurieren.

Hier müssen Sie sicherstellen, dass die Einstellung „Bilder skalieren und & Lazy load“ aktiviert ist. Dadurch werden Bilder auf der Grundlage der Bildschirmgröße Ihrer Besucher generiert und die Ladegeschwindigkeit verbessert.

Make Sure Optimole's Lazyload Setting Is Enabled

Klicken Sie anschließend auf die Menüoption „Erweitert“ und wählen Sie „Lazyload“. Auf diesem Bildschirm gibt es einige verschiedene Einstellungen, mit denen Sie festlegen können, wie Ihre Bilder langsam geladen werden sollen.

Zunächst können Sie die Einstellung „Die erste Anzahl von Bildern vom Lazyload ausschließen“ anpassen. Dadurch werden die Bilder am Anfang Ihrer Beiträge oder Seiten nicht mehr mit Verzögerung geladen, so dass die Bilder oberhalb der Falz immer angezeigt werden.

Optimole's Advanced Lazyload Settings

Sie können diesen Wert auf 0 setzen, wenn Sie möchten, dass jedes Bild mit Verzögerung geladen wird.

In Optimole gibt es noch einige andere erweiterte Einstellungen für das faule Laden, die Sie überprüfen können. Diese Einstellungen sind standardmäßig aktiviert.

Die erste ist die Einstellung „Bilder skalieren“. Damit werden die Bilder auf die Bildschirmgröße des Besuchers skaliert und Ihre Seite wird schneller geladen.

Further Advanced Lazyload Settings in Optimole

Danach sehen Sie die Einstellung „Lazyload für Hintergrundbilder aktivieren“. Dadurch werden Ihre Hintergrundbilder, die die größten Bilder auf Ihrer Website sein können, mit Verzögerung geladen.

Eine weitere Einstellung ist das träge Laden eingebetteter Videos und Iframes. Wenn Sie viele eingebettete Videos haben, dann sollten Sie diese Einstellung aktiviert lassen. Es wird ein Platzhalterbild anstelle des Videos geladen. Wenn der Platzhalter angeklickt wird, wird das vollständige Video geladen.

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

Bevor Sie die Plugin-Einstellungen verlassen, klicken Sie bitte auf die Schaltfläche „Änderungen speichern“ am unteren Rand der Seite.

Bonustipps zur Optimierung Ihrer WordPress-Bilder

Obwohl Lazy Loading dazu beiträgt, die Ladegeschwindigkeit der Website zu verbessern, gibt es noch einige andere Möglichkeiten, Ihre WordPress-Bilder für die beste Leistung zu optimieren.

Wir empfehlen zum Beispiel, Ihre Bilder vor dem Hochladen auf Ihre Website mit einem Tool wie TinyPNG oder JPEGmini zu komprimieren. Alternativ können Sie auch ein automatisiertes Bildkomprimierungs-Plugin wie Optimole oder EWWW Image Optimizer verwenden.

Es ist auch wichtig, die richtige WordPress-Bildgröße und das richtige Dateiformat für Ihre Bilder zu wählen. JPEGs eignen sich am besten für Fotos oder Bilder mit vielen Farben, PNGs sind für einfache oder transparente Bilder geeignet und GIFs sind nur für animierte Bilder geeignet.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Bilder in WordPress verzögert lädt. Vielleicht interessiert Sie auch unser Tutorial auf , wie Sie Bilder ohne Qualitätsverlust für das Web optimieren können, und unsere Expertenauswahl der besten Plugins für den Upload von Dateien für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

18 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dick Sijtsma

    Hi there,

    during the process of lazyloading (I’m using WP Rocket) there is a short time a placeholder showing for the images. In my situation (Google Chrome) this placeholder has a purple color. Is there a way to influence this color? Or is this a browsersetting?
    Thanks!

    • WPBeginner Support

      You would want to check with WP Rocket for their up to date method for modifying their placeholder.

      Admin

      • Dick Sijtsma

        Thanks!
        But it was Theme related. I found a setting for background color of the image (in Elementor). This color was shown during the lazy-load. So now i know how to change that color. Thanks.

  3. Jiří Vaněk

    Do you have experience with how Lazy Load affects user experience and other Google metrics? Not everyone recommends lazy loading precisely because it can appear unnatural on a website in the long run.

    • WPBeginner Support

      It would depend on how it is implemented for how it affects the user experience and Google metrics.

      Admin

  4. Kunj Bihari

    Wordpress already provide „lazyload“ so Why we have to use any lazyload plugin?

  5. Suzanne

    Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!

    • WPBeginner Support

      Awesome! Glad the plugin could help your site :)

      Admin

  6. Piotr

    Is that possible to creates a group of photos that will get lazy-loaded?

    Example: I have 30 photos and I want to lazy load first 10, when user keeps scrolling- I download another 10 and so on..

  7. daus

    can i combine BJ Lazy Load and photon jetpack?

  8. Naveen

    My site was having many issues and I have learned a lot here which has helped me to grow my blog.

    Many Thanks

  9. Franklin

    Thanks for sharing this. I didn’t even think of getting a plugin for lazy images, and I probably will be getting this later. :)

  10. Alun Price

    I’d love to implement a lazy loader on my website but I’ve heard that they can negatively impact on SEO – is this true????

  11. Dr.Amrita Basu

    Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings

  12. Fahad Khan

    i HAVE JETPACK AS WELL AS CLOUDFLARE APPLIED ON MY WEBSITE, DO I STILL NEED THIS PLUGIN ?

  13. Nagarjun

    Thanks for the advice! Bj Lazy Load works like a charm!

  14. Luke Cavanagh

    Rocket Lazy Load also works very well.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.