Ungenutztes CSS & JavaScript bei Shopify entfernen (2026)

Warnungen zu ungenutztem CSS & JS in 60 Sekunden beheben

Führen Sie einen kostenlosen Speed-Test für Ihren Shop durch — suchen Sie im Abschnitt „Empfehlungen" nach „Nicht verwendetes CSS reduzieren" und „Nicht verwendetes JavaScript reduzieren". Diese Warnungen zeigen genau, wie viele Kilobyte toter Code das Rendern Ihrer Seite blockieren. Thunder Page Speed Optimizer behebt beides automatisch:

• Verzögert nicht-kritisches CSS, sodass es erst nach dem Rendern der Seite lädt
• Verzögert nicht-kritisches JavaScript (Apps, Analysen, Widgets)
• Bindet kritisches CSS für den sichtbaren Bereich inline ein
• Optimiert die Skript-Ausführungsreihenfolge, um Main-Thread-Blockaden zu reduzieren

Installation mit einem Klick. Die Warnungen verschwinden möglicherweise nicht komplett (Shopifys Kernskripte lassen sich nicht verzögern), aber Thunder reduziert die Auswirkung bei den meisten Shops um 60-80 %.

Warum Shopify-Shops so viel ungenutzten Code haben

Jeder Shopify-Shop lädt ungenutztes CSS und JavaScript. Das ist kein Fehler — so funktioniert Shopifys Architektur. Zu verstehen, warum, hilft Ihnen zu wissen, was Sie beheben können und was nicht.

1. Globales Theme-CSS

Shopify-Themes bündeln das gesamte CSS in einer oder zwei Dateien (etwa base.css oder theme.css), die auf jeder Seite laden. Diese Datei enthält Stile für Startseite, Produktseiten, Kategorieseiten, Warenkorb, Blog und Kontoseiten — alles. Wer Ihre Produktseite besucht, lädt Cart-Drawer-Stile, Kategorie-Grid-Stile, Blogartikel-Stile und Kontoseiten-Stile herunter, die er auf dieser Seite nie benötigt.

Ein unverändertes Dawn-Theme lädt ~60KB CSS. Mit Anpassungen und zusätzlichem CSS wächst das auf 100-200KB. Premium-Themes können 200-400KB erreichen. Auf jeder einzelnen Seite werden typischerweise nur 30-50 % dieses CSS tatsächlich genutzt.

2. Von Apps eingefügter Code

Jede installierte Shopify-App kann JavaScript und CSS in Ihr Theme einfügen. Die meisten Apps tun das global — auf jeder Seite — selbst wenn die App nur auf Produktseiten oder im Warenkorb etwas tut. Eine Bewertungs-App lädt ihr CSS auf Ihrer Über-uns-Seite. Eine Warenkorb-Upsell-App lädt ihr JS auf Blogartikeln. Jede App fügt typischerweise 50-300KB CSS/JS hinzu.

Mit 10 installierten Apps laden Sie womöglich 500KB-3MB App-Code auf jeder Seite, von dem jede Seite nur einen Bruchteil nutzt. Konkrete Beispiele finden Sie in unserer Analyse der Apps, die Ihren Shop verlangsamen.

3. Verwaister Code deinstallierter Apps

Wenn Sie eine Shopify-App deinstallieren, wird ihre Backend-Funktionalität entfernt, aber oft bleibt Code in Ihrem Theme zurück. Script-Tags in theme.liquid, Liquid-Snippets im snippets/-Ordner und Inline-CSS überdauern die Deinstallation. Das ist toter Code, der auf jeder Seite lädt — ohne jeden Nutzen.

4. Shopifys eigene Skripte

Shopify fügt auf jeder Storefront-Seite eigenes JavaScript ein — für Analysen, Warenkorb-Funktionalität, Kundenkonten und den Checkout. Diese Skripte umfassen insgesamt 100-200KB und lassen sich nicht entfernen oder verzögern, ohne Kernfunktionalität zu zerstören.

So finden Sie ungenutztes CSS & JavaScript in Ihrem Shopify-Shop

Bevor Sie etwas entfernen, müssen Sie identifizieren, was ungenutzt ist und woher es stammt. Chromes Coverage-Tool ist die beste kostenlose Option.

Schritt 1: Chrome-DevTools-Coverage öffnen

1. Öffnen Sie Ihren Shop in Chrome
2. Drücken Sie F12 (oder Cmd+Option+I auf dem Mac), um die DevTools zu öffnen
3. Drücken Sie Strg+Umschalt+P (Cmd+Shift+P auf dem Mac), um die Befehlspalette zu öffnen
4. Tippen Sie „Coverage" und wählen Sie „Show Coverage"
5. Klicken Sie auf den Neuladen-Button (⟳) im Coverage-Panel
6. Warten Sie, bis die Seite vollständig geladen ist

Schritt 2: Ergebnisse lesen

Das Coverage-Panel zeigt jede CSS- und JS-Datei mit einem rot/grünen Balken:

• Grün = Code, der auf dieser Seite ausgeführt/angewendet wurde
• Rot = Code, der geladen, aber auf dieser Seite nie genutzt wurde
• Total Bytes = gesamte Dateigröße
• Unused Bytes = verschwendete Bandbreite, die das Rendern blockiert

Klicken Sie auf eine Datei, um die Nutzung Zeile für Zeile zu sehen. Rote Zeilen sind ungenutzte CSS-Regeln oder JavaScript-Funktionen. Bei einem typischen Shopify-Shop sehen Sie:

• base.css oder theme.css — 50-70 % ungenutzt (globale Theme-Stile)
• vendor.js oder theme.js — 40-60 % ungenutzt (Theme-JavaScript)
• App-spezifische Dateien — 70-90 % ungenutzt pro Seite (der meiste App-Code wird nicht gebraucht)
• Shopifys eigene Skripte — 30-50 % ungenutzt (Plattform-Kerncode)

Schritt 3: Die größten Übeltäter identifizieren

Sortieren Sie nach „Unused Bytes" (Klick auf die Spaltenüberschrift). Die Dateien mit den meisten ungenutzten Bytes sind Ihre wirkungsvollsten Ziele. Typischerweise: Theme-CSS, 1-2 große App-Bundles und Shopifys Analyse-Skripte. Speziell für die JavaScript-Seite bietet unser Leitfaden zur JavaScript-Optimierung eine tiefere Analyse.

Welchen ungenutzten Code Sie bei Shopify tatsächlich entfernen können

Seien wir realistisch: Sie können nicht das gesamte ungenutzte CSS/JS bei Shopify beseitigen. Aber Sie können spürbare Reduzierungen erreichen. Das ist machbar:

