Shopify kümmert sich um Server, Skalierung und ein globales CDN. Warum fühlen sich dann so viele Shopify-Shops auf Mobilgeräten immer noch langsam an? Die Antwort liegt fast immer in dem, was darüber hinaus auf Shopify läuft: Apps, Theme-Code, Bilder und Skripte von Drittanbietern.
Die gute Nachricht: All dies liegt in Ihrer Kontrolle. Hier sind 15 praktische Möglichkeiten, um einen Shopify-Shop zu beschleunigen.
Wie man die Geschwindigkeit von Shopify misst
- Shopify-Admin → Analysen → Web-Performance: Core Web Vitals von echten Besuchern (wo verfügbar)
- Google Search Console → Core Web Vitals
- PageSpeed Insights für einzelne Seiten
- Chrome DevTools (Leistungs- und Netzwerk-Registerkarten), um zu sehen, was geladen wird
Konzentrieren Sie sich auf echte Benutzerdaten (LCP, INP, CLS) auf Mobilgeräten für Ihre Startseite, Sammlungs- und Produktseiten. Siehe Core Web Vitals für E-Commerce.
Apps und Skripte
1. Überprüfen Sie Ihre Apps
Jede App, die Funktionen zu Ihrem Shop hinzufügt, kann JavaScript und CSS hinzufügen. Listen Sie alle installierten Apps auf und fragen Sie für jede: Brauchen wir das noch, und wird es auf jeder Seite geladen?
2. Entfernen Sie den verbleibenden App-Code
Das Deinstallieren einer App entfernt nicht immer ihren Code. Ältere Apps haben oft Snippets in das Theme eingefügt. Durchsuchen Sie Ihren Theme-Code nach Verweisen auf Apps, die Sie entfernt haben (Snippets, Script-Tags, {% render %}-Aufrufe) und bereinigen Sie diese. Neuere Apps, die Theme-App-Erweiterungen verwenden, werden sauberer entfernt.
3. Bevorzugen Sie Theme-App-Erweiterungen und App-Blöcke
Bei der Auswahl von Apps sollten Sie solche bevorzugen, die App-Blöcke/Einbettungen verwenden. Sie sind einfacher nur dort zu platzieren, wo sie benötigt werden, und zu entfernen.
4. Steuerung von Tracking- und Marketing-Tags
Pixels, Heatmaps, Chat-Widgets, Bewertungen, Popups und A/B-Test-Tools summieren sich schnell. Verwenden Sie die Kundenereignisse von Shopify für Pixels, wo immer möglich, entfernen Sie Duplikate und laden Sie Chat-Widgets nur nach Interaktion.
Thema
5. Verwenden Sie ein modernes, leichtgewichtiges Theme
Aktuelle Online-Shop 2.0-Themen, einschließlich der kostenlosen Themen von Shopify, sind im Allgemeinen mit Blick auf die Leistung entwickelt. Sehr schwere Premium-Themen mit vielen integrierten Effekten können langsam sein.
6. Begrenzen Sie die Abschnitte auf der Startseite
Jeder Slider, jedes Video und jeder Produktkarussell fügt Gewicht hinzu. Halten Sie die Startseite fokussiert. Ein starker Held schlägt fünf Slider.
7. Vermeiden Sie schwere Slider und Autoplay-Videos im sichtbaren Bereich
Sie werden oft zum LCP-Element und verzögern das Rendering. Ein statisches Hero-Bild ist in der Regel schneller und konvertiert ebenso gut.
8. Optimieren Sie Liquid-Code
Ineffizientes Liquid (verschachtelte Schleifen über große Sammlungen, viele all_products Abfragen) verlangsamt das Server-Rendering. Verwenden Sie Shopifys Theme Inspector für Chrome, um langsame Liquid-Abschnitte zu finden.
Bilder
9. Verwenden Sie die Bildfilter von Shopify mit den richtigen Größen
Verwenden Sie image_url mit Breitenparametern und image_tag mit widths und sizes, damit der Browser die richtige Größe herunterlädt. Shopifys CDN liefert automatisch moderne Formate.
10. Laden Sie das Helden- oder Hauptproduktbild nicht verzögert.
Das LCP-Bild sollte sofort geladen werden. Verwenden Sie loading: 'eager' und fetchpriority: 'high' dafür und laden Sie alles unterhalb der Falz lazy.
11. Bildabmessungen festlegen
Breite und Höhe (oder Seitenverhältnis) bei jedem Bild verhindern Layoutverschiebungen (CLS).
Schriften und CSS
12. Begrenzen Sie benutzerdefinierte Schriftarten
Jede Schriftart und Gewicht ist ein zusätzlicher Download. Verwenden Sie Systemschriftarten oder eine kleine Anzahl von Schriftdateien und laden Sie die wichtigste vor.
13. Reduzieren Sie ungenutztes CSS und JavaScript
Entfernen Sie Theme-Funktionen, die Sie nicht verwenden. Vermeiden Sie das Hinzufügen großer Bibliotheken (zum Beispiel einer vollständigen Animationsbibliothek) für kleine Effekte.
Inhalt und Struktur
14. Große Sammlungen paginieren
Sammlungen mit Hunderten von Produkten auf einer Seite sind langsam. Verwenden Sie Pagination oder „mehr laden“ mit sinnvollen Seitengrößen.
15. Interne Links zu sammelbasierten Produkt-URLs reparieren
Das Verlinken auf /products/handle anstelle von sammelbasierten URLs hilft der SEO und der Konsistenz des Cachings (siehe die Shopify SEO-Checkliste).
Schnelle Prioritätenliste
| Fix | Auswirkungen | Aufwand |
|---|---|---|
| Entfernen Sie ungenutzte Apps und übrig gebliebenen Code | Hoch | Niedrig bis mittel |
| Hero/LCP-Bild eifrig + korrekte Größe | Hoch | Niedrig |
| Verzögerung von Chat- und nicht wesentlichen Tags | Hoch (INP) | Niedrig |
| Vereinfachen Sie die Abschnitte der Startseite | Medium | Niedrig |
| Optimieren Sie Liquid | Mittel bis hoch | Medium |
| Wechseln Sie zu einem helleren Thema | Hoch | Hoch |
Vor der Hochsaison
Ändern Sie die Geschwindigkeit vor Ihrem Code-Freeze. Sehen Sie sich die Black Friday-Checkliste an.
Häufig gestellte Fragen
Beeinflusst der Shopify-Plan die Geschwindigkeit?
Die Geschwindigkeit des Storefronts wird hauptsächlich durch dein Theme, Apps und Inhalte bestimmt, nicht durch den Plan.
Ist der Shopify-Geschwindigkeitsscore im Admin wichtig?
Echte Nutzer-Core-Web-Vitals sind wichtiger als jede einzelne Laborbewertung. Verwenden Sie die Werte als Leitfaden, nicht als Ziel.
Kann ich Shopify so schnell machen wie einen benutzerdefinierten Headless-Shop?
Ein gut optimiertes Online Store 2.0-Theme kann sehr schnell sein. Headless-Setups bieten mehr Kontrolle, bringen jedoch Komplexität und Kosten mit sich; sie sind nicht automatisch schneller.
Möchten Sie einen schnelleren Shopify-Shop?
Ich prüfe und optimiere Shopify-Themen und App-Setups für Geschwindigkeit und Core Web Vitals. Siehe meinen Shopify-Service oder fordere ein Geschwindigkeitsaudit an.