ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
No Result
View All Result
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Home WordPress Plugins

Die besten Lazy-Load-Plugins für WordPress

7 Monaten ago
in Plugins
Reading Time: 8 mins read
A A
0
Auf Facebook teilenAuf Twitter teilen

Bilder, Infografiken und ausgefallene Effekte sind hervorragende Hilfsmittel, um jede Art von Inhalt auf einer Website zu bewerben. Sie sind ein sicherer Blickfang und können die Essenz des Inhalts in einem Bild vermitteln. Kein Wunder, dass wir uns auf Bilder verlassen, um die Aufmerksamkeit der Leser zu erregen und die Benutzerinteraktion im Internet zu verbessern.

Auf der anderen Seite dauert es oft, bis Bilder auf einer Webseite geladen sind. Und wenn Sie eine langsame Verbindung haben, kann das Laden ewig dauern. Dies kann eine große Abschreckung für Benutzer sein, die sich wahrscheinlich von der Seite entfernen.

Haftungsausschluss: Themelocal ist ein Partner für eines oder mehrere der unten aufgeführten Produkte. Wenn Sie auf einen Link klicken und einen Kauf abschließen, können wir eine Provision auszahlen.

Wie können wir dafür sorgen, dass bildreiche Seiten schneller geladen werden?

Warum dauert das Laden von Bildern? Nun, wir können es so erklären – eine Webseite besteht aus vielen Elementen – Text, Bildern, Medien, Skript und mehr. Damit jedes Element geladen wird, stellt Ihr Browser eine Anfrage an die Website (sogenannte HTTP-Anfrage). Viele der Elemente, insbesondere Bilder, sind Byte-lastig und brauchen Zeit zum Laden. Normalerweise versuchen alle Elemente gleichzeitig zu laden und dies verzögert das Laden der gesamten Webseite.

Es ist logisch, dass der schnell geladene Inhalt zuerst im Browser angezeigt wird und die Aufmerksamkeit des Betrachters auf sich zieht. Verzögern Sie gleichzeitig das Laden der datenintensiven Bilder. Dieser Ansatz wird die Benutzer wahrscheinlich dazu bringen, zu warten, da sich auf dem Bildschirm etwas befindet, das ihre Aufmerksamkeit auf sich zieht.

Was ist Lazy Loading?

Wir können Bilder mit der Lazy-Loading-Technik verzögern – laden Sie zuerst nur den Text oder den ausgewählten Inhalt und lassen Sie Bilder oder langsame Ladeelemente verzögern. Das Laden von Bildern ist gestaffelt, so dass sich die Zeit bis zum ersten Byte für die Webseite verbessert. Wenn ein Benutzer nach unten scrollt, werden Bilder nacheinander abgerufen. Folglich wird die Anzahl der HTTP-Anfragen, die gleichzeitig den Server treffen, reduziert.

Bilder werden in einem Platzhalter platziert, um später geladen zu werden. Wenn die Bilder den Anzeigebereich erreichen, werden sie vom Server geholt. Sie erscheinen auf dem Bildschirm, wenn sie sich in den Bereich „above the fold“ bewegen. Bei unendlichem Scrollen wird Ajax verwendet, um mehr zu laden, wenn der Benutzer den unteren Bildschirmrand berührt.

Wie Lazy Loading helfen kann

Lazy Loading verkürzt die Ladezeiten. Eine schnellere Website ist gut für die Benutzererfahrung und Suchmaschinen. Es reduziert auch die Serverbandbreite, indem es nur Bilder lädt, wenn sie wirklich benötigt werden. Dies spart Bandbreite, sowohl auf der Serverseite als auch auf der Benutzerseite. Sie können Lazy Loading auf ausgewählte Seiten oder die gesamte Site anwenden.

Ein Nachteil von Lazy Loading besteht darin, dass Inhalte, die nach dem Folding kommen, von Suchmaschinen möglicherweise nicht gefunden werden. Suchmaschinen erkennen möglicherweise nicht unendlich scrollende Inhalte. Um diesen Nachteil zumindest teilweise zu überwinden, müssen wir URLs so strukturieren, dass sie von Suchmaschinen verarbeitet werden können. Dies kann die Platzhalter für Suchmaschinen sichtbarer machen, bis das Bild geladen wird.

