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-Erweiterung, die zeigt, welche Liquid-Templates und Assets am längsten zum Rendern brauchen.
So nutzt du ihn:
- Installiere die Erweiterung 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 Erweiterung zeigt die Rendering-Zeit pro Template an
So siehst du, welche Seiten und Assets am meisten zu langsamen Ladezeiten beitragen. Konzentriere dich beim Aufräumen auf die schlimmsten Übeltäter.
Speziell für JavaScript: Öffne die Chrome DevTools → Network-Tab → filtere nach JS → lade die Seite neu. Sortiere nach Größe, um die größten Skripte zu finden. Sind welche davon von Apps, die du gar nicht mehr benutzt?
Passend dazu: CSS und JavaScript in Shopify minifizieren.
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 im Code-Editor in den Ordner
snippets/ - Suche für jede verdächtige Datei (besonders solche 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: Layout-Probleme nach der Installation von Shopify-Apps beheben.
Häufige verwaiste Snippets: Dateien, die nach Apps benannt sind (loox-widget.liquid, privy-form.liquid), alte Feature-Snippets von früheren Theme-Anpassungen und doppelte Snippet-Versionen.
So findest du ungenutzte Abschnitte (Sections)
Sections werden verwendet, wenn sie in der JSON-Datei eines Templates referenziert oder von einer anderen Section gerendert werden.
Template-Dateien überprüfen:
- Öffne den Ordner
templates/ - Jede
.jsonTemplate-Datei listet auf, welche Sections auf diesem Seitentyp erscheinen - Wenn eine Section-Datei existiert, aber in keinem Template aufgelistet ist, wird sie nicht verwendet (obwohl sie vielleicht über „Abschnitt hinzufügen“ im Theme Editor erreichbar ist)
Sections, die einmal zu einer Seite hinzugefügt und dann wieder entfernt wurden, erscheinen möglicherweise auf keiner Seite mehr, aber die Datei existiert noch. Diese können bedenkenlos 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
Hängt davon ab, wie viel es ist. Wenn du eine einzelne 200 KB große JavaScript-Datei einer bereits deinstallierten App entfernst, kann der LCP bei langsamen Verbindungen um 0,5–1 Sekunde sinken. Ein paar KB ungenutztes CSS zu entfernen, wird dagegen kaum etwas bewirken. Die größten Verbesserungen kommen durch das Einsparen ganzer HTTP-Requests (Drittanbieter-Skripte), nicht durch minimale Reduzierungen der Dateigröße.
Tools wie PurgeCSS oder der Coverage-Tab 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 (z. B. nur auf der Produktseite) verwendet.
In der Regel nicht – das Ändern des grundlegenden Theme-Codes macht zukünftige Theme-Updates kompliziert (Shopify baut dein Theme beim Update neu auf und überschreibt Änderungen). Besser: Lass den Code drin, aber deaktiviere das Feature über die Einstellungen im Theme Editor. Bearbeite Theme-Code nur dann, wenn der Nutzen (Geschwindigkeit, Sicherheit) den Wartungsaufwand deutlich übersteigt. Wenn du ein schwerfälliges, integriertes Feature durch ein leichteres, benutzerdefiniertes Äquivalent ersetzen möchtest, beschreibe Fudge, was du brauchst. Es fügt den Ersatz als neue Section hinzu (so bleibt der originale Theme-Code für sichere Updates erhalten).
Der Code-Editor enthält Theme Check-Warnungen für einige Referenzen (fehlerhafte {% render %}-Aufrufe, fehlende Assets), fängt aber nicht alle Abhängigkeiten ab. Schau dir dein Theme nach Löschungen immer erst in einer Kopie in der Vorschau an, bevor du es veröffentlichst – unbemerkte 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 stabilen Shops. Der Zinseszins beim Aufräumen ist real – drei Jahre angesammelter Datenmüll durch Apps kann den LCP auf Mobilgeräten um 1–2 Sekunden verlängern. Ein Cleanup in Kombination mit einem Theme-Update (oder einem Neuaufbau mit einem frischen Theme) führt oft zu drastischen Verbesserungen.
