Lazy Load und Viewport in LiteSpeed

 
 

Lazy Load y Viewport en LiteSpeed

Diese drei Dinge werden zu Beginn für diejenigen definiert, die sich nicht im Klaren darüber sind, was sie sind.

Lazy Load

Lazy Load, fälschlicherweise auch als „faul“ bezeichnet, ist ein Entwurfsmuster, das dazu dient, das Laden oder Rendern eines Objekts bis zum richtigen Zeitpunkt der Verwendung zu verzögern, um unnötiges Vorladen von Objekten zu vermeiden, die möglicherweise nicht verwendet werden. Sie wird am häufigsten für Bilder verwendet und trägt zu besseren Ladezeiten und Bandbreiteneinsparungen bei.

Das Rendern jedes Bildes wird verzögert, bis es benötigt wird, und wird geladen, während Sie durch das Ansichtsfenster scrollen

Viewport

Viewport platzhalter, für den es keine genaue Übersetzung gibt, der aber oft als „grafisches Fenster“ bezeichnet wird, wurde von Apple 2007 für sein iPhone geschaffen. Es war ein virtuelles Fenster, ähnlich dem, das Nokia für Mini Map entworfen hatte. Dabei handelt es sich um ein Meta-Tag, mit dem Webseiten den mobilen Browsern mitteilen können, wie sie die Seite darstellen möchten.

Ohne dieses Meta-Tag wurden Webseiten auf iPhones als 980 Pixel breites Fenster dargestellt, in das der Benutzer hinein- und herauszoomen musste. Mit diesem Meta-Tag können Sie eine Seite in ihrer tatsächlichen Größe rendern und dann das Layout so anpassen, dass die Seite so aussieht, wie wir es alle erwarten, wenn wir einen mobilen Browser verwenden. Schließlich wurde es zu einem Standard-Meta-Tag, das von den meisten Geräten unterstützt wird und heute für das so genannte responsive Design verwendet wird.

Litespeed Cache

LiteSpeed Web Server ist ein Webserver und eine Webserver-Software für WordPress (LSCWP) LiteSpeed Cache for WordPress (LSCWP) ist ein All-in-One-Plugin zur Beschleunigung von Websites, das einen einzigartigen serverweiten Cache und eine Reihe von Optimierungsfunktionen für Websites bietet, die WordPress verwenden und auf einem WordPress-Server gehostet werden.

Bilder laden

Im Idealfall sollten alle Bilder zeitversetzt geladen werden, mit Ausnahme derjenigen, die sich bereits im Ansichtsfenster befinden, wenn die Seite zum ersten Mal geladen wird, d.h. was auf den ersten Blick auf dem Bildschirm angezeigt wird, bevor wir scrollen.

Das hat ein Problem. Die Seite kann beim ersten Laden hässlich aussehen, da die Bilder erst angezeigt werden, wenn es keine Bewegung mehr gibt und Sie die ersten zwei oder drei Bilder, die angezeigt werden, ausschließen müssen

Obwohl WordPress seit Version 5.5 über ein natives zeitversetztes Laden verfügt und dies auch mit vielen anderen Plugins wie Perfmattersdas Viewport-Steuerelement, mit dem Sie einschränken können, welche Bilder angezeigt werden sollen und welche nicht, ist nicht ganz so einfach, denn wir können es beispielsweise anweisen, die Bilder, die wir anzeigen möchten, nicht zeitversetzt zu laden, aber wir können die Bilder, die wir anzeigen möchten, nicht festlegen oder ausschließen die ersten zwei, drei oder vieraber wir können nicht auf einfache Art und Weise bestimmte Bilder für jede Seite festlegen oder ausschließen und wir können dies nur mit dem in großen Mengen.

VPI

Am 25. Juli fügte LiteSpeed mit dem Update auf die Version 5.0 seines Plugins eine flexible Option zur Behebung dieses Problems hinzu, die es VPI (Viewport Images) nennt.

Der VPI-Dienst prüft eine URL und bestimmt, welche Bilder auf einem 1300×900 Pixel großen Bildschirm für Desktop-Ansichten und welche Bilder auf einem 480×800 großen Bildschirm für mobile Ansichten sichtbar sind. Es gibt eine Liste dieser Bilder an das LiteSpeed-Plugin zurück, und das LiteSpeed-Plugin schließt sie vom langsamen Laden aus, wenn es die URL das nächste Mal zwischenspeichert.

Das Ergebnis ist eine Seite, die vollständig oberhalb des Falzes gerendert wird, während alle Bilder unterhalb des Falzes sich weiterhin wie bisher verhalten. Die Seite behält ihren guten Wert für die Seitengeschwindigkeit bei, während menschliche Besucher einen ersten Vollbildschirm mit Inhalt vorfinden.

Konfiguration

Um diesen neuen Service zu nutzen, müssen Sie natürlich die Faule Last in dem Plugin.

Die Konfiguration ist sehr einfach, Sie müssen ihn nur aktivieren und er hat nur zwei Schalter.

Lazy Load y Viewport en Litespeed

Wenn Viewport-Images (im Folgenden VPI) aktiviert sind und cron auf ON gesetzt ist, werden die VPI-Images im Hintergrund über eine cron-basierte Warteschlange erzeugt.

Wenn Sie Cron nicht aktivieren möchten, müssen Sie die VPI-Warteschlange manuell bearbeiten. Sie können dies über die Schaltfläche„VPI-Warteschlange manuell ausführen“ tun, die angezeigt wird, wenn sich URs in der Warteschlange befinden. Oder vom Haupt-Dashboard aus über die Option„Cron erzwingen„.

Lazy Load und Viewport in LiteSpeed

Das Interessante und wirklich Nützliche an dieser neuen Option ist, dass Sie jetzt sowohl im klassischen Editor als auch in Gutenberg in jedem Beitrag und auf jeder Seite ein neues Feld in den LiteSpeed-Optionen finden, in dem Sie diese Option vollständig deaktivieren und jedes Bild aus dem Viewport entfernen können, um es nach Ihren Wünschen einzustellen.

Lazy Load und Viewport in LiteSpeed

Alle Bilder, die in diesen Feldern erscheinen, werden nicht zeitversetzt geladen

Wenn die Eingabe noch nicht für VPI verarbeitet wurde, werden beide Felder leer angezeigt. Sie können jedoch manuell Bilder hinzufügen oder Bilder aus beiden Feldern löschen und eine Neuberechnung der VPI erzwingen.

Die Guten und die weniger Guten

Der große Vorteil des VPI von LiteSpeed besteht zweifellos darin, dass wir schnell und einfach entscheiden können, für welche Bilder wir das verzögerte Laden nicht wünschen, und dies für jede Seite manuell einstellen können.

Der Haken ist, dass diese Option zusätzlich zu den anderen WordPress-Optimierungsservices von QUIC.cloud wie Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) und Image Optimisation, für die wir eine begrenzte kostenlose Gebühr anbieten, die nicht immer ausreicht, und für die Sie anschließend Credits kaufen müssen, obwohl nicht teuer.

Ich habe mich entschlossen, es zu testen, um das Ergebnis mit dem nativen Lazy Load von WordPress Core und Perfmatters (mit festen Ausschlüssen pro Menge) zu vergleichen, und bis jetzt kann ich eine Verbesserung innerhalb der kleinen Marge erkennen, die bereits übrig war.

Lazy Load und Viewport in LiteSpeed

Das visuelle Endergebnis ist genau dasselbe wie bei Perfmatters, da es ausreicht, die Farbe des platzhalter von Grau auf Weiß und passen Sie die Dauer desEinblendungseffekts mit diesem CSS an.

/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados