Wo die Zeit verloren geht
- Apps, die JavaScript und CSS auf jeder Seite einbinden – auch auf Seiten, auf denen sie gar nichts tun.
- Code, den deinstallierte Apps zurückgelassen haben; das Entfernen einer App räumt das Theme nicht immer auf.
- Hero-Slider, automatisch startende Videos und Bilder in voller Breite, die weit größer sind als der Bildschirm.
- Tags von Drittanbietern: Chat, Bewertungen, Pop-ups, Heatmaps, mehrere Analyse- und Werbepixel.
- Mehrere Webschriften in vielen Schriftschnitten.
Am Anfang steht die Messung
Testen Sie mit PageSpeed Insights drei Vorlagen in der mobilen Ansicht: die Startseite, eine Kollektionsseite und eine Produktseite. Notieren Sie LCP, TBT und die größten Ressourcen. Der Web-Performance-Bericht von Shopify im Admin zeigt Core Web Vitals echter Nutzer, sobald der Shop genug Traffic hat.
Testen Sie Änderungen immer zuerst an einer unveröffentlichten Kopie des Themes und veröffentlichen Sie erst danach.
Maßnahmen in einer sicheren Reihenfolge
- Gehen Sie die App-Liste durch. Entfernen Sie Apps, die Sie nicht mehr nutzen, und deaktivieren Sie App-Einbettungen, die nicht auf jeder Seite gebraucht werden (Onlineshop > Themes > Anpassen > App-Einbettungen).
- Durchsuchen Sie den Theme-Code nach Überresten entfernter Apps (Snippets und Script-Tags mit dem Namen der App) und entfernen Sie diese im kopierten Theme.
- Ersetzen Sie den Hero-Slider durch ein einzelnes Bild. Laden Sie es mit
fetchpriority="high", ohne Lazy Loading, und nutzen Sie den Shopify-Filterimage_urlmit einer sinnvollen Breite undsrcset. - Laden Sie Bilder unterhalb des ersten sichtbaren Bereichs per Lazy Loading und geben Sie jedem Bild Breite und Höhe an, um Layoutverschiebungen zu vermeiden.
- Laden Sie Chat-, Bewertungs- und Pop-up-Widgets erst, wenn der Nutzer scrollt oder interagiert – sofern die App das erlaubt.
- Beschränken Sie sich auf eine Schriftfamilie in zwei Schriftschnitten oder nutzen Sie einen System-Font-Stack.
- Verlagern Sie Tracking-Pixel nach Möglichkeit in die Kundenereignisse (Customer Events) von Shopify statt in den Theme-Code.
Wenn das Theme selbst das Problem ist
Ältere, stark angepasste Themes schleppen oft jahrelang angesammelte Skripte und Styles mit. Der Umstieg auf ein aktuelles Online-Store-2.0-Theme und der Neuaufbau der wichtigsten Abschnitte ist manchmal günstiger, als alten Code Zeile für Zeile zu optimieren. Es lohnt sich, beide Optionen vor dem Start zu vergleichen.
Welchen Zugriff ein Entwickler braucht
Für die Optimierung der Ladezeit ist ein Mitarbeiterzugang mit der Berechtigung nötig, Themes zu bearbeiten und Apps einzusehen. Diesen erteilt der Shop-Inhaber im Admin, ohne ein Passwort weiterzugeben. Gearbeitet wird an einer Kopie des Themes, sodass der Live-Shop erst betroffen ist, wenn der Inhaber die Änderungen freigibt.
Häufige Fragen
Kann ein Shopify-Shop bei PageSpeed 100 Punkte erreichen?
Auf Mobilgeräten selten, und das ist auch nicht das Ziel. Streben Sie gute Core Web Vitals für echte Nutzer an (LCP unter 2,5 s, INP unter 200 ms, CLS unter 0,1).
Helfen Speed-Booster-Apps?
Vorsicht. Manche verbergen das Problem nur vor Labortests oder fügen ein eigenes Skript hinzu. Ballast zu entfernen ist zuverlässiger, als eine weitere App zu installieren.
Wirkt sich die Optimierung auf meine Verkäufe oder Apps aus?
Nicht, wenn sie an einer Kopie des Themes erfolgt und jede Änderung geprüft wird: In den Warenkorb legen, Checkout, Bewertungen und Tracking sollten nach der Veröffentlichung genauso funktionieren wie vorher.
Prüfen Sie Ihre eigene Website in etwa einer Minute
Die kostenlose Analyse misst die Punkte aus diesem Ratgeber für Ihre URL und zeigt, was Sie zuerst beheben sollten.