Es gibt eine Reihe von Plugins, die dazu führen können, dass sie auf Ihrer WordPress-Website träge geladen werden. Schauen wir uns einige der beliebten Plugins an,

BJ Lazy Load

Um alle oder einige Ihrer Post-Bilder, Post-Thumbnails, Gravatar-Bilder und Inhalts-Iframes durch einen Platzhalter zu ersetzen, verwenden Sie BJ Lazy Load. Es kann auch Iframes ersetzen, und das bedeutet, dass Sie eingebettete Videos von YouTube und Vimeo träge laden können. Funktioniert auch für Text-Widgets. Mit einem einfachen Filter können die Bilder und Iframes in Ihrem Design verzögert werden.

bj-lazy-load

Damit das Plugin auf Ihrer Website funktioniert, laden Sie es einfach herunter, installieren und aktivieren Sie es. Sie können dann die Einstellungen aufrufen und herausfinden, welche Elemente beim Laden verzögert werden sollen. Fügen Sie Ihr eigenes Platzhalterbild hinzu, wenn Sie möchten.

Dieses Plugin verwendet JavaScript. Dadurch sieht ein Besucher ohne JavaScript die Originalelemente ohne verzögertes Laden.

Lazy Load

Ein häufig verwendetes Plugin zum Hinzufügen von Lazy Loading zu WordPress-Websites. Lazy Load ist ein einfaches Plugin zum Installieren und Aktivieren. Sie können es mit Zuversicht ausprobieren, da Sie wissen, dass es mit einer Mischung aus Code vom WordPress.com VIP-Team von Automattic, dem TechCrunch 2011 Redesign-Team und Jake Goldman (10up LLC) entwickelt wurde.

faules Laden

Außerdem müssen Sie nach der Aktivierung nichts weiter tun. Wenn Sie jedoch einige Änderungen vornehmen möchten, können Sie dies tun, indem Sie die php-Datei bearbeiten. Die Autoren haben einige hilfreiche Code-Schnipsel bereitgestellt, auf die Sie zum Ändern des Platzhalterbilds, zum Lazy Loading von Bildern in Ihrem Theme oder zum Lazy Loading aller Ihrer Bilder durch Ausgabepufferung zurückgreifen können.

Ajax Mehr laden – Unendliches Scrollen

Mehr laden eignet sich für das verzögerte Laden auf langen Webseiten, die durch Herunterscrollen angezeigt werden. Verwenden Sie es für Lazy Loading Posts, benutzerdefinierte Posttypen, einzelne Posts, Seiten und Kommentare.

ajax-load-mehr

Darüber hinaus können Sie den Shortcode Builder verwenden, um benutzerdefinierte WordPress-Abfragen zu gestalten. Fügen Sie den generierten Shortcode zu den Seiten hinzu, die Sie über den Inhaltseditor auswählen, oder direkt zu Vorlagendateien. Sehen Sie sich die Seite vom Frontend aus an und aktivieren Sie Ajax Load More, das den Inhalt lädt, auch wenn Sie nach unten scrollen.

Darüber hinaus funktioniert Ajax Load More gut mit WooCommerce und Easy Digital Downloads, sodass es für lange Produktseiten geeignet ist.

Lazy Load für Videos

Wenn Sie eine Website mit mehreren eingebetteten Videos betreiben, ist diese hier genau das Richtige für Sie. Lazy Load für Videos ersetzt Ihre eingebetteten Videos durch ein anklickbares Bild. Die Webseite lädt keine Videos, sobald ein Besucher die Seite aufruft. Die Videos werden erst geladen, wenn das Bild angeklickt wird.

lazy-load-for-videos

Das Plugin überprüft eingebettete Videos und ersetzt alle externen Dateien durch ein statisches Bild und eine Wiedergabeschaltfläche. Die Videos werden erst geladen, wenn ein Besucher auf die Schaltfläche klickt. Dies kann sich erheblich auf die Ladegeschwindigkeit der Seite auswirken, insbesondere wenn viele Videos darauf enthalten sind. Und für den Benutzer ist es eine reibungslose Erfahrung.

a3 Lazy Load

Da Websites zunehmend auf Handheld-Geräten angezeigt werden, müssen sie auch für ein mobiles Erlebnis optimiert werden. a3 Lazy Load wurde entwickelt, um die Website-Geschwindigkeit auf Mobilgeräten zu verbessern, indem das Laden ausgewählter Seitenelemente verzögert wird. Die Elemente können in den Admin-Einstellungen ausgewählt werden.

a3-Lazy-Load

Das Plugin bietet Unterstützung für Inhalte in iframes, die an einer beliebigen Stelle im Inhalt oder in den Widgets platziert werden. In WordPress eingebettete Medien, Facebook Like-Boxen mit Profilen, Like-Buttons, Empfehlen-Buttons, Google+ Profile, Google Maps und andere ähnliche Medieninhalte können alle für das Lazy Loading ausgewählt werden.

Darüber hinaus gibt es keine Kollision mit Accelerated Mobile Pages (AMP) – Lazy Load wird nicht auf die . angewendet /Ampere Endpunkt. Nur wenn der Browser eine URL ohne /Ampere diese faule Last kommt ins Spiel.

WP YouTube Lyte

Wenn Ihre Website stark von YouTube profitiert, WP YouTube Lyte kann dir gut nützen. Es fügt „Lite YouTube Embeds“ ein, die ähnlich wie YouTube-Einbettungen aussehen. Aber die Videos werden erst aufgerufen, wenn sie angeklickt werden.

wp-youtube-lyte

Damit dieses Plugin auf Ihrer Website funktioniert, ist eine Registrierung bei YouTube als neuer Bewerber erforderlich. Das Plugin verwendet die YouTube-API jedes Videos, um es aus dem YouTube-Repository abzurufen. Um diese API auf Ihrer Website verwenden zu können, muss der Ihnen von YouTube bereitgestellte API-Schlüssel aktiviert werden. Der Serverschlüssel, den Sie von YouTube erhalten, muss ausgefüllt werden.

Nachdem Sie die YouTube-API-Schlüssel aktiviert haben, passen Sie die Einstellungen an, um die Abmessungen und die Position des Players nach Ihren Wünschen zu gestalten.

Ladeseite mit Ladebildschirm

Mit Ladeseite mit Ladebildschirm, können Benutzer eine Vorstellung von der Wartezeit haben, bevor die Seite geladen wird. Das Plugin zeigt einen Bildschirm an, der den Ladefortschritt als Prozentsatz der Fertigstellung anzeigt.

Lade-Seite-mit-Lade-Bildschirm

Wählen Sie aus, ob der Fortschritt nur auf der Startseite oder auf allen Seiten angezeigt werden soll. Bei der kostenlosen Version wird nur ein Fortschrittsbalken zur Anzeige verwendet. Für weitere Optionen müssen Sie auf upgraden die Premium-Version. Außerdem wendet die Premium-Version Lazy Loading auf Bilder an.

