Online Marketing, Gadgets, Affiliate, Verdienen Sie Geld mit Ihren Blogs

So verschieben Sie Offscreen-Bilder (mit und ohne …)

Hinweis: Der folgende Artikel hilft Ihnen dabei: So verschieben Sie Offscreen-Bilder (mit und ohne …)

So verschieben Sie Offscreen-Bilder (mit und ohne ...)

Möchten Sie eine leistungsstarke Website? Ein übersehener Aspekt ist normalerweise die Art und Weise, wie die Seiten einer Website geladen werden.

Stell dir das vor: Sie haben eine schöne Website oder einen Shop, der aber langsam lädt. Was wird passieren?

Nun, Statistiken zeigen, dass die Leute abspringen und wahrscheinlich nie wieder in Ihr Geschäft zurückkehren.

Eine schnelle Website wird sich für Ihr Unternehmen auf jeden Fall auszahlen. Eine Möglichkeit, die Seitengeschwindigkeit zu erhöhen, besteht darin, Bilder außerhalb des Bildschirms zu verschieben. In diesem Artikel erfahren wir alles über diese Website-Optimierungstechnik – was sie ist, welche Vorteile sie hat, wie sie durchgeführt wird usw.

Lass uns anfangen…

Was ist Offscreen-Bildverzögerung?

Die einfachste Erklärung: Es werden keine Bilder auf eine Webseite geladen, die sich noch nicht im Ansichtsfenster des Besuchers befinden.

Das Ansichtsfenster ist der geladene Bereich, der sich jeweils im Sichtfeld des Betrachters befindet. Unabhängig davon, ob Ihre Besucher über Laptops oder Mobilgeräte surfen, ist zunächst immer nur ein bestimmter Teil der Seite sichtbar.

Beim Zurückstellen von Bildern außerhalb des Bildschirms wird der Download aller Bilder auf der Seite gleichzeitig angehalten und nur die Bilder im Ansichtsfenster heruntergeladen. Wenn der Benutzer nach unten scrollt und zu anderen Seiten der Webseite geht, sollten nur dann andere Bilder heruntergeladen werden.

Dies verringert die Belastung der Server und ermöglicht es ihnen, den Besuchern Seiten schnell anzuzeigen. Lassen Sie uns weitermachen und einige solide Vorteile sehen, die Sie durch die Nutzung der Offscreen-Bildverzögerung erzielen.

Warum Offscreen-Bilder aufschieben?

Die Verzögerung von Offscreen-Bildern wirkt sich direkt auf die FID-Metrik (First Input Delay) von Core Web Vital aus. FID berechnet die Zeit, die der Browser benötigt, um auf die erste Interaktion eines Benutzers mit der Seite zu reagieren.

Die ideale Zeit für FID liegt zwischen 0 und 100 ms. Und alles über 300 ms gilt als schlecht.

Durch die Optimierung Ihrer Webseiten mithilfe der Offscreen-Bilddifferenzierung können Sie die folgenden Vorteile erzielen:

  • Reduzierte Ladezeiten: Das ist definitiv. Wenn die Bilder nicht über das Ansichtsfenster hinaus geladen werden, werden Ihre Seiten viel schneller geladen, als wenn sie alle auf einmal geladen würden.
  • Bandbreitenerhaltung: Wenn jeweils nur ein begrenzter Teil der Seite geladen wird, verringert sich die von Ihren Besuchern genutzte Bandbreitenressource erheblich. Vielmehr wird es nicht unnötig verschwendet. Die maximale Bandbreite wird nur verbraucht, wenn ein Besucher die gesamte Seite anzeigt.
  • Bessere SERP-Rankings: Schnellere Websites haben einen hohen Rang. Wenn Ihre Website höher angezeigt wird, erhalten Sie mehr Traffic und letztendlich mehr Conversions. Was könnte ein besserer Motivator für die Implementierung der Offscreen-Bildverzögerung sein?
  • Besseres Besuchererlebnis: Wie in der obigen Statistik erwähnt, werden die Entscheidungen von etwa 70 % der Käufer von der Geschwindigkeit der Ladezeit der Webseite beeinflusst. Möchten Sie Ihre Kunden und Besucher an langsame Seiten verlieren? Kein Recht?

Nachdem Sie nun wissen, was und warum die Verschiebung von Offscreen-Bildern geschieht, sehen wir uns an, wie es gemacht wird.

Methoden zum Zurückstellen von Offscreen-Bildern

Grundsätzlich gibt es also mehrere Methoden, mit denen Sie die Aufgabe erledigen können. Ich werde die einfachsten und gebräuchlichsten besprechen, damit Sie keine Probleme haben, Offscreen-Bilder auf Ihre Website zu übertragen.

