Google PageSpeed ​​​​​​Insights: Bilder außerhalb des Bildschirms senden

Eines der von Webmastern am häufigsten verwendeten Tools zum Testen der Leistung einer Website ist Google PageSpeed ​​​​​​Insights. Mit dem Google-Tool ist es tatsächlich möglich, Ihre Website auf die häufigsten Fehler zu testen. Sehen wir uns unter den vielen Nachrichten und Warnungen, die Google heute zur Verfügung stellt, Folgendes an:   Senden von Bildern außerhalb des Bildschirms

Gemeinsam werden wir sehen, was es bedeutet, Bilder aus dem Off zu verschieben und vor allem versuchen, diesen Fehler durch das zeitversetzte und asynchrone Laden von Multimedia-Inhalten einfach und schnell zu beheben.

Daher werde ich Ihnen einige Lösungen vorschlagen, um das langsame Laden   von Inhalten mit besonderer Aufmerksamkeit für Neulinge und diejenigen, die mit CMS wie WordPress arbeiten , durchzuführen   .

Inhaltsverzeichnis

  • Was bedeutet es, Bilder vom Bildschirm zu nehmen?
  • Inhalte über AJAX hochladen
  • Unendliches Scrollen auf WordPress
  • So verschieben Sie Offscreen-Bilder in WordPress
  • Schlussfolgerungen

Was bedeutet es, Bilder außerhalb des Bildschirms zu senden?

Versuchen wir gemeinsam zu verstehen, was diese Fehlermeldung bedeutet und warum sie einer der wichtigsten Vorschläge   des   Google- Testtools   und von Lighthouse ist. Wenn ein Benutzer eine Seite von einer unserer Websites lädt, insbesondere auf Mobilgeräten, ist der sichtbare Bildschirmbereich im Wesentlichen   sehr klein   . Je nach Gerät ändert sich dieser Teil, geht aber normalerweise nicht über die Hunderte von Pixeln auf mobilen Geräten hinaus.

Wenn jedoch Elemente wie Bilder und die verschiedenen dom-Knoten   bereits auf der Seite vorhanden sind   , ist derjenige, der die Seite zum ersten Mal öffnet, verpflichtet, den gesamten Inhalt der Seite herunterzuladen, auch wenn er ihn nicht nutzt. Tatsächlich ist es für den Benutzer nicht richtig, zum Ende der Website zu gehen und den Inhalt daher möglicherweise unnötig herunterzuladen.

Dies wirkt sich eindeutig auf   das Gewicht unserer Website   und damit auf die Geschwindigkeit aus. Es gibt zwar mehrere Operationen, die wir   insbesondere auf der Cache-Seite durchführen können   , um sicherzustellen, dass der Benutzer unsere Inhalte schnell nutzen kann, aber der Faktor der Elemente außerhalb des Bildschirms hat einen großen   Einfluss   auf die Auslastung einer Website.

Nehmen wir ein konkretes Beispiel. Facebook verwendet eine Methode namens   unendliches Scrollen   . Versuchen Sie, Ihren Feed zu öffnen, und Sie werden sofort die Taktiken des sozialen Netzwerks bemerken. Wenn die Seite geladen wird, gibt es tatsächlich sehr wenig Inhalt, wenn der Benutzer die Seitenelemente vollständig genutzt hat, indem er   nach unten scrollt   , initiiert Social eine   AJAX-Anfrage   , die nichts anderes tut, als dem Browser mitzuteilen:   ‘Hey, l ‘Benutzer erreicht die unten auf der Seite, mehr Inhalt laden!’

Es ist leicht zu verstehen, wie wichtig dieser Vorgang ist. Der Benutzer wird die Inhalte von Zeit zu Zeit herunterladen und dies ermöglicht ihm eine zweifellos bessere Benutzererfahrung. Denken Sie in der Tat, wenn jedes Mal, wenn wir Facebook öffnen, alle Inhalte aus unserem Feed geladen werden! Es wäre natürlich verrückt.

Inhalte über AJAX hochladen

Nachdem wir nun die Bedeutung des verzögerten Ladens verstanden haben, lassen Sie uns versuchen, die Angelegenheit aus technischer Sicht zu betrachten. AJAX steht für Asynchronous JavaScript and XML. Es ist eine Softwareentwicklungstechnik, die 2006 geboren wurde. Durch diese Methode ist es möglich, die asynchrone Aktualisierung von Inhalten zu erforschen.

Tatsächlich gibt es viele Fälle, in denen wir nur einen Teil einer Webseite zum Neuladen benötigen. In einem E-Commerce-Produktblatt ist es beispielsweise wichtig, die Varianten eines einzelnen Produkts ändern zu können, ohne die Seite von Zeit zu Zeit aktualisieren zu müssen, um den Preis dieses Produkts basierend auf der ausgewählten Variante zu erfahren.