Einige weitere Plugins,

  • Mehr laden ist eine hilfreiche Funktion bei langen Produktseiten. Diese sind häufig auf WooCommerce-Websites zu finden. WooCommerce Infinite Scroll und Ajax-Paginierung wandelt die Standardprodukt-Paginierung in unendliches Scrollen oder Ajax-Paginierung um. Für den Nutzer bedeutet dies, dass er nicht immer wieder auf „Nächste Seite“ klicken muss. Wenn ein Benutzer das Ende der Seite erreicht, wird der nächste Satz von Produkten automatisch abgerufen und geladen. Für mobile Geräte stehen verschiedene Paginierungsoptionen zur Verfügung.
  • Mehr Produkte für WooCommerce laden kann hinzugefügt werden, um mehr Produkte von der nächsten Seite mit Ajax mit unendlichem Scrollen oder einer Schaltfläche „Mehr laden“ zu laden. Für Animationseffekte und Anpassung, eine Pro-Version ist verfügbar.
  • Bilder Lazyload und Diashow – Mit diesem Plugin können Sie jedem Bild einen Lightbox-Effekt oder einen benutzerdefinierten Galerieeffekt hinzufügen sowie das Laden verzögern. Es kommt mit 3 Effekten, und Sie können auch Ihre eigenen hinzufügen.
  • Rocket Lazy Load – Ist extrem leicht (weniger als 2kb). Es injiziert ein kleines bisschen Javascript in den Header Ihrer Site, das auf Thumbnails, allen Bildern in einem Beitrag, in einem Widget-Text oder Avataren funktioniert. Es verzögert Bilder auf der gesamten Website, ohne eine JavaScript-Bibliothek wie jQuery zu verwenden.
  • Verrückte Faulheit – Erfüllt die gleiche Aufgabe und ist dabei leicht, einfach zu installieren und zu verwenden und erfordert keine Einstellung. Jedes Bild kann ausgeschlossen werden, indem dem Bild einfach ein Attribut hinzugefügt wird.
  • Lazy Load XT – Ist ein schnelles Plugin, das für Bilder, Frames, YouTube-Videos und Vimeo funktioniert. Es ist vollständig anpassbar.

Viele Slider wie Royal Slider und WP Elektrokarussell Integrieren Sie auch das Lazy-Load-Prinzip, um Bilder zu laden. Event Booking Pro unterstützt einen Lazy Loading-Kalender.

Abschließend

Lazy Loading ist eine effektive Methode zur Verbesserung der Website-Geschwindigkeit, insbesondere auf Websites, die eine Reihe von Bildern und Videos enthalten. Es gibt viele andere Methoden, wie Bildoptimierung und Caching, die ebenfalls dazu beitragen können, die Website-Geschwindigkeit zu verbessern. Wählen Sie das Plugin, das gut zu Ihrer Website passt, und optimieren Sie die Leistung, um sie für den Benutzer zu verbessern.

Share26Tweet16Send
Previous Post

5 Arten von WooCommerce-Problemen, auf die Sie achten sollten

Next Post

So aktualisieren Sie Ihr ThemeForest WordPress-Theme

Related Posts

Wie man

iOS 16: So ändern Sie die Uhr des Sperrbildschirms in arabisch-indisch

3 Stunden ago
Wie man

So entkoppeln Sie die Apple Watch vom iPhone (iOS 15 & watchOS 8 Update)

4 Stunden ago
Technik

Die Ikea AR App löscht dein abgenutztes Sofa, damit du sehen kannst, wie ein neues aussieht

7 Stunden ago
Load More
Next Post

So aktualisieren Sie Ihr ThemeForest WordPress-Theme

Schreibe einen Kommentar Antworten abbrechen

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

EMPFOHLEN

So löschen Sie abgelaufene Abonnements auf dem iPhone

5 Monaten ago

Epson EcoTank ET-3850 im Test

3 Monaten ago

Apple Watch-Symbole und -Symbole: Meistere deine Apple Watch 7 oder frühere Modelle

6 Monaten ago

So gewinnen Sie jedes Mal Apple Watch-Wettbewerbe

4 Monaten ago
ThemeLocal – Blog-Tipps, die wie von Zauberhand funktionieren

Wir helfen klugen Unternehmern, ihre Blogs in profitable Geschäfte zu verwandeln. Wir sind ein preisgekrönter Blog, der seit 2020 Bloggern und Unternehmern hilft.

Folge uns

Neueste Nachrichten

Tim Cook gibt einen wichtigen Hinweis auf Apples AR-Zukunft

Juni 28, 2022

Energizer Recharge Power Plus AAA 700mAh im Test

Juni 28, 2022
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

© 2022 ThemeLocal. Tous droits réservés.

No Result
View All Result
  • Bloggen
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • E-Mail Marketing
  • Monetarisierung
  • SEO
  • Soziale Netzwerke
  • Tutorials
  • Bewertungen
  • Tipps
  • Sicherheit
  • Software und Dienste
  • Verkehrserzeugung
  • Anfängerleitfaden
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.