Lesen:  Strategie und Schritte zur Gestaltung einer nützlichen und effektiven digitalen Marketingkampagne

Übrigens, wenn Sie eine WordPress-Site haben, die auf Version 5.4 oder höher basiert, verfügen Sie standardmäßig bereits über die Offscreen-Bildverzögerungsfunktion, die manchmal auch als „Lazy Loading“ bezeichnet wird.

Hier ist ein Beispiel, das ich von einer WP-Testseite erhalten habe, die ich für diesen Artikel erstellt habe.

Um zu sehen, ob Ihre WP-Version dies unterstützt, gehen Sie einfach zu WP-Dashboard Aktualisierung.

Suchen Sie dann nach der angezeigten Version.

Es ist ein großartiges Lazy-Loading-Tool, kann aber manchmal etwas restriktiv sein.

Kommen wir nun zu den Methoden, die Sie für die Verschiebung von Offscreen-Bildern auf Ihren Webseiten verwenden können.

Methode 1: Offscreen-Verzögerung über HTML-Code

Sie müssen kein professioneller Programmierer sein, um Bilder per HTML-Codierung zu verschieben. Sie können dies einfach mit einer einzigen Codezeile tun, die Sie für die Bilder Ihrer Wahl verwenden.

Hier sind die Schritte, die Sie befolgen können, um die Bilder manuell zu verschieben.

1. Öffnen Sie Ihre HTML-Datei. Es kann in Ihrer IDE oder Ihrem Texteditor sein.

2. Identifizieren Sie die Offscreen-Bilder, die Sie zurückstellen möchten. Verwenden Sie dann die folgende Codezeile, um die Bilder zu verzögern oder sie verzögert zu laden.

example

Ersetzen Sie „example.png“ durch den tatsächlichen Pfad zu dem Bild, das Sie anzeigen möchten.

3. Speichern Sie die Datei, führen Sie dann den Code aus und Ihre Bilder werden zurückgestellt.

Im Video oben können Sie sehen, dass beim Scrollen der Seite und beim Ändern des Inhalts des Ansichtsfensters die neuen Bilder angezeigt werden. So läuft der Prozess ab.

Aber Vorsicht – Experten von web.dev schlagen vor, dass Sie das Aufschieben von Bildern vermeiden sollten, bei denen es sehr wahrscheinlich ist, dass sie sich im Ansichtsfenster befinden, und insbesondere LCP-Bilder.

LCP steht für Largest Contentful Paint und gibt im Grunde an, wie lange es dauert, bis der größte Inhaltsteil auf dem Bildschirm angezeigt wird.

Methode 2: Unterschiedliche Plugins und Tools für verschiedene Plattformen

Wenn Sie sich nicht mit dem Programmieren herumschlagen oder die Bilder manuell auswählen möchten und einen einfachen Ausweg suchen, dann gibt es dafür Tools.

Abhängig von der Plattform können Ihnen einige Plugins oder Erweiterungen dabei helfen, die Arbeit einfacher zu erledigen. Lassen Sie mich einige der Tools für einige der gängigsten Plattformen wie WordPress, Magento, Shopify usw. vorstellen.

Offscreen-Verzögerung in WordPress

Das Verzögern von Offscreen-Bildern mit WordPress ist ganz einfach. Es stehen unzählige Plugin-Optionen zur Verfügung, die Sie erkunden können. Hier sind einige gängige Methoden, die zu diesem Zweck verwendet werden:

Dies sind alles Top-Optionen, und jeder wird den Trick für Sie erledigen. Die meisten WP-Plugins für diesen Zweck sind recht benutzerfreundlich, sodass Sie bei der Ausführung der Aufgabe keine Probleme haben werden.

Lassen Sie mich Ihnen nur eine Methode zeigen, wie man das in WordPress macht. Der Vorgang ist normalerweise auch bei anderen Plugins mehr oder weniger ähnlich. Ich werde Smush verwenden, um Ihnen zu zeigen, wie es gemacht wird.

Der erste Schritt besteht darin, das Plugin zu installieren.

Nach der Aktivierung können Sie das Plugin zum verzögerten Laden von Bildern verwenden. Auf der linken Seite wird eine Registerkarte „Smush“ angezeigt. Bewegen Sie den Mauszeiger darüber und Sie sehen alle Optionen, die das Plugin bietet. Klicken Sie auf Lazy Load, um auf die Einstellungen für die Verschiebung von Offscreen-Bildern zuzugreifen.

Wenn Sie sich auf dieser Registerkarte befinden, können Sie leicht erkennen, wie Sie das Plugin verwenden.

Lesen:  Was ist Webhosting? Ein Leitfaden für Einsteiger ins Hosting

