Page Comparison

Reduzieren Sie nicht verwendetes JavaScript

Image Modified

Hier lässt sich im Standard kaum etwas machen. Der JTL Core bringt drei globale JS mit sich. Würde man hier Anpassungen vornehmen, wie zB. Variantenmöglichkeit entfernen, ist das nicht rückgängig zu machen. Änderungen in diesem Bereich bedeutet ein enormer Aufwand und ist sehr fehleranfällig, da JS nicht widgetspezifisch ist

Möglichkeiten:

• Externe Widgets wie das beliebte Instagram / Tiktok Widget in der Einbindungen prüfen -
  diese bringen meist eigene Google Analytics Skripte etc. mit und
  verdoppeln meist den Load.

• Individuelle Lösung mit der Entwicklung abstimmen.

Bilder richtig dimensionieren

Image Modified

Bilder, die über im easyTemplate360 gepflegt werden sollten jeweils für Mobil und Desktop unterschiedliche Formate haben.

Möglichkeiten

• Bildeinstellungen im Backen vs. Anzeige im Frontend vergleichen und anpassen

• WebP vom JTL Shop nutzen(muss das Hosting unterstützen)

• Tinify Erweiterung vom ET nutzen

• Bilder korrekt dimensionen, mit Tools wie tinify oder kraken.io komprimieren

• Bilder für Viewports einzeln pflegen (Desktop Panorama vs. Mobil Quadrat)

Erweiterte Möglichkeiten

• automatische Bildskalierungen

• weitere Bildformate und Dimensionen, die JTL nicht unterstützt

• AVIF Konvertierung für unterstütze Browser

Bilder in modernen Formaten bereitstellen

Image Modified

Ein beliebtes modernes Bildformat, das von den meisten Browsern unterstützt wird ist webP. Hier kann man mit einer Komprimierung der Blider auf unter 200 kB auf den LCP positiv einwirken.

Möglichkeiten

• Konvertieren der Bilder

• Man kann webp Bilder im eT Backend hochladen

Übermäßige DOM-Größe vermeiden

Image Modified

Die Flexibilität und verschiedenen Einstellungsmöglichkeiten im easyTemplates360 schlägt sich in der DOM-Größe nieder. Minimierung der DOM-Knoten gehen zu Lasten der Flexibilität. Meist ein Hinweis darauf, dass umfangreiche Menüs / Slider mit vielen Artikeln benutzt werden. Je komplexer und beweglicher die Elemente desto mehr DOM Knoten werden erzeugt. Wird grundsätzlich kaum von User wahrgenommen.

Möglichkeiten

• Menge der Artikel in Produktslidern limitieren. Das reduziert DOM Knoten und die Slides von Usern kaum wahrgenommen/geslidet werden

• Menü verschlanken

Erweiterte Möglichkeiten

• in Edge Cases und begründeter Notwendigkeit kann der DOM durch Überarbeitung verschlankt werden (mit der Entwicklung besprechen)

• Drop Down Menüs per AJAX nachladen - Anpassung im Child Template

Largest Contentful Paint-Bild wurde mit Lazy Loading geladen

Image Modified

Empfohlen wird von Google: Laden von Bildern innerhalb des anfänglichen Ansichtsfensters ohne Lazy Loading – während beim Rest Lazy Loading angewandt wird → weniger geladene Bytes und verbesserte Core Web Vitals https://web.dev/lcp-lazy-loading/?utm_source=lighthouse&utm_medium=lr

→ im easyTemplate360 nicht anwendbar, da hier die Möglichkeit besteht, die Widgets zu verschieben und selbst zu entscheiden, welches Widget an oberster Stelle gestellt wirdn (above the fold)

Erweiterte Möglichkeit:

• Bei gleichbleibender Struktur individuelle Entwticklung: Bei Header Widgets LazyLoading entfernen

Aufwand für Hauptthread minimieren

Image Modified

