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.
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.
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.
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.
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.
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.
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.
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.
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.