Sie können sehen, dass es Sie bereits über den Lazy-Loading-Status Ihrer Website informiert. Wenn Sie nach unten scrollen, sehen Sie außerdem zahlreiche Anpassungsoptionen, die Sie für die Verschiebung von Bildern außerhalb des Bildschirms erkunden können.

Und so einfach ist es im wahrsten Sinne des Wortes, Bilder für WordPress-Websites träge zu laden. Wenn Sie mit der Auswahl Ihrer gewünschten Einstellungen fertig sind, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“ und schon sind Sie fertig.

Das ist erledigt. Schauen wir uns an, wie es für andere Plattformen gemacht wird.

Offscreen-Verzögerung in Shopify

Shopify ist eine weitere beliebte Option, mit der Menschen ihre Online-Shops aufbauen. Und natürlich sind diese Websites oft reich an Bildern. Hier sind einige Tools zur Bildverschiebung, die Sie für Ihre Shopify-Shops ausprobieren sollten:

Offscreen-Verzögerung in Magento

Magento ist eine beliebte Plattform, die normalerweise von mittelständischen bis gehobenen Unternehmen genutzt wird. Mehrere Erweiterungsoptionen sind praktisch, wenn Sie Offscreen-Bilder für Ihre Magento-Shops verschieben möchten.

Werfen wir einen Blick darauf:

Methode 3: Unterschiedliche Verwendung von JS-Listenern

Bei diesem Ansatz werden Offscreen-Bilder durch JavaScript verschoben. JS-Listener, auch JavaScript-Ereignis-Listener genannt, stellen sicher, dass der Code auf ein auslösendes Ereignis wartet, bevor er Maßnahmen ergreift. Mit anderen Worten, es handelt sich um eine aktionsbasierte Offscreen-Bildverzögerung.

addEventListener() und removeEventListener() sind die Befehle, die zum Implementieren von Ereignis-Listenern in Ihrem JavaScript-Code verwendet werden. Mit diesen Funktionen können Sie verschiedene Arten von Ereignissen nutzen, um mithilfe von JavaScript eine Offscreen-Bildverzögerung auszulösen.

Ich habe unten auch zusätzliche Codebeispiele bereitgestellt und erklärt, wie man sie verwendet.

Scrollen: document.addEventListener(“scroll”, lazyload)

Dies geschieht, wenn ein bestimmter Bereich der Seite gescrollt wird.

Orientierungsänderung: window.addEventListener(“orientationChange”, lazyload);

Dies geschieht, wenn Ihre Benutzer die Bildschirmausrichtung von Querformat in Hochformat oder umgekehrt ändern.

Und das ist es auch schon. Letztendlich gibt es viele Methoden, um die Arbeit zu erledigen. Es hängt ganz davon ab, welche Route für Sie am einfachsten ist. Das heißt, die Verschiebung von Offscreen-Bildern allein kann den Optimierungsdeal nicht für Sie besiegeln.

Sie müssen außerdem die Best Practices zur Bildoptimierung implementieren, damit die Seiten Ihrer Website schneller geladen werden. Und Ihre langsamen Ladebemühungen in Kombination mit einem schnellen Webhost können die besten Ergebnisse für Sie erzielen.

Schauen wir uns nun einige Bildoptimierungstechniken an, die Sie implementieren können, um das Beste aus Ihren Offscreen-Bildverzögerungsbemühungen herauszuholen!

Tipps zur Bildoptimierung zur Unterstützung Ihrer Offscreen-Bildoptimierungsbemühungen

Unterschiedliche Bilder außerhalb des Bildschirms allein wirken sich nur begrenzt auf die Ladegeschwindigkeit Ihrer Seite aus. Am besten unterstützen Sie diese Bemühungen durch eine bessere Bildoptimierung. Hier sind einige Möglichkeiten, Ihre Bilder zu optimieren:

1. Reduzieren Sie die Größe Ihrer Bilddatei und wählen Sie das richtige Format

Stellen Sie sicher, dass Ihre Seiten nicht mit umfangreichen Bildern bombardiert werden. Komprimieren Sie die Bilder, damit Ihre Seiten zum Laden nicht mehr Bandbreite benötigen. Denn selbst mit der Bildverzögerung verlängern große Datenmengen Ihre Ladezeiten.

Das willst du doch nicht, oder?

Hier ist ein Test, den ich durchgeführt habe, um zu zeigen, wie sich umfangreiche Bilder erheblich auf die Ladezeiten auswirken können.

Dies ist ein Bericht für eine sehr unscharfe Website, den ich als Test erstellt habe. Es sind keine Bilder optimiert. Sie sehen, dass die Ergebnisse für die Website nicht gut sind. Ich habe den Test ausgeführt PageSpeed-Einblicke.

Sehen Sie sich alle Fehler an, die mir für die Bilder angezeigt werden.

