Über eine verfügen Ein schneller und leistungsfähiger Shop ist ein Schlüsselelement für den Erfolg jedes E-Commerce-Händlers. Die Ladegeschwindigkeit der Seiten wird vom Google Bot berücksichtigt und trägt somit zu Ihrem guten organischen Suchranking bei. Darüber hinaus werden die Nutzer immer anspruchsvoller bezüglich ihrer Navigationserfahrung in Online-Shops. Ein technisch leistungsfähiger Shop ist somit zu einer Voraussetzung geworden, um Ihre Konversionsraten zu optimieren und die Absprungraten oder Warenkorbabbrüche zu minimieren.
Das erste Eintreffen eines Nutzers auf einer Seite Ihres Online-Shops ist ein entscheidendes Element. Die Ladegeschwindigkeit dieser Seite hat einen direkten Einfluss auf die Wahrnehmung der Plattform.
Erhöhung der Absprungrate
Eine
Studie von Google hat den Einfluss der Ladezeit auf die Absprungrate hervorgehoben:
Erhöhung der Wahrscheinlichkeit der Absprungrate der Nutzer in Abhängigkeit von der Ladezeit.
Rückgang der Konversion und des Umsatzes
Das amerikanische Beratungsunternehmen Portent hat eine Studie zu 20 B2C- und B2B-Online-Shops durchgeführt und Daten von über 5,6 Millionen Nutzersitzungen gesammelt. Es hat festgestellt, dass jede zusätzliche Ladesekunde einen zutiefst negativen Effekt hatte auf die Konversionsraten des Shops:
Durchschnittliche Konversionsrate des Online-Shops in Abhängigkeit von der Ladezeit in Sekunden (1 Sekunde: 3,05 %; 2 Sekunden: 1,68 %; 3 Sekunden: 1,12 %; 4 Sekunden: 0,67 %).
Man kann dann leicht den entgangenen Gewinn aufgrund schlechter Leistungen des Online-Shops. Wenn 10 000 Personen Ihre E-Commerce-Website besuchen, um ein Produkt für 50 € zu kaufen, ergibt sich folgende Umsatzdifferenz:
Eine Seite, die in 1 Sekunde lädt und eine Konversionsrate von 3.05 % aufweist, generiert 15 250 €
Eine Seite, die in 2 Sekunden lädt und eine Konversionsrate von 1.68 % aufweist, generiert 8 400 €
Eine Seite, die in 3 Sekunden lädt und eine Konversionsrate von 1.12 % aufweist, generiert 5 600 €
Eine Seite, die in 4 Sekunden lädt und eine Konversionsrate von 0.67 % aufweist, generiert 3 350 €
Das bedeutet eine Umsatzdifferenz von fast 12 000 € !
Erhöhung der Anzahl der Kritiker
Die Erwartungen der Konsumenten steigen stetig:
83% der Online-Käufer sind der Meinung, dass dieangebotene Erfahrung ebenso wichtig ist wie das Produkt oder die verkaufte Dienstleistung
69% der Online-Käufer geben an, dass eineeinzige aussergewöhnliche Erfahrung ihre Erwartungen steigert gegenüber anderen Marken
In diesem Kontext können schlechte Leistungen Ihres Shops im Vergleich zu Ihren Konkurrenten Ihrem Markenimage schwer schaden!
Das Beratungsunternehmen Deloitte hat eine umfassende
Analyse des Verhaltens von Online-Nutzern durchgeführt. Ihre Studien berichten, dass
62 % der Online-Käufer bereit sind, ihre schlechten Einkaufserlebnisse mit Angehörigen zu teilen.
Im Gegensatz dazu kann ein optimierter Shop diese Kritiker in Befürworter verwandeln! 72 % der Käufer sind bereit, ihre guten Erfahrungen mit anderen zu teilen, und 67 % sind eher bereit, mehr auszugeben!
Die Core Web Vitals verstehen
Die Teams von Google Chrome haben Hauptmetriken die sich direkt auf die Nutzererfahrung auswirken, definiert: den LCP, denINP und den CLS. Sie stellen dar, wie die Nutzer die Ladegeschwindigkeit einer Webplattform und deren Interaktivität wahrnehmen.
Die LCP (Largest Contentful Paint) ist die benötigte Zeit, um das grösste Element anzuzeigen auf dem sichtbaren Bereich der Seite anzuzeigen. Ein LCP von weniger als 2,5 Sekunden gilt als gut, während ein LCP von über 4 Sekunden in der Regel Frustration hervorruft.
DerINP (Interaction to Next Paint) entspricht der benötigten Zeit, um eine visuelle Änderung nach der Benutzerinteraktion auszulösen mit einem Element. Ist sie zu lang (mehr als 500 ms), hat der Nutzer den Eindruck, dass sein Klick nichts ausgelöst hat. Übrigens wird der INP über eine gesamte Sitzung hinweg gemessen, um nur die schlechteste gemessene Zeit zu berücksichtigen.
Die
CLS (Cumulative Layout Shift)
bewertet die visuelle Stabilität einer Webseite. Die Idee ist es daher, zu messen, wie häufig Benutzer unerwartete Layout-Änderungen sehen (zum Beispiel Text, der abrupt die Position wechselt, oder ein CTA, der sich bewegt, kurz bevor man darauf klickt). Dieser Score ist schwieriger zu berechnen (die Formel kann eingesehen werden
hier) aber er muss so tief wie möglich sein (tiefer als 0,1).
Um das LCP zu optimieren, ist es notwendig, auf Folgendes zu achten zwei weitere Schlüsselmetriken die es direkt beeinflussen :
Die TTFB (Time To First Byte) stellt die Zeit dar, die das erste Datenbyte benötigt, um vom Server zum Browser und zurück zu gelangen, nachdem der Benutzer eine Anfrage gestellt hat (zum Beispiel auf einen Link geklickt hat). Für eine leistungsstarke Webseite streben Sie einen TTFB von weniger als 0,8 Sekunden an, um dem Benutzer ein Gefühl der Verzögerung zu ersparen.
Die FCP (First Contentful Paint) stellt die Zeit dar, die der erste Inhalt benötigt (insbesondere ein Text oder ein Bild), um auf der Seite angezeigt zu werden. Tatsächlich ist es intrinsisch mit dem TTFB verbunden. Es sollte ein FCP von weniger als 1,8 Sekunden angestrebt werden, um dem Benutzer ein Gefühl der Flüssigkeit zu vermitteln. Es kann daher interessant sein, eine vereinfachte visuelle Darstellung (Wireframe) des Elements anzuzeigen, das erscheinen wird, bis der endgültige Inhalt geladen ist.
Parallel zu den UX/UI-Anliegen können Sie durch die Arbeit an der Optimierung dieser KPIs ein optimales Navigationserlebnis für die Kunden Ihres Online-Shops gewährleisten.
Es gibt zwei Haupttools um die Leistung seines Online-Shops zu messen : die Online-Plattform PageSpeed Insights de Google sowie das Leistungsübersichtstabelle direkt zugänglich über das Backoffice von Shopify.
PageSpeed Insights
PageSpeed Insights ist ein von Google entwickeltes und kostenlos zur Verfügung gestelltes Tool, das die Analyse der Leistung von Webseiten ermöglicht. Die Plattform liefert Berichte über die Ladezeit und Effizienz von Seiten und weist auf Elemente hin, die deren Anzeige möglicherweise verlangsamen.
Beispiel für Performance-Ergebnisse, die mit dem Tool PageSpeed Insights erzielt wurden, für die Webversion der Webseite der Agentur Galadrim.
PageSpeed Insights ermöglicht es somit, Informationen für jedes Core Web Vital, das wir oben definiert haben, aber auch Empfehlungen zur Verbesserung der Leistung Ihrer Webseite zu erhalten.
Leistungsübersichtstabelle von Shopify
Die Die von Shopify angebotene Leistungsübersichtstabelle umfasst die Core Web Vitals definiert von Google :
Die Ladegeschwindigkeit (Largest Contentful Paint)
Die Interaktivität (Interaction to Next Paint)
Die visuelle Stabilität (Cumulative Layout Shift)
Jeder Indikator wird klassifiziert als „Gut“, „Mittelmässig“ oder „Schlecht“.
Beispiel einer Leistungsübersichtstabelle von Shopify, welche einen Index für Ladegeschwindigkeit anzeigt, einen Index für Interaktivität und einen Index für visuelle Stabilität.
Der wesentliche Vorteil dieses Dashboards ist, dass es Benutzerdaten Ihres Online-Shops präsentiert, während die von PageSpeed Insights generierten KPIs auf einer Simulation einer Benutzersitzung basieren, die von einem Roboter ausgeführt wird !
Shopify ermöglicht es, die Ergebnisse zu filtern, um nur die Daten von Web- oder Mobilnutzern anzuzeigen, um festzustellen, ob der Shop für ein bestimmtes Gerät weiter optimiert werden muss. Es ist auch möglich, einfach zusätzliche Informationen zu jeder Metrik zu erhalten, indem man auf die von Shopify automatisch generierten detaillierten Berichte zugreift !
Beispiel eines Shopify-Diagramms (Interaction to Next Paint INP).
Beispiel eines Shopify-Diagramms (Verlauf der Besuche realer Benutzer).
Das CMS stellt somit jedem Händler ein umfassendes Tool zur Verfügung, das es ermöglicht, die Leistung seines Shops ohne technische Kenntnisse zu visualisieren.
Die technische Architektur von Shopify verstehen
Shopify ist eine selbst gehostete Lösung die verschiedene Tools und Services bereitstellt, um die Stabilität und Skalierbarkeit Ihres Shops weltweit zu gewährleisten :
Die technischen Teams von Shopify arbeiten kontinuierlich an der Verbesserung der Leistung ihrer Server. Im Jahr 2023 präsentierte Shopify die
vorgenommenen Verbesserungen an ihrer Infrastruktur, welche zu einer Beschleunigung von 35% der auf dem CMS basierenden Shops führten.
Komplexen Liquid-Code vermeiden
Die Liquid-Sprache von Shopify ist sehr effizient und wird ständig von ihren technischen Teams optimiert. Allerdings beeinträchtigen bestimmte gängige Entwicklungsfehler ihre Leistung besonders. Dies ist insbesondere der Fall bei verschachtelten Schleifen oder bei zahlreichen Abfragen von unnötigen Daten. In einigen Fällen enthalten die im Shop vermarkteten Produkte eine grosse Anzahl von Metadaten, und ein schlecht konzipierter Code kann Hunderte von Überprüfungen dieser Eigenschaften auf der Produktseite durchführen, ohne dass dies einen wirklichen Nutzen hätte.
Falls dieser Komplexitätsgrad durch die Art Ihrer Produkte und die Funktionsweise Ihres Shops gerechtfertigt ist, ist es dennoch möglich, Ihre Herangehensweise neu zu strukturieren. Zum Beispiel ist es anstatt eines Mega-Menüs, das mit Schleifen organisiert wird, möglich, die Elemente sofort in Liquid sichtbar zu machen und die darunterliegenden Elemente asynchron geladen in JavaScript darzustellen.
Render-blockierende Ressourcen verarbeiten
Wenn ein Browser den HTML-Code analysiert, identifiziert er Links zu synchronen CSS- oder JavaScript-Dateien. Er lädt diese Dateien dann herunter, bevor er den Rest der Seite weiter rendert. Einige Ressourcen sind besonders ressourcenintensiv und verursachen besonders lange Verzögerungen, welche die Benutzererfahrung beeinträchtigen können.
Jede renderschwächende Ressource sollte nicht gelöscht werden. Zum Beispiel muss das CSS, das den Inhalt oberhalb der Faltlinie stilisiert, beibehalten werden, um Layout-Verschiebungen oder schnelle Blitze von ungestylten Inhalten zu vermeiden. Im Gegensatz dazu ist es möglich, das lazy loading (verzögertes Laden) für Dateien unterhalb der Faltlinie zu verwenden, um eine bessere Gesamtleistung zu erzielen.
Ebenso können Sie statische Ressourcen cachen wie Bilder und bestimmte JS-Dateien, um wiederkehrende Komponenten-Downloads zu reduzieren.
Anti-Flicker-Snippets korrekt integrieren
DerA/B testing ist eines der besten Tools, das Ihnen zur Verfügung steht, um die UX/UI Ihres Shops zu optimieren. Es kann jedoch einen „effet Flicker“, d.h. das sehr kurze Erscheinen eines Inhalts „A“, das fast sofort durch den Inhalt „B“ oder eine ungestylte Komponente ersetzt wird. Dies wirkt sich sehr negativ auf die Benutzererfahrung aus und birgt das Risiko, die Absprungrate zu erhöhen.
Um dieser Art von Verhalten vorzubeugen, ist es möglich, snippets anti-flicker. Sie verzögern die Anzeige der Seite bis zu einem bestimmten Punkt, um sicherzustellen, dass der richtige Inhalt für das Rendering bereit ist. Allerdings haben genau diese snippets einen negativen Effekt auf die Performance.
Es muss daher sichergestellt werden, dass der implementierte JavaScript-Code diese snippets schliesst, sobald die Tests während der Sitzung durchgeführt wurden, oder sie deaktiviert, wenn keine Tests eingerichtet wurden. Falls A/B-Tests über eine externe Anwendung verwaltet werden, ist es möglich, die Skripte in eine Liquid-Anweisung zu kapseln welche den Status des Tests überprüft und den entsprechenden Code deaktiviert, wenn er nicht relevant ist.
Zu viel HTML-Code vermeiden
Die Mega-Menüs sind sehr verbreitet auf E-Commerce-Plattformen und sind sehr nützlich um Käufern schnell viele Einstiegspunkte zu präsentieren. Allerdings erzeugen sie sehr viele DOM (Dokumentenmodelle). Ebenso haben Shops in der Regel zwei Versionen eines Menüs (eine für Desktop und eine für Mobile), anstatt es dynamisch über CSS zu ändern. Dies verdoppelt die Anzahl der DOM-Elemente.
In einigen Fällen kann diese übermässige Grösse des HTML innerhalb der Seite zu Verlangsamungen führen und beispielsweise durch Folgendes behoben werden:
Ein einziges Menü, das über CSS organisiert ist um auf Web und Mobile korrekt angezeigt zu werden.
Die Verwendung von Liquid, um die prioritär anzuzeigenden Elemente zu laden, und JavaScript, um die restlichen Daten abzurufen und im Hintergrund darzustellen.
Des Weiteren, stellen Sie sicher, dass mindestens ein Menü serverseitig gerendert wird um dem Google Bot zu helfen, Ihre Inhalte zu indexieren.
Bilder optimieren
Die unzureichende Optimierung von Bildern ist ein häufiges Problem in vielen Online-Shops. Zu grosse Bilder können sowohl das initiale Rendering einer Seite blockieren (wenn der Benutzer sie zum ersten Mal aufruft) als auch das Rendering von Elementen während der Navigation (z.B. beim Scrollen). Bevorzugen Sie ein modernes Bildformat und effizientes, wie zum Beispiel WebP und stellen Sie sicher, dass eine an das Gerät des Benutzers angepasste Grösse geladen wird (Desktop, Mobile oder Tablet). Auf Mobilgeräten können Bilder beispielsweise eine geringere Auflösung haben.
Ein weiteres häufiges Problem, das mit dem Tool PageSpeed Insights leicht identifiziert werden kann, ist die
fehlende explizite Dimensionen bei Bildern. Der Browser behandelt die Komponente so, als hätte sie eine Höhe von 0, und sobald das Bild geladen ist, wird der restliche Inhalt abrupt nach unten verschoben. Die einfachste Lösung, um dieses Verhalten zu vermeiden, ist,
die Höhen- und Breitenattribute zu definieren innerhalb des Tags
![]()
im CSS.
Wenn Sie Ihr eigenes Theme erstellen oder einen Dienstleister damit beauftragt haben, stellen Sie sicher, dass das Basis-CSS für alle Bilder von Anfang an im Projekt definiert ist. Es kann dann später manuell nach Bedarf angepasst werden.
Einige zusätzliche Monitoring-Tools
Zusätzlich zu PageSpeed Insights und dem Shopify Performance Dashboard können Sie auf einige zusätzliche Tools zurückgreifen, um die Analyse Ihres Onlineshops zu vertiefen.
Lighthouse Treemap
Lighthouse Treemap ist ein Visualisierungstool für JavaScript-Bundles, das über PageSpeed Insights zugänglich ist, das es ermöglicht, das Verhalten des Codes auf jeder Seite Ihrer Website leichter zu verstehen. Die Daten werden nach Kategorie und Grösse angezeigt. Jede Box repräsentiert eine JavaScript-Datei oder ein Modul, und ihre Grösse hängt von der Anzahl der Bytes ab, die sie repräsentiert.
Dieser visuelle Ansatz ermöglicht es, Elemente leichter zu erkennen, die die Performance des Shops beeinträchtigen können. Es ist besonders interessant, sich auf den Code von Drittanbieter-Anwendungen zu konzentrieren, um dessen Auswirkungen im Vergleich zu seiner Relevanz und Nützlichkeit zu beurteilen.
Performance DevTools
Der Tab Performance des DevTools ist direkt über den Chrome-Browser zugänglich. Es ermöglicht die Messung der Lade- und Ausführungszeit von Skripten auf einer Webseite und die Ergebnisse in Form von chronologischen Grafiken darzustellen.
Mehrere Grafiken sind besonders interessant, um Ihre Analysen zu leiten:
Die CPU-Auslastungs-Timeline, um die ressourcenintensivsten Operationen zu identifizieren.
Die Filmstrip Rendering, die darstellt, wann kritische Inhalte für die Benutzer sichtbar werden.
Die Timeline der Netzwerkanfragen, die die Initiierungs-, Ausführungs- und Abschlusszeit für jede Anfrage anzeigt.
Die Diagramm der Web Vitals das Details zu LCP, CLS und INP anzeigt.
Mit diesem Tool ist es sogar möglich, Drittanbieter-Domains zu blockieren, um die Performance zu vergleichen und die externen Elemente zu isolieren, die die Performance Ihrer Plattform am stärksten beeinträchtigen.
WebPageTest
WebPageTest ist ein Tool, das es ermöglicht, Geschwindigkeitstests für jede beliebige Seite der Website durchzuführen und Performance-Berichte zu erhalten. Es bietet somit Zugang zu Informationen, die PageSpeed Insights und dem von Shopify bereitgestellten Dashboard ähneln.
Das Tool bietet jedoch auch einen Konfigurator, um die durchgeführten Tests zu verfeinern, insbesondere durch die Definition von:
Der Ort auf der Welt, von dem aus die Simulation durchgeführt wird (was interessant ist, wenn Sie eine grosse internationale Kundschaft haben)
Der Browser (Chrome, Firefox oder Safari)
Die Verbindungsgeschwindigkeit
Die Bildschirmauflösung
Zudem liefert WebPageTest historische Daten um zu bestimmen, ob die Website schneller oder langsamer ist als zuvor.
Fazit
Als selbst gehostetes CMS, Shopify übernimmt die komplexesten Aspekte des Rollouts und der Skalierung eines Onlineshops. Gleichzeitig behalten Sie die Kontrolle über zahlreiche Parameter, um die Performance Ihrer Plattform zu optimieren. Die technische Performance Ihres Shops hat einen sehr wichtigen Einfluss auf Ihr Markenimage und das Einkaufserlebnis der Käufer. Folglich ist ein schneller und responsiver Webauftritt von entscheidender Bedeutung, um Ihren Umsatz zu maximieren.
Galadrim begleitet seit 7 Jahren Akteure jeder Grösse, in zahlreichen Sektoren, bei der Entwicklung und kontinuierlichen Verbesserung ihrer Onlineshops. Unsere Teams stehen Ihnen zur Verfügung, um Ihre Bedürfnisse zu verstehen und die relevantesten Lösungen zu bewerten, um Sie beim Wachstum Ihrer Aktivitäten zu begleiten.
_ZWR7SP.webp)
_MkvBH.webp)
