Wichtigste Erkenntnisse
- Ungenutzter Code sammelt sich durch deinstallierte Apps, alte Theme-Anpassungen und ungenutzte Sections an.
- Nutze den Shopify Theme Inspector (Chrome-Erweiterung), um herauszufinden, welche Assets am langsamsten laden.
- Finde verwaiste Snippets und Sections, indem du in den Liquid-Dateien deines Themes nach ihren Dateinamen suchst.
- Arbeite immer in einer Theme-Kopie (Duplikat). Wenn du den falschen Code löschst, kann das deinen Shop zerschießen.
Jedes Mal, wenn du eine App installierst, eine Anpassung ausprobierst oder dein Theme updatest, sammelt sich Code an. Totes CSS. Script-Tags von Apps, die du vor zwei Jahren deinstalliert hast. Snippet-Dateien, die nirgends gerendert werden. Mit der Zeit macht dieser ungenutzte Code deinen Shop langsamer, ohne irgendeinen Mehrwert zu bieten.
Das aufzuräumen ist eine der effektivsten Maßnahmen, die du für die Performance ergreifen kannst – und es kostet nichts außer Zeit.
Wie lösche ich Code in Shopify?
Gehe zu Online-Shop → Themes → Aktionen → Code bearbeiten. Dies öffnet den Code-Editor, in dem du alle Theme-Dateien einsehen kannst. Einzelne Dateien können hier bearbeitet oder gelöscht werden.
Verwandt: Fix Layout Issues After Installing Shopify Apps.
Verwandt: Minify CSS and JavaScript in Shopify.
Wichtige Erinnerung: Dupliziere dein Theme, bevor du Code anfasst. Online-Shop → Themes → Drei-Punkte-Menü → Duplizieren.
Schritt 1 — Mit dem Theme Inspector langsame Assets identifizieren
Der Shopify Theme Inspector ist eine kostenlose Chrome-Extension, die anzeigt, welche Liquid-Templates und Assets am längsten zum Rendern brauchen.
So wird er verwendet:
- Installiere die Extension aus dem Chrome Web Store.
- Öffne deinen Shop und drücke F12, um die Chrome DevTools zu öffnen.
- Wechsle zum Tab „Theme Inspector“.
- Navigiere durch deinen Shop — die Extension zeigt die Rendering-Zeit pro Template an.
So erfährst du, welche Seiten und Assets am meisten zu langsamen Ladezeiten beitragen. Konzentriere deine Bereinigungsbemühungen auf die schlimmsten Verursacher.
Speziell für JavaScript: Öffne Chrome DevTools → Network-Tab → filtere nach JS → lade die Seite neu. Sortiere nach Größe, um die größten Skripte zu finden. Stammmen einige davon von Apps, die du nicht mehr verwendest?
Passend dazu: CSS und JavaScript in Shopify minifizieren (2026).
So entfernst du ungenutztes JavaScript in Shopify
Überbleibsel von App-Skripten in theme.liquid. Die häufigste Quelle für nicht genutztes JavaScript. Öffne die theme.liquid im Code-Editor und suche nach Script-Tags, die auf Drittanbieter-Domains von Apps verweisen, die du deinstalliert hast.
<!-- Beispiel für ein übrig gebliebenes Skript einer deinstallierten Popup-App -->
<script src="https://privy.com/scripts/privy.js"></script>Lösche den gesamten <script>-Tag, wenn die App nicht mehr installiert ist.
Passend dazu: So entfernst du App-Code-Reste aus Shopify (2026).
Nicht verwendete JavaScript-Dateien in assets/. Öffne den Ordner assets/ im Code-Editor. Suche nach .js-Dateien mit Namen, die auf Apps oder Funktionen verweisen, die du nicht mehr nutzt. Suche nach dem Dateinamen in den Liquid-Dateien deines Themes — wenn nichts die Datei rendert oder einbindet, kann sie entfernt werden.
Section JavaScript-Blöcke. Wenn du eine Section aus all deinen Templates gelöscht, aber die Dateiversion der Section behalten hast, wird deren {% javascript %}-Block immer noch in das Haupt-JavaScript-Bundle deines Themes kompiliert. Lösche nicht verwendete Section-Dateien vollständig.
So entfernst du ungenutztes CSS
Ungenutzte Stylesheet-Dateien in assets/. Suche nach .css-Dateien von alten Apps oder Anpassungen. Gleicher Prozess: Suche den Dateinamen in Liquid-Dateien, um zu sehen, ob sie geladen werden.
Toter CSS-Code in base.css. CSS-Regeln für Abschnitte oder Elemente, die nicht mehr existieren. Dies ist manuell schwer zu prüfen. Tools wie PurgeCSS (kein natives Shopify-Tool, aber nützlich für Analysen) können CSS-Selektoren identifizieren, die mit keinem HTML auf deinen Live-Seiten übereinstimmen.
Der praktische Ansatz: Konzentriere dich darauf, klar benannte und offensichtlich veraltete CSS-Blöcke zu entfernen, anstatt zu versuchen, jede einzelne Regel in der base.css zu prüfen. Die größten Erfolge erzielst du durch das Entfernen ganzer Stylesheets, nicht einzelner Regeln.
Wie man verwaiste Snippets findet und entfernt
Ein Snippet ist „verwaist“ (orphaned), wenn kein Template, keine Section und kein anderes Snippet es rendert.
Verwaiste Snippets finden:
- Gehe zum Ordner snippets/ im Code-Editor.
- Suche bei jeder verdächtigen Datei (besonders bei solchen mit App-Namen) in deinem gesamten Theme nach dem Dateinamen des Snippets.
- Suche nach
{% render 'snippet-name' %}oder{% include 'snippet-name' %}. - Wenn es keine Ergebnisse gibt: Das Snippet ist verwaist und kann gelöscht werden.
Passend dazu: So behebst du Layout-Probleme nach der Installation von Shopify-Apps (2026).
Häufige verwaiste Snippets: Dateien, die nach Apps benannt sind (loox-widget.liquid, privy-form.liquid), alte Funktions-Snippets aus früheren Theme-Anpassungen und doppelte Snippet-Versionen.
So findest du ungenutzte Abschnitte (Sections)
Abschnitte werden verwendet, wenn sie in der JSON-Datei eines Templates referenziert oder von einem anderen Abschnitt gerendert werden.
Template-Dateien prüfen:
- Öffne den Ordner templates/.
- Jede
.json-Template-Datei listet auf, welche Abschnitte auf diesem Seitentyp erscheinen. - Wenn eine Abschnittsdatei existiert, aber in keinem Template aufgeführt ist, wird sie nicht verwendet (obwohl sie eventuell über „Abschnitt hinzufügen“ im Theme-Editor zugänglich ist).
Bei Abschnitten, die einmal zu einer Seite hinzugefügt und dann wieder entfernt wurden, kann es sein, dass sie auf keiner Seite mehr erscheinen, die Datei aber noch existiert. Diese können sicher gelöscht werden.
Prioritätenliste für das Aufräumen
Nicht jeder ungenutzte Code hat die gleiche Auswirkung auf die Performance. Konzentriere dich auf diese Reihenfolge:
- Externe Skripte (App-Script-Tags in der theme.liquid) — jedes davon ist ein HTTP-Request an einen externen Server.
- Große JavaScript-Dateien in assets/ — besonders alles über 50KB.
- Nicht verwendete CSS-Stylesheets — insbesondere solche, die über die theme.liquid auf jeder Seite geladen werden.
- Verwaiste Snippets und Sections — geringere Auswirkung, aber gut für die Ordnung.
Passend dazu: So beschleunigst du ein Shopify-Theme (2026).
Den integrierten Theme Check von Shopify nutzen
Zu den Theme-Entwicklungstools von Shopify gehört Theme Check, das eine Reihe von Code-Problemen aufzeigt, darunter ungenutzte Variablen und veraltete Liquid-Syntax. Für Händler (im Gegensatz zu Entwicklern) ist darauf schwerer zuzugreifen – es handelt sich in erster Linie um ein CLI-Tool.
Der Shopify-Code-Editor zeigt einige grundlegende Warnungen an, und der Theme Inspector deckt die Performance-Seite für die meisten Aufräumarbeiten ausreichend gut ab.
FAQ
Das kommt darauf an, wie viel es ist. Das Löschen einer einzigen 200 KB großen JavaScript-Datei einer bereits deinstallierten App kann den LCP bei langsamen Verbindungen um 0,5 bis 1 Sekunde verbessern. Ein paar KB ungenutztes CSS zu entfernen, wird dagegen keinen großen Unterschied machen. Die größten Performance-Sprünge erzielt man durch das Eliminieren kompletter HTTP-Requests (Drittanbieter-Skripte), nicht durch minimale Reduzierungen der Dateigröße.
Tools wie PurgeCSS oder der Tab 'Coverage' in den Chrome DevTools (Cmd+Shift+P → "Show Coverage") markieren ungenutztes CSS auf einer Seite. Manueller Ansatz: Durchsuche das gerenderte HTML nach einem Element, das zum Selektor passt. Vorsicht: Eine Regel mag auf der Startseite ungenutzt aussehen, wird aber vielleicht auf einer anderen Seite verwendet (z. B. nur auf der Produktseite).
Generell nein – das Ändern des Basis-Theme-Codes macht zukünftige Theme-Updates kompliziert (Shopify baut dein Theme beim Update neu auf und überschreibt dabei Änderungen). Besser: Lass den Code drin, aber deaktiviere das Feature in den Einstellungen des Theme-Editors. Bearbeite den Theme-Code nur, wenn der Nutzen (Performance, Sicherheit) den Wartungsaufwand deutlich übersteigt. Wenn du ein schwerfälliges integriertes Feature durch ein leichteres, benutzerdefiniertes ersetzen möchtest, beschreibe einfach, was du haben willst, an Fudge. Fudge fügt den Ersatz als neue Section hinzu (während der ursprüngliche Theme-Code für sichere Theme-Updates intakt bleibt).
Der Code-Editor enthält zwar Theme-Check-Warnungen für bestimmte Referenzen (fehlerhafte {% render %}-Aufrufe, fehlende Assets), fängt aber nicht alle Abhängigkeiten ab. Du solltest dein Theme nach dem Löschen immer als Duplikat in der Vorschau testen, bevor du es veröffentlichst – stille Fehler zeigen sich oft nur auf bestimmten Seitentypen oder unter spezifischen Bedingungen.
Vierteljährlich bei aktiven Shops oder nach größeren App-Änderungen. Jährlich bei ohnehin stabilen Shops. Der Zinseszins beim Aufräumen ist real – drei Jahre angesammelter App-Müll kann den mobilen LCP um 1 bis 2 Sekunden verlängern. Eine Code-Bereinigung in Kombination mit einem Theme-Update (oder einem Neuaufbau mit einem frischen Theme) führt oft zu drastischen Verbesserungen.
