Hilfe
Einloggen

Verbesserung der Leistung deines Onlineshops

Dein Onlineshop besteht aus einer Reihe von Funktionen, wie z. B. Theme-Code, Apps, Bildern, Videos, Karussells, Social-Media-Feeds und Analysen. Diese Funktionen können das Besuchererlebnis verbessern und die Möglichkeiten deiner Website erweitern.

Allerdings kann jede Funktion, die du zu deinem Onlineshop hinzufügst, die Leistung deines Shops beeinträchtigen. Einige Funktionen können deine Website verlangsamen oder unerwartetes Verhalten verursachen, was sich auf das Benutzererlebnis auswirken kann.

Bei der Web-Performance geht es um die Optimierung des Benutzererlebnisses. Aktuell konzentriert sich die Web-Performance auf drei Hauptbereiche, die sich auch in den Core Web Vitals widerspiegeln:

  • Ladegeschwindigkeit, gemessen am Largest Contentful Paint (LCP)
  • Layoutstabilität, gemessen am Cumulative Layout Shift (CLS)
  • Reaktionsfähigkeit auf Benutzerinteraktionen, gemessen am Interaction to Next Paint (INP)

Die Optimierung der Web-Performance bedeutet, dass deine Kund:innen mit höherer Wahrscheinlichkeit auf deiner Website bleiben und konvertieren.

Auf dieser Seite

Optimierungen für deinen Onlineshop

Dein Onlineshop verfügt über eine integrierte Web-Optimierung. Die Web-Optimierung ist auch in alle neuen Funktionen integriert. Du musst nichts Besonderes tun, um von den folgenden Funktionen zu profitieren:

  • Dein Onlineshop wird auf schnellen, globalen Servern gehostet und die Bandbreite deines Shops ist nicht begrenzt. Du kannst den Status deines Shopify-Shops auf Shopify Status überprüfen.
  • Dein Onlineshop verfügt über ein von Cloudflare betriebenes Content Delivery Network (CDN), das sicherstellt, dass dein Onlineshop weltweit schnell geladen wird. Du kannst den CDN-Status auf der Cloudflare-Statusseite überprüfen.
  • Um schnelle Ladezeiten zu gewährleisten, werden Bilder automatisch mithilfe des Bild-CDN optimiert. In Kombination mit deinem Theme-Code kann das Bild-CDN das beste Bildformat bereitstellen, das außerdem in der Größe angepasst und komprimiert ist, um die Dateigrößen gering zu halten.

Faktoren, die die Web-Performance beeinflussen

Für Shopify-Shops sind die folgenden die größten Faktoren, die die Web-Performance beeinflussen:

  • Das Theme deines Onlineshops
  • Die Apps, die du installiert hast
  • Jeder zusätzliche Code von Drittanbietern, den du manuell zu deinem Shop hinzugefügt hast, einschließlich Tag-Managern und der darin enthaltenen Tags

Das bedeutet, dass du dich auf Folgendes konzentrieren solltest, um deine Web-Performance zu verbessern:

  • Verwende ein aktuelles, optimiertes Theme. Alle Themes der Horizon-Familie und die Online Store 2.0-Themes von Shopify sind kostenlos und für die Web-Performance optimiert. Zusätzlich sind auch viele andere Themes von Drittanbietern für die Web-Performance optimiert. Du kannst die neuesten Leistungsdaten für Themes einsehen.
  • Wenn dein Theme Seitenübergänge oder andere Animationen anbietet, vergleiche deine Web-Performance vor und nach deren Aktivierung. Animationen können Seiten verlangsamen.
  • Vermeide es, zu viele Abschnitte zu Seitenvorlagen in deinem Theme hinzuzufügen. Eine hohe Anzahl von Abschnitten auf Seiten kann die Web-Performance beeinträchtigen.
  • Wenn du Kollektionen mit einer großen Anzahl von Produkten hast, ziehe in Betracht, die Seitennummerierung zu aktivieren, um die Anzahl der gleichzeitig geladenen Produkte zu begrenzen.
  • Bewerte deine installierten Apps und den Code von Drittanbietern, um sicherzustellen, dass sie einen ausreichenden Mehrwert schaffen, um mögliche Leistungseinbußen auszugleichen.
  • Überprüfe deinen Tag-Manager, um ungenutzte oder geringwertige Tags zu entfernen. Erfahre mehr über Best Practices für Tags und Tag-Manager.

Test-Tools

