Bei der Entwicklung können bestimmte Punkte berücksichtigt werden, um die Geschwindigkeit der Webseite und auch die Bewertung von z. B. Google PageSpeed Insights zu verbessern.
Inhaltsverzeichnis
Optimale Bilder
Bei einem Responsive Design ist es unabdingbar für ausgegebene Bilder die maximale Breite/Höhe innerhalb eines Viewports anzugeben. Dies sollte für alle Blöcke definiert werden (Details finden Sie hier). Verwenden Sie ggf. auch die Smarty Modifier max_image_width und max_image_height, um auch die Anzeige von z.B. Bildern zu optimieren, die direkt im Design eingebettet sind (z. B. Logo).
Das EGOCMS liefert automatisch alle Bilder auch als WebP Variante aus. Das passiert für alle Bilder, die mit der Smarty Funktion {value} und {picture} ausgegeben werden. Aktivieren Sie für den Mandanten bei Bedarf auch die automatische Umwandlung in Avif und/oder JPEG XL. Der Browser verwendet automatisch die Bildvariante, die unterstützt wird.
Bildschirme mit hoher Pixeldichte (DPR) erhalten ebenfalls automatisch optimierte Bilder. Das EGOCMS unterstützt hierbei folgene DPR Werte: 1.75x, 2x, 3x und 4x.
CSS und JS Dateien zusammenfassen
Wird das EGOCMS Image verwendet, wird Nginx standardmäßig mit folgenden Gzip Einstellungen konfiguriert:
gzip on;
gzip_vary on;
gzip_static on;
gzip_comp_level 6;
gzip_proxied any;
gzip_min_length 256;
gzip_types
application/json
application/javascript
application/x-javascript
application/xml
application/xml+rss
image/svg
image/svg+xml
text/css
text/javascript
text/plain
text/xml;
Damit werden statische CSS und JavaScript Dateien mit einem Gzip Kompressionslevel von 6 ausgeliefert (das gilt auch für andere Dateien wie JSON, XML und SVG).
In den Mandanten Einstellungen können Sie im Reiter "Dateien > Allgemein" die Option "Dateien zusammenfassen" aktivieren. Wenn Sie die Smarty Funktion {include_head_tags} einsetzen, werden alle Standard EGOCMS CSS und JavaScript Dateien in jeweils eine CSS und JS Datei gebündelt und eingebunden. Das verringert die im Browser zu ladenden Dateien. Die Standard EGOCMS CSS und JavaScript Dateien sind (jeweils inklusive Vererbung aus unterschiedlichen Pfaden, wie z.B. Seitentypen):
style.cssspan.cssimg.csslink.csstable.cssscript.js
Falls Ihr Design weitere CSS Dateien verwendet, können Sie diese in der style.css mit @import einbinden und Ihre Dateien werden beim Zusammenfassen automatisch hinzugefügt. Das Hinzufügen von importierten CSS Dateien in CSS Dateien funktioniert rekursiv. Beispiel:
/* Fonts */
@import url("assets/fonts/opensans/opensans.css");
@import url("css/roboto.css");
/* Icons */
@import url("assets/css/nucleo-icons.css");
Falls Ihr Design weitere JS Dateien verwenden, können Sie im site Verzeichnis des Mandanten oder des Designs eine script.json Datei ablegen. Beispiel:
{
"before": [
"pub/theme/material-kit/skin/assets/js/jquery.min.js",
"pub/theme/material-kit/skin/assets/js/plugins/nouislider.min.js",
"pub/theme/material-kit/skin/assets/js/plugins/wNumb.min.js",
"pub/theme/material-kit/skin/assets/js/core/popper.min.js",
"pub/theme/material-kit/skin/assets/js/core/bootstrap.min.js",
"pub/theme/material-kit/skin/assets/js/plugins/glidejs.min.js"
],
"after": [
"pub/theme/material-kit/skin/assets/parvus/parvus.min.js",
"pub/theme/material-kit/skin/assets/js/slick.min.js",
"pub/theme/material-kit/skin/assets/js/material-kit-pro.min.js"
]
}
Das Array mit den JS Datei Pfaden in before gibt die Dateien an, die vor den Standard EGOCMS JS Dateien eingebunden werden sollen und in after, die Dateien, die danach eingebunden werden sollen. Die Unterscheidung ist dann relevant, wenn z. B. Code in JS Dateien auf Code von vorherigen JS Dateien aufbaut.
Die generierten CSS und JS Dateien werden minifiziert und in pub/files/ abgelegt. Hier wird auch jeweils eine .gz Variante angelegt, welche mit einem Gzip Kompressionslevel von 9 erzeugt wird. Nginx verwendet wegen der Einstellung gzip_static automatisch die .gz Variante, sofern vorhanden.
CSS und JS Dateien asynchron laden
Bei der Verwendung der Smarty Funktion {include_head_tags} werden CSS und JS Dateien standardmäßig synchron geladen. Der Aufbau der Webseite pausiert somit, bis alle Dateien vollständig geladen sind. Die Einbindung der Dateien kann stattdessen asynchron erfolgen. Über den Array Parameter async kann über js, bzw. css angegeben werden, welche Dateien asynchron eingebunden werden sollen. Beispiel:
{include_head_tags async.js=true async.css=true}
Das asynchrone Einbinden von JS und CSS Dateien erfordert Umsicht. Der JS Code sollte auf das Event DOMContentLoaded warten, bevor es irgendwas beim Laden ausführt und das HTML Grundgerüst kann bereits sichtbar sein, bevor das CSS für die Darstellung vorhanden ist.
Prioritäten beim Laden definieren
Die Messwerte für z. B. Google PageSpeed Insights richten sich maßgeblich nach dem FCP und LCP. Prinzipiell geht es bei diesen Messwerten darum, wie schnell die Seite angezeigt werden kann, weil die notwendigen Dateien für die Anzeige bereits verfügbar sind.
Typischerweise haben Webseiten gerade im Header-Bereich große Bilder, die diese Messwerte beeinträchtigen können. Mit dem HTML Attribut fetchpriority="high" können Sie den Browser anweisen, bestimmte Bilder möglichst zuerst zu laden. Wenn Sie die Smarty {value} oder {picture} Funktion einsetzen, können Sie dieses Attribut über den Parameter attr setzen. Beispiel:
{picture src="..." attr.fetchpriority="high"}
Verwenden Sie das Attribut fetchpriority nur gezielt und sparsam. Der Effekt geht verloren, wenn Sie für zu viele Bilder auf einer Seite dieses Attribut setzen.
Falls Ihr Design Schriftarten Dateien einbindet, geben Sie diese im HTML <head> Bereich vorab an. Der Browser lädt die Dateien bevorzugt herunter, so dass diese den Aufbau der Webseite nicht verzögern. Dafür wird das HTML Element <link rel="preload"> verwendet. Beispiel:
<link rel="preload" href="{$egotec_conf.url_dir}pub/theme/{$site->theme}/skin/fonts/example.woff2" as="font" type="font/woff2" crossorigin="anonymous">
{include_head_tags}
Sinnvollerweise werden die Schriftarten Dateien vor jeglichen CSS Dateien eingebunden und somit vor der Smarty Funktion {include_head_tags}.
Eingeschränkter Cookie Consent
Ein Cookie Consent Dialog kann während den Messungen von z. B. Google PageSpeed Insights nachteilig sein. Dies hängt von der Darstellung des Cookie Consent ab: Wird dieser unauffällig in der Footer Zeile der Webseite angezeigt, kann das unproblematisch sein. Wenn aber der Cookie Consent in Form eines ausgrauenden Dialogs über die gesamte Webseite angezeigt wird, kann das bei den Messungen zu negativen Ergebnissen führen.
Es empfiehlt sich deshalb die Überlegung, den Cookie Consent gar nicht erst anzuzeigen, wenn ein Aufruf zu Messzwecken erfolgt. Im folgenden Beispiel wird der UserAgent und Browser Features geprüft, um festzustellen, ob der zugreifende Client evtl. kein echter Besucher sein kann:
const ua = navigator.userAgent;
if (
ua.includes('Chrome-Lighthouse')
|| ua.includes('Google Page Speed Insights')
|| ua.includes('HeadlessChrome')
|| navigator.plugins.length === 0
|| navigator.webdriver
) {
// Cookie Consent nicht anzeigen
}