Ein langsamer Shop ist frustrierend, für Sie und für Ihre Kunden. Seiten brauchen eine Weile, bis sie erscheinen, Bilder laden stückweise, Buttons reagieren nicht sofort oder das Layout springt, während die Seite noch lädt.
Da Shopify eine gehostete Plattform ist, verwalten Sie die Server nicht selbst. Shopify kümmert sich um Hosting, das Content Delivery Network und einen Großteil der Infrastruktur. Die Ursache eines langsamen Shops ist daher meist nicht „der Server“, sondern das, was darauf geladen wird:
- Apps und die Skripte, die sie hinzufügen
- Bilder und Videos
- das Theme und seine Funktionen
- Tracking- und Marketing-Tools
- eigener Code, der im Lauf der Zeit hinzugekommen ist
Die gute Nachricht: Das meiste davon haben Sie selbst in der Hand. Die weniger gute Nachricht: Geschwindigkeit lässt sich selten mit einer einzigen Änderung verbessern. Der nützlichste erste Schritt ist, richtig zu messen, damit Sie wissen, was tatsächlich langsam ist, bevor Sie etwas ändern.
Dieser Leitfaden erklärt die häufigen Ursachen, wie Sie die Geschwindigkeit so messen, dass sie die Erfahrung echter Kunden widerspiegelt, welche Verbesserungen meist schnell umsetzbar sind und welche tiefere Arbeit erfordern.
Was bedeutet „langsam“ eigentlich?
Verschiedene Menschen meinen mit einem langsamen Shop Verschiedenes, und jedes deutet auf eine andere Ursache hin.
Die Seite braucht lange, bis sie erscheint
Der Bildschirm bleibt eine Weile leer oder fast leer. Das hängt oft mit großen Bildern im oberen Seitenbereich, schweren Theme-Abschnitten oder Skripten zusammen, die vor dem Inhalt geladen werden müssen.
Die Seite erscheint, reagiert aber nicht
Sie sehen die Seite, aber ein Tippen auf das Menü, einen Filter oder den Button „In den Warenkorb“ bewirkt einen Moment lang nichts. Das liegt meist an zu viel JavaScript im Browser, oft von Apps und Tracking-Tools.
Das Layout springt beim Laden
Text rutscht nach unten, wenn ein Bild oder Banner erscheint, oder ein Button verschiebt sich genau in dem Moment, in dem Sie darauf tippen wollen. Ursache sind oft Bilder ohne festgelegte Abmessungen, spät ladende Banner, Pop-ups oder App-Widgets, die sich in die Seite einfügen.
Nur einige Seiten sind langsam
Wenn nur Produktseiten, große Kollektionen oder Suchergebnisse langsam sind, liegt die Ursache wahrscheinlich in diesen Vorlagen: viele Produktbilder, Filter, Bewertungs-Widgets oder Empfehlungs-Apps.
Wenn Sie wissen, welche dieser Situationen vorliegt, geht die Untersuchung deutlich schneller.
Was sind Core Web Vitals?
Core Web Vitals sind eine Reihe von Messwerten, mit denen Google beschreibt, wie sich das Laden und Nutzen einer Seite anfühlt. Es gibt drei:
- Largest Contentful Paint (LCP) misst, wie schnell der Hauptinhalt erscheint, oft das Hero-Bild oder das Hauptbild des Produkts.
- Interaction to Next Paint (INP) misst, wie schnell die Seite reagiert, wenn jemand tippt oder klickt.
- Cumulative Layout Shift (CLS) misst, wie stark sich das Layout beim Laden unerwartet verschiebt.
Google veröffentlicht für jeden dieser Werte Zielwerte und stuft Ergebnisse als gut, verbesserungswürdig oder schlecht ein. Tools wie PageSpeed Insights zeigen Ihnen, in welche Kategorie Ihre Seiten fallen.
Core Web Vitals sind nicht das Einzige, was für einen Shop zählt, aber sie sind eine nützliche gemeinsame Sprache. Sie spiegeln außerdem echte Probleme wider, die Kunden bemerken: Warten, nicht reagierende Buttons und springende Layouts.
Wie messe ich die Geschwindigkeit meines Shops?
Es gibt zwei Arten von Daten, und es ist wichtig, sie nicht zu verwechseln.
Labordaten: ein Test durch ein Tool
Wenn Sie eine Seite mit PageSpeed Insights prüfen, lädt das Tool die Seite in einer simulierten Umgebung und liefert eine Punktzahl und eine Liste von Vorschlägen. Das nennt man Labordaten.
Labordaten sind nützlich, um:
- bestimmte Probleme zu erkennen, etwa zu große Bilder oder schwere Skripte
- den Zustand vor und nach einer Änderung zu vergleichen
- Seiten zu testen, die noch wenig Traffic haben
Die Punktzahl kann jedoch von Test zu Test schwanken und spiegelt nicht unbedingt wider, was Ihre Kunden auf ihren eigenen Geräten und Verbindungen erleben.
Felddaten: was echte Besucher erleben
Wenn Ihr Shop genug Traffic hat, zeigt PageSpeed Insights auch Daten, die in den letzten Wochen bei echten Chrome-Nutzern erhoben wurden. Sie erscheinen oben im Bericht und zeigen die Core Web Vitals für diese Seite oder die gesamte Website.
Shopify bietet in den Analysen im Admin außerdem einen Bericht zur Web-Performance, der auf echten Besuchen Ihres Shops basiert. Er zeigt, wie sich Ihre Core Web Vitals im Lauf der Zeit verändern, und kann helfen, Änderungen der Geschwindigkeit mit Ereignissen wie der Installation einer App oder einem Theme-Wechsel in Verbindung zu bringen.
Felddaten kommen der Wahrheit über die Erfahrung Ihrer Kunden näher. Wenn Labor- und Felddaten voneinander abweichen, geben Sie den Felddaten mehr Gewicht.
Testen Sie die richtigen Seiten
Testen Sie nicht nur die Startseite. Kunden landen über Suche oder Anzeigen oft direkt auf Produkt- und Kollektionsseiten. Testen Sie mindestens:
- die Startseite
- eine beliebte Kollektionsseite
- eine beliebte Produktseite
- den Warenkorb
Testen Sie auf Mobilgeräten ebenso wie am Desktop. Die meisten Shops erhalten einen großen Teil ihres Traffics über Smartphones, die meist langsamere Prozessoren und Verbindungen haben.
Was macht einen Shopify-Shop meistens langsam?
Zu viele Apps und Skripte
Jede App, die der Storefront etwas hinzufügt, lädt möglicherweise eigenes JavaScript, eigene Stylesheets, Schriften oder Anfragen an externe Server. Eine einzelne App macht selten einen großen Unterschied. Zehn oder zwanzig zusammen schon.
Häufige Verursacher sind:
- Bewertungs-Widgets
- Pop-ups und Formulare zur E-Mail-Erfassung
- Live-Chat
- Upsell- und Cross-Sell-Tools
- Währungsrechner und Übersetzungs-Tools
- Widgets für Produktempfehlungen
- Treue- und Empfehlungsprogramme
Auch deinstallierte Apps können Code im Theme hinterlassen, der weiterhin zu laden versucht. Wie Sie ihn finden, lesen Sie unter Woran erkenne ich, ob eine Shopify-App ein Problem verursacht?.
Große Bilder und Videos
Shopify liefert Bilder automatisch über sein Content Delivery Network aus und kann verkleinerte Versionen bereitstellen, aber nur, wenn das Theme sinnvolle Größen anfordert. Probleme entstehen oft durch:
- sehr große Originaldateien, die für Banner und Slideshows hochgeladen wurden
- Hero-Videos, die automatisch abgespielt werden
- Slideshows mit vielen Bildern in voller Breite
- Bilder, die über Rich Text oder Page Builder ohne Größenkontrolle eingefügt wurden
- GIF-Animationen, wo ein kurzes Video oder ein Standbild genügen würde
Das Bild ganz oben auf der Seite ist am wichtigsten, weil es meist das ist, was Largest Contentful Paint misst.
Ein schweres oder stark angepasstes Theme
Manche Themes enthalten viele Funktionen: Mega-Menüs, Animationen, Schnellansicht, mehrere Slider, fixierte Elemente. Jede Funktion bringt Code mit. Anpassungen, die über die Jahre von verschiedenen Entwicklern hinzugefügt wurden, können sich ebenfalls anhäufen und manchmal Funktionen doppeln oder Bibliotheken laden, die das Theme bereits hat.
Ein älteres Theme nutzt möglicherweise nicht die effizienteren Ansätze aktueller Themes.
Tracking von Drittanbietern
Marketing- und Analyse-Tools sind wertvoll, aber jedes erzeugt zusätzliche Arbeit für den Browser. Shops haben oft:
- mehrere Analyse-Tools, die ähnliche Daten erfassen
- Werbepixel mehrerer Plattformen
- Tools für Heatmaps und Sitzungsaufzeichnung
- Tag-Manager-Container, die weitere Tags laden
- alte Tracking-Codes aus beendeten Kampagnen
Diese können besonders die Reaktionsfähigkeit beeinträchtigen, weil sie JavaScript ausführen, während der Kunde versucht, die Seite zu nutzen.
Schriften und externe Ressourcen
Eigene Schriften, Icon-Bibliotheken und eingebettete Inhalte wie Social-Media-Feeds oder Karten erzeugen zusätzliche Anfragen. Mehrere Schriftfamilien und Schriftschnitte summieren sich schnell.
Große Kollektionen und komplexe Filter
Kollektionsseiten mit vielen Produkten, jeweils mit mehreren Bildern, Farbfeldern und Badges, können schwer werden. Filter, endloses Scrollen und Schnellansichten kommen noch hinzu.
Was sind die schnellen Erfolge?
Diese Änderungen sind oft risikoarm und können einen sichtbaren Unterschied machen. Nehmen Sie jeweils eine Änderung vor und messen Sie erneut.
- Entfernen Sie Apps, die Sie nicht mehr nutzen. Prüfen Sie vorher, ob sie Daten enthalten, die Sie brauchen.
- Schalten Sie App-Einbettungen ab, die Sie nicht auf jeder Seite brauchen. Manche lassen sich einschränken oder aus dem Theme entfernen.
- Komprimieren und verkleinern Sie große Bilder vor dem Hochladen, besonders Banner und Slideshow-Bilder.
- Ersetzen Sie automatisch abspielende Hero-Videos durch ein Standbild oder prüfen Sie, ob das Video kurz und optimiert ist.
- Reduzieren Sie die Anzahl der Slides in Slideshows auf der Startseite.
- Prüfen Sie Ihre Tracking-Tools und entfernen Sie Dubletten oder alte Kampagnenpixel, nachdem Sie das mit der für das Marketing verantwortlichen Person abgestimmt haben.
- Begrenzen Sie Schriftfamilien und Schriftschnitte in den Theme-Einstellungen.
- Reduzieren Sie die Anzahl der Produkte pro Seite auf sehr schweren Kollektionsseiten.
Schnelle Erfolge lohnen sich, lösen aber nicht jeden Fall. Wenn der Shop danach immer noch langsam ist, muss meist der Code genauer betrachtet werden.
Was erfordert tiefere Arbeit?
Manche Verbesserungen erfordern einen Entwickler und sorgfältige Tests:
- Code-Reste deinstallierter Apps entfernen
- optimieren, wie das Theme Skripte und Stylesheets lädt
- nicht wesentliche Skripte zurückstellen oder verzögert laden
- Layoutverschiebungen durch Bilder, Banner oder App-Widgets beheben
- eigenen Liquid-Code prüfen, der unnötige Arbeit verrichtet
- Funktionen zusammenführen, die von mehreren sich überschneidenden Apps übernommen werden
- auf ein moderneres Theme umsteigen, was ein eigenes Projekt ist
- das Tracking-Setup prüfen, damit Tags effizienter laden
Tiefere Arbeit sollte immer an einem duplizierten Theme erfolgen, mit Messungen vorher und nachher und mit einem vollständigen Test von Warenkorb und Checkout vor der Veröffentlichung.
Was sollte ich vermeiden?
- Einer perfekten PageSpeed-Punktzahl hinterherjagen. Die Punktzahl ist ein Anhaltspunkt, nicht das Ziel. Wichtiger ist ein Shop, den Kunden als schnell und einfach zu bedienen empfinden.
- Eine Geschwindigkeits-App installieren, ohne zu verstehen, was sie tut. Manche ändern das Laden von Skripten so, dass andere Apps oder das Tracking nicht mehr funktionieren.
- Tracking entfernen, ohne nachzufragen. Marketingberichte und Werbekampagnen können davon abhängen.
- Viele Dinge auf einmal ändern. Sie wissen dann nicht, welche Änderung geholfen und welche etwas kaputt gemacht hat.
- Das Live-Theme bearbeiten. Arbeiten Sie immer zuerst an einem Duplikat.
- Nach einem einzigen Test urteilen. Führen Sie Tests mehrmals durch und betrachten Sie die Felddaten über einen längeren Zeitraum.
Wann sollte ich Unterstützung anfragen?
Ziehen Sie einen Entwickler hinzu, wenn:
- der Shop auch nach dem Entfernen ungenutzter Apps und dem Optimieren großer Bilder langsam ist
- die Felddaten auf vielen Seiten schlechte Core Web Vitals zeigen
- Sie Code-Reste von Apps oder schweren eigenen Code vermuten
- die Geschwindigkeitsprobleme nach einem Theme-Update oder einer neuen App aufgetreten sind
- der Button „In den Warenkorb“ oder die Menüs träge reagieren
- Sie einen Theme-Wechsel hauptsächlich wegen der Geschwindigkeit in Betracht ziehen
- die Conversion-Rate gesunken ist und die Geschwindigkeit eine Rolle spielen könnte
Welche Informationen sollte ich sammeln?
Hilfreich sind:
- die URLs der Seiten, die sich langsam anfühlen
- die Ergebnisse von PageSpeed Insights für diese Seiten, am besten als Links oder Screenshots gespeichert
- der Bericht zur Web-Performance aus den Shopify-Analysen, falls verfügbar
- eine Liste der installierten Apps und der letzten Änderungen
- Name und Version des Themes
- welche Tracking-Tools im Einsatz sind und wer sie verwaltet
- seit wann sich der Shop langsamer anfühlt, falls Sie es wissen
Wie D4Hub helfen kann
Bei der Verbesserung der Geschwindigkeit geht es darum, die echten Engpässe zu finden und zu beheben, ohne Funktionen oder Tracking zu beschädigen, auf die das Geschäft angewiesen ist.
Je nach Shop unterstützt D4Hub Sie bei:
- der Messung der Geschwindigkeit mit Labordaten und echten Nutzerdaten
- dem Ermitteln, welche Apps, Skripte und Bilder den größten Einfluss haben
- dem Entfernen von Code-Resten deinstallierter Apps
- der Optimierung, wie das Theme Bilder, Skripte und Schriften lädt
- der Behebung von Layoutverschiebungen auf wichtigen Seiten
- der Prüfung des Tracking- und Tag-Setups gemeinsam mit Ihrem Marketingteam
- dem Testen von Änderungen an einem duplizierten Theme vor der Veröffentlichung
- der Kontrolle von Warenkorb und Checkout nach jeder Änderung
- der Beratung, ob sich ein Theme-Wechsel lohnt
Sie können in jeder Phase Unterstützung anfragen, von einer kurzen Durchsicht Ihrer PageSpeed-Ergebnisse bis zu einem vollständigen Performance-Projekt.
Support-Ticket eröffnenFür Praktiker: Geschwindigkeit messen und testen
Diese Schritte richten sich an Personen, die sicher mit dem Shopify-Theme-Editor und den Entwicklertools des Browsers umgehen. Nehmen Sie Änderungen nur an einem duplizierten Theme vor und lassen Sie das Live-Theme unberührt, bis Sie getestet haben.
Halten Sie einen Ausgangswert fest
Bevor Sie etwas ändern, prüfen Sie Ihre Startseite, eine Kollektionsseite und eine Produktseite mit PageSpeed Insights. Speichern Sie die Links zu den Berichten oder Screenshots mit Datum. Prüfen Sie die Ergebnisse für Mobilgeräte und Desktop und sehen Sie sich, falls verfügbar, den Bereich mit den Felddaten oben an.
Wenn Ihr Admin unter Analytics einen Bericht zur Web-Performance anzeigt, notieren Sie die aktuellen Core-Web-Vitals-Werte und den Verlauf der letzten Wochen.
Erstellen Sie ein dupliziertes Theme zum Testen
Gehen Sie im Shopify-Admin zu Online Store > Themes (Onlineshop > Themes), öffnen Sie das Aktionsmenü neben dem Live-Theme und wählen Sie Duplicate (Duplizieren). Benennen Sie die Kopie eindeutig, zum Beispiel „Speed-Test“ mit Datum. Nutzen Sie die Vorschau dieser Kopie für jeden Test.
Testen Sie die Wirkung der App-Einbettungen
Öffnen Sie das Duplikat mit Customize (Anpassen) im Theme-Editor und dann den Bereich App embeds (App-Einbettungen). Schalten Sie jeweils eine Einbettung ab, öffnen Sie die Vorschau des Duplikats und führen Sie einen Labortest auf derselben Seite durch. Vergleichen Sie das Ergebnis mit Ihrem Ausgangswert.
Laborergebnisse einer Vorschau sind nur ein Anhaltspunkt, aber eine große Veränderung nach dem Abschalten einer Einbettung zeigt deutlich, wo Sie suchen sollten.
Prüfen Sie die Bereiche Network und Performance
Öffnen Sie eine Produktseite, dann die Entwicklertools Ihres Browsers, und sehen Sie sich den Tab Network (Netzwerk) bei deaktiviertem Cache an. Sortieren Sie nach Größe und achten Sie auf:
- sehr große Bilder
- Videos, die oben auf der Seite geladen werden
- Skripte von Domains, die Sie nicht kennen
- Anfragen an Apps, die Sie deinstalliert haben
Der Bereich Performance (Leistung) kann lange Aufgaben anzeigen, die die Seite beim Laden blockieren. Skriptnamen in diesen Aufgaben verweisen oft auf eine bestimmte App oder ein bestimmtes Tracking-Tool.
Prüfen Sie das Hauptbild
Das Bild ganz oben auf einer Seite bestimmt oft den Largest Contentful Paint. PageSpeed Insights zeigt meist an, welches Element gemessen wurde. Prüfen Sie, ob dieses Bild nicht zu groß ist und nicht auf verzögertes Laden (Lazy Loading) eingestellt ist, denn das erste sichtbare Bild sollte normalerweise sofort laden.
Suchen Sie nach Code-Resten von Apps
Nutzen Sie im Duplikat Edit code (Code bearbeiten) und suchen Sie in layout/theme.liquid und im Ordner Snippets nach Verweisen auf Apps, die Sie nicht mehr nutzen. Kommentieren Sie gefundene Stellen aus, statt sie zu löschen, und testen Sie dann den Shop in der Vorschau, einschließlich Warenkorb und Checkout.
Messen Sie erneut
Führen Sie nach jeder Änderung dieselben Tests auf denselben Seiten durch. Führen Sie ein einfaches Protokoll darüber, was Sie geändert haben und was passiert ist. Übernehmen Sie Änderungen erst dann in das Live-Theme, wenn Sie sicher sind, dass sie helfen und nichts beschädigen.
D4Hub kann Ihnen helfen, die Berichte zu interpretieren und die lohnenden Änderungen zu priorisieren.
Häufig gestellte Fragen
Ist Shopify selbst langsam?
Hosting und Content Delivery Network von Shopify werden von Shopify verwaltet und sind in der Regel nicht der Engpass. Die meisten Geschwindigkeitsprobleme kommen von Apps, Bildern, Themes, Tracking und eigenem Code, der dem Shop hinzugefügt wurde.
Warum ist meine PageSpeed-Punktzahl bei jedem Test anders?
Labortests werden von Netzwerkbedingungen, dem Teststandort und dem genauen Inhalt beeinflusst, der zum jeweiligen Zeitpunkt geladen wird. Kleine Unterschiede zwischen den Durchläufen sind normal. Achten Sie auf beständige Muster und geben Sie echten Felddaten, wo verfügbar, mehr Gewicht.
Brauche ich eine perfekte PageSpeed-Punktzahl?
Nein. Die Punktzahl ist ein Diagnosewerkzeug. Wichtig ist, dass echte Kunden Ihre Seiten schnell sehen und nutzen können, was sich besser in den Felddaten der Core Web Vitals und darin zeigt, wie sich der Shop auf einem typischen Smartphone anfühlt.
Behebt eine App zur Geschwindigkeitsoptimierung alles?
Nicht unbedingt. Manche Apps helfen bei bestimmten Problemen wie der Bildkomprimierung. Andere ändern, wie Skripte geladen werden, was andere Apps oder das Tracking stören kann. Verstehen Sie, was eine App verändert, bevor Sie sie installieren, und testen Sie sie zuerst an einem duplizierten Theme.
Sollte ich das Theme wechseln, um den Shop schneller zu machen?
Ein modernes Theme kann helfen, aber ein Theme-Wechsel ist ein Projekt, bei dem Layouts neu aufgebaut, App-Blöcke neu eingefügt und alle Funktionen getestet werden müssen. Es lohnt sich, zuerst zu messen und die schnellen Erfolge umzusetzen, damit Sie wissen, wie viel der Langsamkeit tatsächlich vom Theme kommt.
Beeinflusst die Geschwindigkeit Umsatz und Suchrankings?
Geschwindigkeit ist einer von vielen Faktoren dafür, wie Kunden einen Shop erleben, und Core Web Vitals sind Teil der Bewertung der Nutzererfahrung durch Google. Die Wirkung einer bestimmten Verbesserung lässt sich schwer vorhersagen. Am besten messen Sie vorher und nachher und beobachten Ihre eigenen Conversion-Daten.