Du kannst die folgenden Tools verwenden, um die Leistung deines Onlineshops zu untersuchen:

  • Web-Performance-Berichte: Die Web-Performance-Berichte von Shopify verwenden die Core Web Vitals, um zu messen, wie echte Benutzer:innen deinen Onlineshop erleben.
  • PageSpeed Insights: Du kannst mit PageSpeed Insights von Google deine eigenen Berichte erstellen, um detailliertere Kennzahlen für die Seiten in deinem Shop anzuzeigen.

Leistungsempfehlungen von Drittanbietern verstehen

Tools von Drittanbietern zur Überprüfung der Leistung schlagen möglicherweise Änderungen vor, um die Geschwindigkeit deines Shops zu verbessern. Viele dieser Empfehlungen sind jedoch bereits von Shopify umgesetzt oder gelten nicht für Shopify-Shops.

Bereits in Shopify enthaltene Optimierungen

Dein Shopify-Shop enthält automatisch die folgenden Leistungsoptimierungen:

Content Delivery Network (CDN): Shopify bietet ohne zusätzliche Kosten ein erstklassiges CDN, das eine schnelle globale Leistung gewährleistet. Alle Assets werden über HTTP/2 bereitgestellt, was den Overhead im Vergleich zu älteren Protokollen reduziert.

Browser-Caching: Shopify legt das Browser-Caching für zwischenspeicherbare Ressourcen auf ein Jahr fest, was der maximal möglichen Dauer entspricht. Das bedeutet, dass wiederkehrende Besucher:innen deines Shops schnellere Ladezeiten erleben.

Gzip-Komprimierung: Shopify verwendet die Gzip-Komprimierung für CSS, JavaScript, Dokumente und Seiten, um die Bandbreite zu reduzieren und die Ladezeiten zu verbessern. Keep-Alive ist ebenfalls für den Abruf mehrerer Dateien aktiviert.

Bildoptimierung: Shopify komprimiert JPG-Bilder automatisch mit fortschrittlichen Algorithmen, wobei ein Gleichgewicht zwischen Komprimierung und visueller Attraktivität gewahrt wird. Bilder werden oft im WebP-Format bereitgestellt, um eine bessere Komprimierung und ein schnelleres Laden zu ermöglichen.

Dateiminimierung: Shopify minimiert CSS- und JavaScript-Dateien automatisch, wenn sie von deiner Storefront angefordert werden, wodurch die Dateigrößen reduziert werden, ohne die Funktionalität zu beeinträchtigen.

Wann Empfehlungen von Drittanbietern nicht zutreffen

Scan-Tools von Drittanbietern schlagen möglicherweise Änderungen vor, die für Shopify-Shops nicht relevant sind:

  • Konfigurationen auf Serverebene: Empfehlungen zur Serverkonfiguration, zu HTTP-Headern oder zu Caching-Richtlinien sind bereits durch die Infrastruktur von Shopify optimiert.
  • CDN-Implementierung: Vorschläge zum Hinzufügen eines CDN sind unnötig, da Shopify standardmäßig ein Hochleistungs-CDN enthält.
  • Komprimierungseinstellungen: Empfehlungen zur Aktivierung der Komprimierung sind auf der gesamten Shopify-Plattform bereits umgesetzt.

Umsetzung relevanter Empfehlungen

Konzentriere dich auf Empfehlungen, die sich auf die spezifischen Inhalte und Funktionen deines Shops beziehen:

  • Bildoptimierung: Achte darauf, dass deine hochgeladenen Bilder die richtige Größe haben und empfohlene Formate verwenden.
  • App-Bewertung: Überlege, ob installierte Apps einen ausreichenden Mehrwert bieten, um mögliche Leistungseinbußen auszugleichen.
  • Theme-Optimierung: Wähle für die Leistung optimierte Themes und beschränke die Anzahl der Abschnitte in den Seitenvorlagen.

Fehlerbehebung bei langsam ladenden Seiten

Wenn dein Shop langsam lädt, befolge diese Schritte, um das Problem zu identifizieren und zu beheben:

Schritt 1: Das Problem überprüfen

  1. Teste die Ladegeschwindigkeit deines Shops selbst von verschiedenen Geräten und Internetverbindungen aus.
  2. Bitte andere, deinen Shop zu testen, um zu bestätigen, dass es sich nicht um ein lokales Problem mit deiner Internetverbindung handelt.
  3. Verwende Test-Tools wie PageSpeed Insights, um spezifische Leistungskennzahlen zu erhalten.