In diesem Fall wie in anderen Fällen tritt AJAX ein. Durch das Auslösen eines AJAX-Aufrufs ist es nämlich möglich, bei einem bestimmten Ereignis zusätzliche Inhalte in die Seite zu laden, wie zum Beispiel das Scrollen am Seitenende zu Facebook. Allerdings hindert uns nichts daran, einen Button mit „mehr anzeigen“ einzufügen, das Konzept ist im Grunde das gleiche.

Google fordert uns daher auf,   alle Inhalte, die ihrer Natur nach nicht sofort vom Benutzer gesehen werden können, zeitversetzt und asynchron zu senden   .

Nachdem wir nun die Theorie gut verstanden haben, gehen wir zur Praxis über. Es gibt mehrere JS-Bibliotheken, die hauptsächlich auf jQuery basieren und es Ihnen ermöglichen, Inhalte zeitversetzt hochzuladen. Der erste, den ich Ihnen vorstellen möchte, ist   jScroll   .

jScroll ist nichts anderes als ein jQuery-Plugin, das für unendliches Scrollen verwendet wird. Es ist eine Bibliothek von Philip Klauzinski. Die Verwendung ist sehr einfach, folgen Sie einfach der Dokumentation auf der Website der Bibliothek. Auf CodePen finden Sie jedoch   einige sehr einfache Beispiele   , denen Sie folgen können.

Eine weitere sehr einfach zu bedienende Open-Source-Bibliothek ist   Infinity Scroll   – eine Bibliothek, die ich oft verwende, da sie gut dokumentiert ist und auch umfassend an Ihre Bedürfnisse angepasst werden kann.

Dies sind nur zwei der am häufigsten verwendeten Bibliotheken, aber im Internet gibt es Dutzende davon, Sie müssen nur wissen, wie man sucht. Die beiden, die Sie mitgebracht haben, sollten jedoch inzwischen für Sie funktionieren.

Unendliches Scrollen auf WordPress

Natürlich gibt es nicht nur reine Bibliotheken, sondern auch hervorragende Plug-Ins, mit denen Sie verzögerte Inhalte hochladen und   endlose Scrolls in WordPress durchführen können   . Natürlich können Plugins viel Arbeit machen, aber auch etwas Hilfe von Ihnen wird benötigt. Tatsächlich müssen Sie in der Lage sein, den Container zu identifizieren, an den Sie Ihre Inhalte senden möchten.

Das Plugin, das ich empfehlen möchte, heißt   Ajax Load More   und ermöglicht es Ihnen, jede Art von WordPress-Inhalten auf andere Weise zu laden: Seiten, Beiträge, Kommentare und mehr.

Das einzige, was Sie tun müssen, ist, den Shortcode über den praktischen Shortcode-Builder zu generieren, der     vom Plugin selbst bereitgestellt wird, und ihn direkt in Ihre Modelldatei einzufügen. Das Plugin bietet mehrere Funktionen, ich werde einige der interessantesten im Folgenden auflisten:

  • Der   Shortcode Builder  : Mit diesem praktischen Tool können Sie benutzerdefinierte Abfragen basierend auf unseren Anforderungen erstellen.
  • Einfach zu erweitern  : Das Plugin ist für jeden, der mit dem Code vertraut ist, sehr einfach zu erweitern. Daher ist es möglich, verschiedene Arten von Inhalten zu mischen, einschließlich personalisierter.
  •  Kompatible Multisite : Das Plugin kann auch auf verschiedenen Websites verwendet werden, die über WordPress Multisite verwaltet werden.

So verschieben Sie Offscreen-Bilder in WordPress

Wenn Sie WordPress verwenden, möchte ich Sie sofort beruhigen. Tatsächlich   haben die Entwickler seit   Version 5.0 des CMS ein langsames Laden von Multimediaelementen auf der Seite eingeführt, wie z. B. Bilder, die, wie ich Sie erinnere, immer   in aktuellen Formaten veröffentlicht werden müssen   .

Um das   langsame Laden   Ihrer Inhalte   in WordPress zu nutzen   , müssen Sie nur   WordPress auf die neueste Version aktualisieren   .

Sie müssen nichts weiter tun oder zusätzliche Plugins installieren.

Schlussfolgerungen

Eine Site mit Selbstachtung, insbesondere mit einer großen Menge an Inhalten, kann Inhalte dynamisch, verzögert und asynchron laden.

Mit dieser Methode können Sie   die Leistung erheblich verbessern   . Ein Benutzer, der die Inhalte Ihrer Website auf einfache Weise genießen kann, ist ein Benutzer, der Sie wieder besucht.

Wenn Sie andere Methoden kennen, um den PageSpeed-spezifischen Fehler zu beheben, schreiben Sie mir: Ich probiere es gerne aus und beantworte es!

 

Leave a Comment

Your email address will not be published.