Dann habe ich die Bildgrößen reduziert und einige Optimierungsanpassungen vorgenommen, wodurch die Fehlerzahlen deutlich reduziert wurden.

Dies führte zu besseren Website-Leistungsmetriken, wie unten dargestellt:

Lesen:  Die Zukunft des Bauwesens: Die Vielseitigkeit und Nachhaltigkeit von Metallkonstruktionen

Unterschätzen Sie also nicht die Bedeutung der Bildoptimierung und der Verwendung des richtigen Formats. Es kann die Leistung Ihres Shops erheblich steigern.

2. Sorgen Sie für eine hohe Bildqualität

Nun möchten Sie die Qualität der Bilder nicht beeinträchtigen, wenn Sie deren Dateigröße verringern. Sorgen Sie daher für eine hohe Qualität der Bilder, um ein hervorragendes Besuchererlebnis zu gewährleisten. Die zwei schnellsten Möglichkeiten, dies zu tun, sind:

  • Konvertieren Sie Ihre Bilder in das JPEG-Format.
  • Konvertieren Sie Ihre Bilder in das WEBP-Format.

Nun ist es am besten, diese Schritte beim Hochladen der Bilder umzusetzen. Wenn Sie jedoch bereits eine Website mit Bildern im falschen Format haben, können Sie Plugins und Erweiterungen herunterladen, um das Format zu konvertieren.

Wenn Sie DreamHost-Kunde sind und sich für den Kauf des Cloudflare Enterprise-Add-ons von DreamHost entscheiden, erhalten Sie glücklicherweise Zugriff auf Cloudflare Polish, mit dem Sie die Bildgröße reduzieren können, ohne Kompromisse bei der Qualität einzugehen.

3. Verwenden Sie Responsive Bilder

Ihre Bildgrößen sollten je nach Bildschirmgröße des Besuchers variieren. Dies kommt Ihrer Website im Hinblick auf mobile Besuche oder andere kleinere Geräte wie Tablets erheblich zugute.

Anstatt die gleichen Daten für Mobilgeräte und Laptops zu verbrauchen, wird der Verbrauch reduziert, was sich auf das LCP-Element der Core Web Vitals auswirkt.

Es ist also definitiv etwas, das Sie bei der Optimierung der Bilder Ihrer Website nicht übersehen sollten. Nun verstehe ich, dass Unternehmen normalerweise nicht viel Zeit und Ressourcen haben, um all dies manuell zu erledigen.

Deshalb finde ich es relevant, das Cloudflare Mirage zu erwähnen, das man bei DreamHost für ein paar Cent bekommen kann. Dieses Tool macht Ihre Bilder responsiv, sodass Sie Zeit und Ressourcen sparen und sie anderen wichtigen Dingen widmen können, die wichtiger sind.

4. Aktivieren Sie Browser-Caching für Ihre Bilder

Diese Funktion lädt die Ressourcen für die Besucher herunter, wenn sie Ihre Website zum ersten Mal besuchen. Bei späteren Besuchen sind die Daten also bereits vorhanden. Daher wird die Seite schneller geladen.

Dies ist ein großartiges Tool für Websites, die wiederkehrende Besucher erwarten.

Da Sie nun mit Ihrer Bildoptimierung fertig sind, möchte ich zum Ende des Artikels mit einem Tipp zum Aufschieben von Offscreen-Bildern für Sie fortfahren:

Alle Seiten Ihrer Website verfügen über einen Heldenbereich. Dies ist der erste Abschnitt, der für Ihre Zuschauer sichtbar ist. Wenn sich das verspätet zeigt, sagen Sie den Leuten im Grunde, sie sollen weggehen.

Tu das nicht. Tatsächlich gibt es so etwas wie Eager Loading. Implementieren Sie dies, damit das Bild wie gewohnt geladen wird und nicht unnötig verzögert wird.

Abschluss

Das Verschieben von Offscreen-Bildern ist eine großartige Möglichkeit, Ihre Website zu beschleunigen.

Wenn Sie sich die oben genannten Methoden ansehen, können Sie sie hoffentlich für Ihre Website implementieren und Ihren Besuchern ein blitzschnelles Surferlebnis bieten.

Finden Sie heraus, welches für Sie am relevantesten ist. Und wenn Sie gerade erst mit einer Website beginnen, stellen Sie sicher, dass Sie diese auf einer Plattform erstellen, die Ihnen die größtmögliche Freiheit und Zugriff auf Anpassungen bietet.

Last but not least – vergessen Sie nicht, die Website mit schnellem Hosting zu versorgen, denn nicht optimiertes Hosting macht Ihre Website langsam und alle Ihre Bemühungen, Bilder aufzuschieben, werden ohnehin umsonst sein!