Schritt 2: Die Ursache identifizieren

Auf übermäßig viele Apps prüfen: Zu viele Apps, die Assets auf deiner Storefront laden, können die Leistung beeinträchtigen. Überprüfe deine installierten Apps und entferne alle, die für den Verkauf nicht unbedingt erforderlich sind.

Große Bilder überprüfen: Seiten mit zahlreichen hochwertigen Bildern können langsam laden. Optimiere deine Bilder oder reduziere die Anzahl der angezeigten Bilder. Erfahre mehr über empfohlene Bildgrößen.

Langsame Skripte identifizieren: Wenn deine Website als leere Seite hängen bleibt, bevor sie auf einmal geladen wird, verwende die Entwickler-Tools deines Browsers, um langsam ladende Skripte zu identifizieren. Kontaktiere den App- oder Theme-Entwickler, um das Problem zu beheben.

Schritt 3: Maßnahmen ergreifen

Unnötige Apps entfernen: Die Deinstallation einer App entfernt deren Code nicht automatisch aus deinem Theme. Möglicherweise musst du den App-Entwickler für eine vollständige Entfernungsanleitung kontaktieren.

Bilder optimieren: Verwende geeignete Dateiformate (JPG für Fotos, PNG für Grafiken mit Transparenz) und ändere die Größe der Bilder so, dass sie ihrer Anzeigegröße entsprechen.

Theme-Leistung bewerten: Erwäge einen Wechsel zu einem leistungsoptimierten Theme, wenn dein aktuelles Theme zu erheblichen Verlangsamungen führt.

Support für die Onlineshop-Leistung

Wenn du ein kostenloses Theme von Shopify verwendest, kann dir der Shopify Support möglicherweise bei grundlegenden Leistungsverbesserungen helfen.

Wenn du ein externes Theme verwendest und Hilfe benötigst, musst du dich an deine:n Theme-Entwickler:in wenden, eine:n Shopify-Web-Performance-Expert:in engagieren oder eine:n Shopify Partner:in für Website-Leistung und -Geschwindigkeit engagieren. Erfahre mehr über das Engagieren von Shopify Partnern.

Wenn dein Leistungsproblem von einer App verursacht wird, kannst du dich an deine:n App-Entwickler:in wenden.

Wenn du ein Entwicklungsteam oder eine:n Agenturpartner:in hast, kannst du dich für weitere Unterstützung auch an diese wenden.

Technische Informationen und Ressourcen zur Fehlerbehebung

Wenn du Entwickler:in bist und die Leistung einer Shopify-Storefront, eines Themes oder einer App verbessern möchtest, kannst du die folgenden Ressourcen für jeden Core Web Vital prüfen. Erfahre mehr über Best Practices für die Leistung von Shopify-Themes.

Ladegeschwindigkeit

Der Largest Contentful Paint (LCP) misst die Ladegeschwindigkeit, basierend darauf, wie schnell das größte Element auf dem Bildschirm sichtbar wird. Time to First Byte (TTFB) und First Contentful Paint (FCP) sind unterstützende Kennzahlen, die dir helfen, die eigentliche Ursache des Problems besser zu verstehen. Du kannst mehr über die Fehlerbehebung bei häufigen Ursachen für langsames Laden in Shopify-Liquid-Storefronts erfahren.

Visuelle Stabilität

Der Cumulative Layout Shift (CLS) misst die visuelle Stabilität, basierend darauf, wie stark sich der Inhalt beim Laden unerwartet verschiebt. Für einen detaillierten Einblick in die Fehlerbehebung bei CLS lies Cumulative Layout Shift (CLS) auf Shopify-Websites optimieren.

Interaktivität

Interaction to Next Paint (INP) misst die Interaktivität basierend darauf, wie lange es dauert, bis die Seite auf die meisten Benutzeraktionen reagiert. Zum Beispiel Benutzeraktionen wie das Klicken auf einen Link oder eine Schaltfläche.

Wenn du einen schlechten INP-Wert hast, hast du höchstwahrscheinlich zu viel JavaScript in deinem Shop, das entweder aus dem Theme-Code, dem App-Code oder dem Code von Drittanbietern/Tag-Managern stammt. Arbeite daran, die größten Verursacher zu bereinigen. Erfahre mehr in 3 Wege, die größten JavaScript-Verursacher für das Laden von Seiten zu finden. Wenn du weiterhin Probleme mit INP hast, findest du weitere Informationen in den Ressourcen auf web.dev.