Hier wären Anpassungen am JTL Core notwendig. JS wir im Standard asynchron nachgeladen bis auf jQuery und LazySizes. Änderung beeinträchtigt die Kompatibilität mit Plugins.

Verwendet keine passiven Listener zur Verbesserung der Scrollleistung

Image Modified

Event Listeners passiv machen, um die Scroll-Performance zu verbessern. Wird oftmals bei Third Party Elementen von Google beanstandet, u.a. auch Google Maps.

Möglichkeiten

• Betroffene Third Party Integartionen anzeigen lassen und ggf. austauschen

Bildelemente haben keine explizite width und height

Image Modified

Damit sich die Bilder an die verschiedenen Endgeräte anpassen können wird nur das Seitenverhältnis mitgegeben und keine festgelegte Höhe und Breite. Wird gerade für easyTemplate360 erarbeitet und getestet. (Stand Okt. 2022)

Erweiterte Möglichkeit

• Im Child Template an jedes Bild für jeden Breakpoint eine feste Breite und Höhe des Bildes schreiben.

Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen

Image Modified

Hier ist von der Server htaccess Einsetllung von Cache Gültigkeit die Rede. Im JTL Standard beträgt die Gültigkeit 1 Monat. Google setzt in seinen Richtlinien jedoch 1 Jahr an.

Erweiterte Möglichkeiten:

• Bei manchen Servern und Caches kann einen Cache Control Header mitgeschickt werden, der 1 Jahr speichert. Zu beachten dass beim Austausch von Bildern der Name des Bildes geändert werden muss, sonst bleiben die Bilder für 1 Jahr die selben.

First Contentful Paint (3G)

Image Modified

Ungenutztes CSS lässt sich wie bereits bei dem JS nicht einfach auseinandernehmen und einzeln bearbeiten.

Spezifische Diagnose vom Entwickler erforderlich. Folgende Themen sollten dafür diagnostiziert und
ggf. angegangen werden:

• Beseitigen Sie Rendering-blockierende Ressourcen

• CSS verkleinern

• Ungenutzte CSS entfernen

• Vorab-Verbindung zu erforderlichen Ursprüngen

• Verkürzung der Server-Antwortzeiten (TTFB)

• Vermeiden Sie mehrfache Seitenumleitungen

• Wichtige Anfragen vorladen

• Vermeidung enormer Netzwerk-PayloadsStatische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen

• Vermeiden einer übermäßigen DOM-Größe

• Minimierung der kritischen Anforderungstiefe

• Sicherstellen, dass Text beim Laden von Webfont sichtbar bleibt

• Halten Sie die Anzahl der Anfragen niedrig und die Übertragungsgrößen klein

Ressourcen, die das Rendering blockieren

Image Modified

eT / JTL Ressourcen können nicht ohne großen Aufwand reduziert werden. Im eT befindet sich critical CSS.

Möglichkeiten

• Template Einstellung - Komprimieren von JS prüfen
  CPU-lastig, daher bei Änderungen auch TTFB und allgemeinen Seitenaufbau prüfem

• externe Analyse Skripte können im GTM gebündelt oder später nachgeladen werden

• externe Plugin JS Files: hier kann nur der Hersteller informiert werden

Erweiterte Möglichkeiten

• individuelle Ladestrategie pro Seitentyp implementieren, beispielsweise braucht es keine Newsletter Komponenten, wenn dieser nur auf speziellen Seiten zur Anmeldung bereitsteht

• Umbau der JTL eigenen Komponenten auf Google Empfehlung

Nicht sichbare Bilder aufschieben

Image Modified

Es sollten nur Elemente unterhalb above the fold über Lazy Loading geladen werden. Im easyTemplate360 werden viele Elemente bereits über Lazy Loading geladen, wie z.B. Produktslider. Jedoch besteht die Möglichkeit besteht, die Widgets zu verschieben und selbst zu entscheiden, welches Widget unter above the fold stehen wird. Deshalb ist eine einheitliche Lösung schwer umsetzar.

Erweiterte Möglichkeiten

