WebVitals

Geändert am Mo, 10 Okt, 2022 um 2:47 NACHMITTAGS

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)

HTMLMinimize: true
MaxFileSize: 1000
Mode: Learnx
CheckFiles: false
IgnoreDoubleFiles: true

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:

<!DOCTYPE html>
<html lang="de" >
    <head>
                        <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" id="Viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>OXID Surf- und Kiteshop | Shop Startseite Titel | Der Onlineshop für Wassersport und Sommerspass</title><meta name="description" content="Shop Startseite Metabeschreibung"><meta name="keywords" content="kite, kites, kiteboarding, kiteboards, wakeboarding, wakeboards, boards, strand, sommer, wassersport, mode, fashion, style, shirts, jeans, accessoires, angebote"><meta property="og:site_name" content="http://localhost74/ce64/source/"><meta property="og:title" content="OXID Surf- und Kiteshop | Shop Startseite Titel | Der Onlineshop für Wassersport und Sommerspass"><meta property="og:description" content="Shop Startseite Metabeschreibung"><meta property="og:type" content="website"><meta property="og:image" content="http://localhost74/ce64/source/out/flow/img/basket.png"><meta property="og:url" content="http://localhost74/ce64/source/"><link rel="canonical" href="http://localhost74/ce64/source/"><link rel="alternate" hreflang="x-default" href="http://localhost74/ce64/source/index.php?cl=start"/><link rel="alternate" hreflang="de" href="http://localhost74/ce64/source/index.php?cl=start"/><!-- iOS Homescreen Icon (version < 4.2)--><link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- iOS Homescreen Icon --><link rel="apple-touch-icon-precomposed" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- iPad Homescreen Icon (version < 4.2) --><link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- iPad Homescreen Icon --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- iPhone 4 Homescreen Icon (version < 4.2) --><link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- iPhone 4 Homescreen Icon --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- new iPad Homescreen Icon and iOS Version > 4.2 --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" /><!-- Windows 8 --><meta name="msapplication-TileColor" content="#D83434"> <!-- Kachel-Farbe --><meta name="msapplication-TileImage" content="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png"><!-- Fluid --><link rel="fluid-icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_512x512.png" title="OXID Surf- und Kiteshop | Shop Startseite Titel | Der Onlineshop für Wassersport und Sommerspass" /><!-- Shortcut Icons --><link rel="shortcut icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon.ico?rand=1" type="image/x-icon" /><link rel="icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_16x16.png" sizes="16x16" /><link rel="icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_32x32.png" sizes="32x32" /><link rel="icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_48x48.png" sizes="48x48" /><link rel="icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_64x64.png" sizes="64x64" /><link rel="icon" href="http://localhost74/ce64/source/out/flow/img/favicons/favicon_128x128.png" sizes="128x128" /><link href='https://fonts.googleapis.com/css?family=Raleway:200,400,700,600' rel='stylesheet' type='text/css'><link rel="alternate" type="application/rss+xml" title="OXID eShop 6/Top of the Shop" href="http://localhost74/ce64/source/rss/OXID-eShop-6/Top-of-the-Shop/"><link rel="alternate" type="application/rss+xml" title="OXID eShop 6/Neue Artikel im Shop" href="http://localhost74/ce64/source/rss/OXID-eShop-6/Neue-Artikel-im-Shop/">

                <link rel="stylesheet" type="text/css" href="http://localhost74/ce64/source/out/flow/src/css/libs/jquery.flexslider.min.css?1647594064" />
<link rel="stylesheet" type="text/css" href="http://localhost74/ce64/source/out/flow/src/css/styles.min.css?1647594064" />


        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
  <!-- OXID eShop Community Edition, Version 6, Shopping Cart System (c) OXID eSales AG 2003 - 2022 - https://www.oxid-esales.com -->
    <body class="cl-start static-header" style="background:#CCEBF5;">

        

    <div class="container">
            <div class="main-row">
                                        
    
            

    
    <header id="header">
    ........

optimiertes HTML:

<!DOCTYPE html><html lang="de"><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" id="Viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="te

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.

HTMLMinimize: true / false

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.

MaxFileSize: 1000

Lernmodus

Das Modul hat einen Lernmodus um festzustellen welche CSS und Java.Script Dateien geladen werden.

Mode: Learn

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.

/meinShop/source/out/meinTemplate/src/js/libs/pages/start.js:
  sourceurl: 'http://localhost74/meinShop/source/out/meinTemplate/src/js/libs/pages/start.js'
  Id: /ce623/source/out/meinTemplate/src/js/libs/pages/start.js
  active: 'true'
  local: true
  minimized: false
  url: 'http://localhost74/ce623/source/out/meinTemplate/src/js/libs/pages/start.js'
  alturl: ''
  ssl: false
  type: JS
  loadurl: normal
  loadmode: normal

Es wird sehr schnell ersichtlich wie die Datei geladen wird:

Die Datei wird geladen. Hier kann das Laden der Datei auch deaktiviert werden:

active: 'true'

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.

local: true

Die Datei ist minimiert. Wenn nein dann ist eine Optimierung möglicherweise sinnvoll.

minimized: false

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!

ssl: false / true

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.

 loadmode: normal

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.

loadmode: defer

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.

url: 'http://localhost74/ce623/source/out/meinTemplate/src/js/MyFile.min.js'
minurl: 'http://localhost74/ce623/source/out/meinTemplate/src/js/MyFile.min.js'
alturl: 'http://localhost74/ce623/source/out/meinTemplate/src/js/MyFile.min.js'

Falls eine Angabe bei “url”, “minurl” oder “alturl” vorhanden ist, kann ausgewählt werden welche der Dateien geladen wird.

loadurl: min # minurl wird geladen
loadurl: alt # alturl wird geladen

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 .