Das Wichtigste in Kürze
- Ungenutzter Code sammelt sich durch deinstallierte Apps, alte Theme-Anpassungen und ungenutzte Sections an.
- Nutze den Theme Inspector, um langsames Liquid zu finden, und die Network- und Coverage-Tabs der Chrome DevTools für schwerfälliges oder ungenutztes JavaScript und CSS.
- Finde verwaiste Snippets und Sections, indem du in den Liquid-Dateien deines Themes nach ihren Dateinamen suchst.
- Arbeite immer an einem duplizierten Theme. Das Entfernen falschen Codes kann deinen Shop kaputt machen.
Um ungenutzten Code in Shopify zu entfernen, dupliziere dein Theme, finde große oder ungenutzte Skripte und Stylesheets mit den Chrome DevTools, durchsuche das Theme nach jedem Dateinamen (um sicherzugehen, dass nichts sie lädt), lösche sie dann im Duplikat und schaue dir die Vorschau an, bevor du es veröffentlichst.
Jedes Mal, wenn du eine App installierst, eine Anpassung ausprobierst oder dein Theme aktualisierst, sammelt sich Code an. Totes CSS. Script-Tags für Apps, die du vor zwei Jahren deinstalliert hast. Snippet-Dateien, die nirgendwo gerendert werden. Mit der Zeit macht dieser ungenutzte Code deinen Shop langsamer, ohne einen Mehrwert zu bieten.
Ihn zu entfernen macht die Seiten schlanker und kostet nichts außer Zeit.
Wie lösche ich Code in Shopify?
Dupliziere zuerst dein Theme. Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren.
Klicke dann beim Duplikat auf das Drei-Punkte-Menü (…) und wähle Code bearbeiten. Das öffnet den Code-Editor, in dem du alle Theme-Dateien sehen kannst. Einzelne Dateien können hier bearbeitet oder gelöscht werden.
Schritt 1 — Identifiziere, was langsam ist
Der Shopify Theme Inspector ist eine kostenlose Chrome-Erweiterung, die zeigt, wie lange jedes Liquid-Template, jede Section und jedes Snippet braucht, um auf dem Shopify-Server zu rendern. Sie misst nicht, wie lange Skripte oder andere Assets zum Laden brauchen.
So benutzt 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 “Theme Inspector”-Tab
- Navigiere durch deinen Shop – die Erweiterung zeigt die Rendering-Zeit pro Template an
Das verrät dir, welche Templates und Sections am langsamsten rendern. Konzentriere dich beim Aufräumen von Liquid auf die schlimmsten Ausreißer.
Für JavaScript und CSS: Öffne die Chrome DevTools → Network-Tab → filtere nach JS oder CSS → lade die Seite neu. Sortiere nach Größe (Size), um die größten Dateien zu finden. Sind welche davon von Apps, die du nicht mehr nutzt? Der Coverage-Tab (Cmd+Shift+P → “Show Coverage”) zeigt, wie viel von jeder Datei die Seite tatsächlich verwendet.
Für das, was Shopify bereits komprimiert, siehe Wie man CSS und JavaScript in Shopify minifiziert.
So entfernst du ungenutztes JavaScript in Shopify
Übrig gebliebene App-Skripte in der theme.liquid. Die häufigste Quelle für ungenutztes 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 das gesamte <script>-Tag, wenn die App nicht mehr installiert ist.
Ungenutzte JavaScript-Dateien unter assets/. Öffne den Ordner assets/ im Code-Editor. Halte Ausschau nach .js-Dateien mit Namen, die auf Apps oder Features verweisen, die du nicht mehr nutzt. Suche in den Liquid-Dateien deines Themes nach dem Dateinamen – wenn die Datei nirgends gerendert oder eingebunden wird, kann sie gelöscht werden.
Section-JavaScript-Blöcke. Wenn du eine Section aus all deinen Templates gelöscht hast, aber die Section-Datei noch da ist, wird ihr {% javascript %}-Block weiterhin in das Haupt-JavaScript-Bundle deines Themes kompiliert. Lösche ungenutzte Section-Dateien komplett.
Für eine Schritt-für-Schritt-Bereinigung nach der Deinstallation einer App, siehe Wie man übrig gebliebenen App-Code aus Shopify entfernt.
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”, wenn kein Template, keine Section und kein anderes Snippet es rendert.
Verwaiste Snippets finden:
- Gehe in den snippets/-Ordner im Code-Editor
- 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
Typische 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 prüfen:
- Öffne den templates/-Ordner
- Jede
.json-Template-Datei listet auf, welche Sections auf diesem Seitentyp erscheinen - Wenn eine Section-Datei existiert, aber in keinem Template gelistet ist, wird sie nicht genutzt (obwohl sie im Theme-Editor vielleicht noch über “Abschnitt hinzufügen” verfügbar ist)
Prüfe auch die Section-Gruppen-Dateien (sections/header-group.json, footer-group.json) und die layout/theme.liquid auf {% section %}-Tags; eine Section, die in keiner dieser Dateien gelistet ist, kann sicher gelöscht werden.
Prioritätenliste für das Aufräumen
Nicht jeder ungenutzte Code hat dieselben Auswirkungen auf die Performance. Konzentriere dich auf diese Reihenfolge:
- Externe Skripte (App-Script-Tags in der theme.liquid) — jedes ist ein HTTP-Request an einen externen Server
- Große JavaScript-Dateien unter assets/ — besonders alles über 50 KB
- Ungenutzte CSS-Stylesheets — besonders solche, die auf jeder Seite über die theme.liquid geladen werden
- Verwaiste Snippets und Sections — geringere Auswirkung, aber gute Pflege
Für Speed-Fixes jenseits vom reinen Aufräumen, siehe Wie man ein Shopify-Theme schneller macht.
Den integrierten Theme Check von Shopify nutzen
Shopifys Theme-Entwicklungs-Tools beinhalten den Theme Check, der eine Reihe von Code-Problemen markiert, einschließlich ungenutzter Variablen und veralteter Liquid-Syntax. Für Händler (im Gegensatz zu Entwicklern) ist das schwieriger zugänglich — es ist primär ein CLI-Tool.
Der Shopify Code-Editor zeigt einige grundlegende Warnungen an. Was die Performance angeht, deckt der Theme Inspector langsames Liquid ab, und die Network- und Coverage-Tabs der DevTools decken Skripte und Stylesheets ab.
FAQ
Wird das Entfernen von ungenutztem Code meinen Shopify-Shop spürbar schneller machen?
Hängt davon ab, wie viel da ist. Das Entfernen einer einzigen 200 KB großen JavaScript-Datei von einer deinstallierten App kann bei langsamen Verbindungen einen spürbaren Unterschied machen. Das Entfernen von ein paar KB ungenutztem CSS wird kaum auffallen. Die größten Gewinne kommen durch die Beseitigung ganzer HTTP-Requests (Drittanbieter-Skripte), nicht durch kleine Reduzierungen der Dateigröße.
Woran erkenne ich, ob eine CSS-Regel wirklich ungenutzt ist?
Tools wie PurgeCSS oder der Coverage-Tab der 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 sieht auf der Startseite vielleicht ungenutzt aus, wird aber auf einer anderen Seite verwendet (z.B. nur auf der Produktseite).
Sollte ich integrierte Theme-Funktionen entfernen, die ich nicht nutze?
In der Regel nein — das Ändern des Basis-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 Theme-Editor-Einstellungen. Bearbeite den Theme-Code nur, wenn der Gewinn (Geschwindigkeit, Sicherheit) die Wartungskosten klar übersteigt. Wenn du ein schwerfälliges integriertes Feature durch ein leichteres, maßgeschneidertes Pendant ersetzen willst, beschreibe Fudge, dem KI-Operator für Shopify-Shops, was du möchtest, und er fügt den Ersatz als neue Section hinzu (so bleibt der Original-Theme-Code für sichere Theme-Updates erhalten). Bei der häufigsten Quelle von totem Code, Skripten von deinstallierten Apps, kann Fudge finden, was übrig geblieben ist, und dir eine Bereinigung zur Freigabe vorschlagen.
Warnt Shopify mich, wenn ich referenzierten Code lösche?
Der Code-Editor enthält Theme-Check-Warnungen für einige Referenzen (kaputte {% render %}-Aufrufe, fehlende Assets), wird aber nicht alle Abhängigkeiten finden. Schau dir nach Löschungen immer eine Vorschau deines Themes in einem Duplikat an, bevor du es veröffentlichst — stille Fehler zeigen sich oft nur auf bestimmten Seitentypen oder unter speziellen Bedingungen.
Wie oft sollte ich den Code meines Shopify-Themes aufräumen?
Vierteljährlich bei aktiven Shops oder nach großen App-Änderungen. Jährlich bei stabilen Shops. Eine Bereinigung in Verbindung mit einem Theme-Update (oder einem Neuaufbau mit einem frischen Theme) bringt oft drastische Verbesserungen.