{% comment %} Only load review CSS on product pages {% endcomment %}
{% if template contains 'product' %}
  {{ 'review-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

{% comment %} Only load collection JS on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}

Warum Verzögern bei Shopify besser ist als Entfernen

Auf einer statischen Seite ist das Entfernen von ungenutztem CSS unkompliziert — jede Seite hat bekannte, feste Inhalte. Bei Shopify ist es gefährlich, weil:

• Dynamische Inhalte — Liquid-Templates fügen CSS-Klassen bedingt hinzu. Ein Produkt mit 5 Varianten lädt anderes CSS als eines mit 2. PurgeCSS kann Liquid-generierte Klassen nicht erkennen.
• Per JavaScript hinzugefügte Elemente — Cart Drawer, Schnellansicht-Modals und AJAX-Warenkorb erzeugen DOM-Elemente dynamisch. Ihr CSS wirkt „ungenutzt", bis eine Nutzerinteraktion sie auslöst.
• Seitenübergreifende Abhängigkeiten — CSS, das auf Ihrer Startseite ungenutzt ist, ist auf Ihrer Produktseite kritisch. Es aus dem globalen Stylesheet zu entfernen zerstört andere Seiten.
• App-Updates — Apps können ihre CSS-Klassennamen in Updates ändern. Haben Sie ihr „ungenutztes" CSS bereinigt, zerstört das Update das Styling.

Verzögern ist die sichere Alternative. Verzögertes CSS/JS lädt und funktioniert weiterhin — es lädt nur nach dem Rendern der Seite, statt es zu blockieren. Der Besucher sieht die Seite schneller, alle Funktionen bleiben erhalten, und bei Updates geht nichts kaputt.

Genau das macht Thunder mit renderblockierenden Ressourcen. Er erkennt, welches CSS und JavaScript für den ersten Renderschritt nicht benötigt wird, und verzögert es — während er das kritische CSS für den sichtbaren Bereich inline einbindet.

Schritt für Schritt: Verwaisten App-Code bereinigen

Diese eine Bereinigung sollten Sie manuell durchführen — sie ist kostenlos, sicher und liefert sofortige Ergebnisse. So finden und entfernen Sie Code deinstallierter Apps:

1. Theme sichern — Gehen Sie zu Onlineshop → Themes → Aktionen → Duplizieren. Haben Sie immer eine Rückfallebene.
2. Aktuelle Apps auflisten — Gehen Sie zu Einstellungen → Apps und Vertriebskanäle. Notieren Sie jede installierte App.
3. Theme-Editor öffnen — Gehen Sie zu Onlineshop → Themes → Code bearbeiten.
4. theme.liquid prüfen — Öffnen Sie layout/theme.liquid und suchen Sie nach <script>-Tags und <link>-Tags, die auf externe Domains verweisen. Sehen Sie eine Domain, die zu keiner installierten App passt, handelt es sich wahrscheinlich um verwaisten Code.
5. snippets/ prüfen — Durchsuchen Sie den Snippets-Ordner. Dateien mit App-Namen (z. B. bold-options.liquid, loox-reviews.liquid), die zu keiner installierten App passen, sind verwaist. Löschen Sie sie und entfernen Sie die zugehörigen {% render %}- oder {% include %}-Aufrufe.
6. Nach bekannten Mustern suchen — Nutzen Sie die Suche des Code-Editors (Strg+F) über alle Dateien nach:
   • App-Namen, die Sie früher genutzt haben
   • ScriptTag-Verweisen
   • Externen Domains in src-Attributen von Skripten
7. Gründlich testen — Prüfen Sie die Theme-Vorschau, testen Sie In-den-Warenkorb, den Checkout-Ablauf und alle Seitentypen, bevor Sie veröffentlichen.

Typische Bereinigungsgewinne: entfernte Snippets von Bewertungs-Apps (50-100KB), alte Analyse-Skripte (20-50KB) und aufgegebener Popup-/Banner-Code (30-80KB). Einzeln nicht riesig, aber in Summe erheblich. Für ein vollständiges Theme-Audit siehe unseren Leitfaden zum Shopify-Speed-Audit.

Realistische Erwartungen: Wie viel können Sie reduzieren?

Die Warnung „Nicht verwendetes CSS/JS reduzieren" in PageSpeed Insights wird in einem Shopify-Shop nie vollständig verschwinden. Das ist realistisch:

Der wirkungsvollste Schritt ist fast immer das Entfernen von Apps, die Sie nicht aktiv benötigen. Jede entfernte App beseitigt sowohl ihren Code als auch ihre HTTP-Anfragen. Für die Optimierung des verbleibenden JavaScripts siehe unseren Leitfaden zur JavaScript-Optimierung. Speziell zu CSS behandelt unser Leitfaden zur CSS-Optimierung kritisches CSS, Minifizierung und fortgeschrittene Techniken.

Häufig gestellte Fragen

Lassen Sie ungenutzten Code Ihren Shopify-Shop nicht länger ausbremsen

Sie können ungenutztes CSS und JavaScript bei Shopify nicht vollständig beseitigen — die Plattform-Architektur lädt globale Stile und Skripte konstruktionsbedingt. Aber mit drei Schritten erreichen Sie einen spürbaren Unterschied: verwaisten App-Code bereinigen (kostenlos, sofort), installierte Apps auf das Nötigste reduzieren (kostenlos, hohe Wirkung) und alles Übrige mit Thunder Page Speed Optimizer verzögern (60 Sekunden, höchste Wirkung).

Die Warnungen „Nicht verwendetes CSS/JS reduzieren" in PageSpeed Insights verschwinden womöglich nie ganz. Das ist bei Shopify normal. Konzentrieren Sie sich auf die echten Kennzahlen: LCP unter 2.5 Sekunden, CLS unter 0.1 und schnelles wahrgenommenes Laden.

Testen Sie Ihren Shop jetzt und prüfen Sie, wie viel ungenutzter Code Ihr Rendern blockiert. Die vollständige Strategie zur Geschwindigkeitsoptimierung finden Sie in unserem kompletten Leitfaden zur Shopify-Geschwindigkeitsoptimierung.