Wenn ein Shopify-Shop langsam lädt, ist das frustrierend — für mich als Betreiber*innen und für die Kund*innen. In meinen Audits sehe ich oft die gleichen Schuldigen: zu viele Apps, unkontrollierte Liquid-Snippets und externe Requests von Drittanbietern. In diesem Artikel zeige ich dir, wie ich Schritt für Schritt vorgehe, um diese Quellen zu identifizieren und die Ladezeiten deutlich zu reduzieren — oft genug auf die Hälfte oder besser.
Erste Diagnostik: Wo anfangen?
Bevor ich etwas verändere, mache ich mir ein klares Bild. Dafür nutze ich primär zwei Werkzeuge:
- Chrome DevTools (Network, Performance)
- Shopify Admin (Apps, Online Store → Themes → Edit code)
In DevTools öffne ich die Network-Ansicht und lade die Seite mit deaktiviertem Cache (Strg/Cmd + F5). Wichtig ist die Waterfall-Ansicht: welche Requests dauern am längsten? Welche Domains tauchen oft auf (z. B. cdn.shopify.com, google-analytics.com, fonts.googleapis.com, oder Domains von Apps)?
Apps als Hauptverdächtige identifizieren
Apps können auf verschiedenen Wegen eingebunden werden:
- ScriptTags (clientseitige Scripts, die im Theme geladen werden)
- App Proxies (serverseitige Routen über die App)
- Theme-Dateien (Liquid-Snippets, die aus Apps kopiert wurden)
- App Blocks/Sections (bei Online Store 2.0)
So finde ich heraus, welche Apps tatsächlich laden:
- In DevTools: Filter nach domain oder nach .js/.css und suche nach App-Domains.
- Im Shopify Admin: Liste der installierten Apps; danach im Theme-Code nach bekannten Snippet-Namen suchen (z. B. snippets/app-name.liquid oder assets/app-name.js).
- ScriptTag-Check: Viele Apps nutzen die ScriptTag-API. In DevTools sieht man oft einen einzigen externen Request auf die URL der App.
Liquid-Snippets analysieren
Liquid-Snippets sind praktisch — aber schlecht eingebettet sind sie Performance-Fallen. Ich öffne theme.liquid, alle layout- und snippet-Dateien und achte auf:
- Inline-Skripte im <head> oder direkt im Body, die synchron blockieren.
- CSS-Imports, die Render-Blocking verursachen.
- Vorhandene {% include %} oder {% render %}-Aufrufe zu App-Snippets.
Ein praktischer Trick: Temporär stelle ich kritische Snippets auf ein Kommentar, um zu sehen, wie viel Zeit dadurch eingespart wird. Wenn das Theme nach dem Entfernen spürbar schneller ist, ist das ein Kandidat zur Optimierung oder Deinstallation.
Third‑party‑Requests: welche unbedingt sind
Nicht alle externen Requests sind böse. Ich unterscheide:
- Essentielle Services (Zahlungsanbieter, CDN für Produktbilder)
- Marketing/Tracking (Analytics, Chat-Widgets)
- Feature-Apps (Upsells, Reviews)
Für Tracking und Marketing prüfe ich, ob Server-Side-Alternativen oder Tag-Manager (z. B. Google Tag Manager server-side) möglich sind, um Client-Requests zu reduzieren. Chat-Widgets und Review-Widgets binde ich oft asynchron oder als lazy-loaded Modul ein, das erst nach dem initialen Render geladen wird.
Konkrete Anpassungen, die ich durchführe
Bei jedem Audit habe ich eine Checkliste mit konkreten Schritten. Hier sind die häufigsten und effektivsten Maßnahmen:
- ScriptTags asynchronieren: <script src="..." async defer>. Viele Apps laden synchron und blockieren das Rendering.
- Defer/Async für nicht-kritische Skripte: Für Drittanbieter-Skripte, die nicht sofort benötigt werden.
- Lazy-Loading von Bildern: native loading="lazy" oder IntersectionObserver für Support älterer Browser.
- Critical CSS extrahieren: Inline CSS für Above-the-Fold und Lade restlicher Styles asynchron.
- Fonts optimieren: Preload wichtiger Webfonts und System-Fallbacks einsetzen.
- Apps auditieren und deinstallieren: Apps, die nur kleine Features bringen, ersetze ich oft durch einfachen Liquid-Code oder entferne sie komplett.
- Inline- und Third-party-Requests minimieren: Requests bündeln, eigene CDN-Assets verwenden.
Beispiel: ScriptTag asynchron einbinden
Wenn ein App-Script synchron im <head> eingebunden ist, tausche ich das gegen dieses Muster:
<script> (function(w,d,s,u){var js=d.createElement('script');js.src=u;js.async=true;d.head.appendChild(js);})(window,document,'script','https://example-app.com/script.js');</script>
Das verhindert Render-Blocking und lädt das Script parallel.
Praktische Liquid-Hacks
Oft finde ich in Theme-Dateien Inline-Tracking oder App-Code, der nicht benötigt wird. Ein paar Snippets, die ich regelmäßig nutze:
- Conditional Loading: nur im Produkt-/Kassen-Kontext laden:
<!-- nur auf Produktseite --> {% if template == 'product' %} <script src="..." async></script> {% endif %}
- Lazy-load Blocks für Reviews oder Upsells (nur nach Nutzerinteraktion laden)
Messung: Wie weiß ich, dass es besser wird?
Ich messe vor und nach jeder Änderung:
- Core Web Vitals (Largest Contentful Paint, CLS, First Input Delay)
- Time to First Byte (TTFB)
- First Contentful Paint (FCP) und Fully Loaded
Tools: Lighthouse (in Chrome), WebPageTest.org und Shopify’s Speed Report. Wichtig: Mehrere Messungen zu unterschiedlichen Tageszeiten, um CDN-Caches und Shop-Traffic zu berücksichtigen.
Audit-Checklist
| Prüfung | Aktion |
|---|---|
| Langsame externe JS/CSS | async/defer, asynchrones Laden, ggf. entfernen |
| Viele App-Requests | Apps evaluieren, deinstallieren, ersetzen |
| Inline-Styles blockieren | Critical CSS extrahieren, restliches CSS asynchron |
| Bilder ohne Lazy-Load | loading="lazy" oder IntersectionObserver einbauen |
| Fonts ohne Preload | Preload wichtiger Fonts, Swap-Fallback |
Typische Stolperfallen und wie ich sie vermeide
Einige Fehler sehe ich immer wieder:
- Deinstallierte Apps hinterlassen Snippets — immer Theme-Dateien prüfen.
- Änderungen ohne Backup — ich klone das Theme vor jedem größeren Eingriff.
- Zu aggressive Optimierung, die Funktionalität bricht — nach jeder Änderung testen (Checkout, PDP, Payment).
Am Ende geht es nicht nur um minimalen Lighthouse-Score, sondern um echte Nutzererfahrung: schnell sichtbare Inhalte, zuverlässige Interaktionen und stabile Checkout-Prozesse. Mit systematischem Audit, gezieltem Entfernen unnötiger Apps und sinnvoller Ladereihenfolge für Skripte reduziere ich Ladezeiten regelmäßig um 30–70 % — oft genug reicht das, um Konversionsraten signifikant zu verbessern.