• Im Child Template an Elemente unterhalb above the fold Lazy Loading schreiben.

Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Image Modified

Prüfung ob es sich dabei um Schriftarten oder Icons handelt. Da es bei Icons kein default gibt, gibt es hier keine Möglichkeiten.

Erweiterte Möglichkeiten

• In jeden Font Eintrag font-display:swap integrieren

Reduzieren Sie nicht verwendete CSS

Image Modified

Best practices sind bereits im eT integriert.

Möglichkeiten:

• Evtl. prüfen, ob Dateigröße deutlich über vergleichbaren Shops → dann externe Plugins prüfen

Erweiterte Möglichkeiten:

• Individuelle Lösungen und manuelles Entfernen nicht benötigter Komponenten können Entwicklerseitig angegangen werden. Doch hier kann es dazu kommen, dass später genutzte Komponenten damit nicht funktionieren und wieder eingepflegt werden müssen.

Die Auswirkung von Drittanbieter-Code minimieren

Image Modified

Drittanbieter, um die es sich handelt, eruieren und deren Skripte überprüfen, ob sie den kritischen Rendering-Pfad nicht beeinträchtigen und ggf. Probleme beheben.

Diese könnten bspw. sein: Video-Einbettungen, iFrames für Anzeigen und andere Inhalte, Google-Produkte, wie Google Analytics ect., Bibliotheken für JavaScript, Schriftarten, Suchmaschinenanbieter uvm.

Erstreaktionszeit des Servers verringern

Image Modified

Hier sind Investitionen in den Server notwendig.

Möglichkeiten:

• Shopseitiges Caching aktivieren.

Erweiterte Möglichkeiten

• Serverseitiges Caching einbauen (sehr komplex und aufwändig).

Verhindern, dass in modernen Browsern veraltetes JavaScript bereitgestellt wird

Image Modified

Kommt oft von Drittanbieter Plugins.

Möglichkeiten:

• Drittanbieter Plugins prüfen.

Sehr große Netzwerknutzlasten

Image Modified

Gesamtbytegröße sollte unter 1600 kB liegen.

• zu große Bilder komprimieren

• TinyPng im easyTemplate360 nutzen

• Google empfiehlt Bildformat WebP anstelle von JPEG/PNG → Muss vom Hosting/Shopversion unterstützt werden, dann eigene Anpassung mit Konverter möglich.

• Anfragen zwischenspeichern (Cache requests), damit die Seite bei wiederholten Besuchen nicht erneut herunterlädt.

Bilder effizient codieren

Image Modified

Möglichkeiten Bilder zu optimieren

• Verwendung von Bild-CDNs - Achtung: DSGVO-relevant. Durch Anwalt prüfen lassen.

• Bilder komprimieren

• Ersetzen von animierten GIFs durch Videos

• Lazy loading Images

• Responsive Bilder bereitstellen

• Bilder mit korrekten Abmessungen bereitstellen

• Google empfiehlt Bildformat WebP anstelle von JPEG/PNG → Muss vom Hosting/Shopversion unterstützt werden, dann eigene Anpassung mit Konverter möglich.

Nutzung von HTTP/2

Image Modified

HTTP wurde am 14 Mai 2015 eingeführt. Kunden mit Enterprise Hostings unterstützen bereits HTTP3 / QUIC

Check ist hier möglich: https://http3check.net/

Erweiterte Möglichkeiten:

• Hostingberatung / Wechsel

TTFB

Image Modified

Möglichkeiten:

• Hosting prüfen

• Prüfen, ob geeignete Objectcache Methode (Redis, APCu, SQLite) zur Verfügung stehen und aktiviert sind

• bei kleinen Hostings CPU Intensive Widgets deaktivieren oder reduzieren
  (dynamische Artikel Slider wie “Neue Produkte, Bestseller” etc. - diese werden über die Gesamtheit aller Artikel geladen)

Erweiterte Möglichkeiten:

• HTTP Cache

• Hosting-Wechsel

• individuelle Caching Lösungen