Jeder Besucher einer Webseite möchte eine möglichst gute Erfahrung beim Aufruf der Webseite machen. Die Webseite muss also eine gewisse Qualität haben.
Google hat eine Initiative gestartet um ein einheitliches Mass für die Qualität von Webseiten zu definieren.
Mit den Google “Core Web Vitals” werden 3 Aspekte abgebildet die das Laden, die Interaktivität und die visuelle Stabilität einer Webseite einordnen.
Largest Contentful Pain (LCP)
LCP ist ein Qualitäts-Faktor der die Ladezeit mißt. Laden Webseiten zu langsam, dann wird das negativ interpretiert
Seiten laden dann zu langsam, wenn:
viele sehr unterschiedliche Datenquellen existieren
die Datenmenge ingesamt oder die einzelner Daten zu groß sind
das Laden von Daten sich verzögert, da das veraltete HTTP Protokoll 1.1 verwendet wird.
ungepackte Daten geladen werden
unnötige Daten geladen werden
Daten werden doppelt geladen
Daten nicht gecached werden
First Input Delay (FID)
FID misst die Interaktivität. D.h. ab wann kann auf der Seite etwas getan werden. Blockiert das Laden von Inhalten das Rendern (den Aufbau) der Webseite? Werden die für den schnellen Aufbau der Seite wichtigen Daten zuerst geladen?
Können gewisse Seiten-Funktionen erst nach dem laden gewisser Daten benutzt werden und muss der Besucher deshalb länger warten bevor er vollständig mit der Seite arbeiten kann? Es geht hier übrigens um einen maximalen FID von 100ms!!!
Cumulatice Layout Shift (CLS)
CLS misst die “visuelle Stablilität” der Webseite. Wie lange dauert es einen Inhalt einer Webseite zu laden, so dass sie auch vollständig gut aussieht. Oder blockiert das z.B. das Laden eines Bildes den Seitenaufbau, so dass nach einiger Zeit ein “Layout Shift” (sich die Seite im Aussehen verändert) stattfindet?
Hier gilt der Faktor 0,1
Laden von Daten
In jedem OXID Shop werden nicht nur Artikelbilder und grafische Element geladen, sondern zuerst CSS- und JavaScript-Dateien.
Das WebVitals Modul ist nicht dafür gedacht Bilder zu optimieren oder etwas am WebDesign zu optimieren. Es ermöglicht aber die Beeinflussung und Optimierung des Ladens von CSS und JS-Dateien.
Modul- Konfiguration Dateien
Im Modul Ordner „Shopverzeichnis/source/modules/webtools/webvitals“ gibt es einen Unterordner
„Shopverzeichnis/source/modules/webtools/doitconfig/doitcontent/config“
In ihm gibt es die Datei “Settings.yaml”. (YAML ist vergleichbar mit XML)
HTML Minimize
Beim Aufbau einer Webseite werden standardmässig im HTML-Quelltext auf viele Leerzeichen und Zeilenumbrüche mitgeliefert. Diese unnützen Daten muss ein Browser zuerst intern löschen und verarbeiten, bevor er mit dem Seitemaufbau beginnen kann. Zwar geht dies relativ schnell, ist aber dennoch nicht nötig. Beser ist wenn optimiertes HTML ausgeliefert wird.
unoptimiertes HTML:
optimiertes HTML:
Dadurch verringert sich Datenmenge die geladen werden muss und der Browser kann die Webseite schneller aufbauen.
In der Datei “Settings.yaml” kann das optimierte Laden ein oder ausgeschaltet werden.
Max File Size
Für die interne Prüfung von Dategrößen der CSS / Java-Script Dateien kann eine maximale Dateigröße in KB eingestellt werden. Sie dient darum große Dateien zu kennzeichen. Auf die eigentliche Arbeit des Moduls hat diese Einstellung keine Auswirkungen.
Lernmodus
Das Modul hat einen Lernmodus um festzustellen welche CSS und Java.Script Dateien geladen werden.
Bei Veränderungen im Shop bzw. nach der Installation des Moduls muss der Lernmodus eingeschaltet werden damit das Modul lernt welche CSS und JavaScript Dateien im Shop geladen werden. Es sollte jede Shop Seite nach Typ mindestens 1 mal aufgerufen werden. Erst durch den Aufruf einer Seite eines Seitentyps (Artikel, Kategorie Seite) kann das Modul lernen welche Daten auf der entsprechenden Seite geladen werden. Die Ergebnisse werden in der Datei Files.yaml gespeichert.
Nach dem Erzeugen der Files.yaml Datei kann der Lernmodus abgeschaltet werden:
Mode:
Files.yaml
Die Datei Files.yaml enthält nun alle Informationen über die Dateien die im Frontend geladen werden.
Es wird sehr schnell ersichtlich wie die Datei geladen wird:
Die Datei wird geladen. Hier kann das Laden der Datei auch deaktiviert werden:
Informationen
Sie erhalten jetzt schnell Informationen über die im Shop geladenen Dateien.
eigener oder andere Server
Beispiel: Die Datei wird vom eigenen Webserver direkt geladen.
Die Datei ist minimiert. Wenn nein dann ist eine Optimierung möglicherweise sinnvoll.
SSL
Die Datei wird per SSL geladen. Wenn nein dann ist dies definitv ein Punkt den Sie “sofort” ändern sollten! Wenn Dateien per SSL und ohne SSL geladen werden, dann bekommen Webseitenbesucher oft vom Browser eine Warnung angezeigt. Hier ist absolut Handlungsbedarf!
Datei Typ
Dies ist lediglich ein Hinweise um welchen Dateityp es sich handelt.
type: JS
LoadMode
Der LoadMode ist Key dieses Moduls. Hier können sie einstellen wie die Datei geladen werden soll. Es kann z.B. Sinn machen Daten erst später zu laden.
normal
normal (oder keine Angabe): Die Datei wird sofort geladen.
defer
Wenn “defer” gesetzt ist, gibt es an, dass das Skript parallel zum Parsen der Seite heruntergeladen und nach dem Parsen der Seite ausgeführt wird.
async
Das Laden wird asynchron mit dem Aufbau der Seite ausgeführt (während die Seite mit dem Parsen fortfährt)
loadmode: async
LoadUrl
Das Modul ermöglicht es verschiedene Urls für das Laden der Daten anzugeben.
Falls eine Angabe bei “url”, “minurl” oder “alturl” vorhanden ist, kann ausgewählt werden welche der Dateien geladen wird.
Bei der Optimierung des Lade-Verhaltens der Webseite können Sie nun testen welche Quelle für das Laden am Effektivsten ist. Sie können z.B. verschiedene externe Quellen mit “alturl” ausprobieren.
Fazit
Das WebVitals Modul ist ein Modul für Personen die sich mit HTML auskennen. Wenn Sie bei den Einstellungen des Moduls Unterstützung bemötigen freuen wir uns über Ihre Kontaktaufnahme!
Modul Voraussetzungen
Jedes Modul von WebTools benötigt die Installation des WebTools-Basis Moduls.
Das Modul ist mit IonCube verschlüsselt.
Modul Preis
Die Module ist komplex und kaum zu vergleichen mit “einfachen OXID Modulen”. Für uns steht die Leistungsfähigkeit der Module, die Kosten und Zeit-Ersparnis und der Mehrwert der durch die Module erzeugt wird im Vordergrund.
Deshalb haben alle unsere Module eine einmalige Lizenzgebühr die die Nutzung des Moduls für 1 Jahr includiert. Die Module werden laufend fortentwickelt und deshalb berechnen wir in jedem Folgejahr automatisch eine jährliche Gebühr von 50% der ursprünglichen Lizenzgebühr damit das Modul aktiv bleibt. Soll das Modul nicht mehr genutzt werden senden Sie uns bitte eine Kündigung für das Modul an doit@webtools.de
Fragen zum Modul?
Wir freuen uns darauf Sie unterstützen zu dürfen. Sie erreichen und telefonisch unter +49 89 45455580 oder per E-Mail an module@webtools.de .
War dieser Artikel hilfreich?
Das ist großartig!
Vielen Dank für das Feedback
Leider konnten wir nicht helfen
Vielen Dank für das Feedback
Feedback gesendet
Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren