Key Takeaways
- Shopify minifiziert CSS und JavaScript aus Theme-Dateien automatisch – du musst das für den Großteil des Codes nicht manuell erledigen.
- Das CDN von Shopify liefert alle Assets mit aktivierter gzip- oder Brotli-Komprimierung aus.
- Manuelle Minifizierung ist erforderlich für: Inline-Skripte in theme.liquid und benutzerdefinierte Code-Blöcke, die direkt im HTML hinzugefügt werden.
- Tools: CSS Minifier (cssnano), Terser für JavaScript.
Minifizierung entfernt Leerzeichen und Kommentare und kürzt Variablennamen in Codedateien, um sie kleiner zu machen. Kleinere Dateien werden schneller übertragen, was die Ladezeit der Seite verbessert. Die gute Nachricht für Shopify-Shopbetreiber: Das meiste davon passiert automatisch.
So minifizierst du JavaScript und CSS in Shopify
Kurze Antwort: Shopify erledigt das für dich.
Wenn du CSS- und JavaScript-Dateien in dein Shopify-Theme hochlädst oder bearbeitest, minifiziert die Shopify-Plattform diese automatisch, wenn sie an Besucher ausgeliefert werden. Die Version, die du im Code-Editor siehst, ist der lesbare, unminifizierte Quellcode – die an den Browser gesendete Version ist minifiziert.
Zusätzlich liefert das CDN von Shopify (betrieben von Fastly) alle Assets mit aktivierter gzip- oder Brotli-Komprimierung aus. Dies reduziert die Übertragungsgröße aller textbasierten Dateien – HTML, CSS, JavaScript – unabhängig davon, ob sie bereits minifiziert sind.
Was Shopify automatisch minifiziert
Theme-CSS-Dateien (z. B. assets/base.css, assets/theme.css) — minifiziert auf dem Shopify-CDN.
Theme-JavaScript-Dateien (z. B. assets/theme.js, assets/global.js) — minifiziert auf dem Shopify-CDN.
Section {% javascript %} Blöcke — Shopify bündelt und minifiziert diese automatisch als Teil der Section-Rendering-Pipeline.
Section {% stylesheet %} Blöcke — werden ebenfalls automatisch verarbeitet.
Wann du manuell minifizieren musst
Inline-Skripte, die direkt in theme.liquid hinzugefügt wurden
Wenn du einen <script>-Block direkt in die theme.liquid einfügst (nicht in eine Asset-Datei):
<!-- theme.liquid -->
<script>
// Dieser Code wird von Shopify NICHT automatisch minifiziert
var myStoreConfig = {
currency: 'USD',
theme: 'Dark'
};
</script>Dieser Code ist Teil der HTML-Antwort, keine separate Asset-Datei – Shopify minifiziert ihn nicht. Für kleine Konfigurationsobjekte ist das meistens okay. Bei größeren Inline-Skripten solltest du sie vor dem Einfügen minifizieren.
Drittanbieter-Skripte, die du selbst hostest
Wenn du ein Drittanbieter-Skript in deinen assets/-Ordner kopierst, anstatt es von einem externen CDN zu laden, wird das Shopify-CDN es zwar komprimiert ausliefern, aber nicht minifizieren, falls es nicht schon minifiziert war. Nutze am besten die minifizierte Version der Bibliothek (library.min.js statt library.js).
Custom Code Blöcke im Theme-Editor
Einige Themes erlauben es dir, benutzerdefiniertes HTML in einem „Custom HTML“-Block hinzuzufügen. JavaScript, das hier eingefügt wird, wird von Shopify nicht minifiziert.
Tools für die manuelle Minifizierung
CSS:
- cssnano.co — CSS einfügen, minifizierten Output erhalten
- cssminifier.com — einfaches Online-Tool
JavaScript:
- Terser REPL — dasselbe Tool, das Webpack und Vite intern nutzen, verfügbar als Online-Tool
- javascript-minifier.com — schneller Online-Minifier
Für professionelle Minifizierung (z. B. wenn du ein Theme entwickelst), nutze diese Tools lieber als Teil einer Build-Pipeline (Webpack, Vite oder Rollup) statt manuell.
Verbessert Minifizierung die Shopify-Performance spürbar?
Für Theme-Dateien – nein, da Shopify das übernimmt. Für die Gesamtperformance gilt: Bildoptimierung, das Reduzieren ungenutzter App-Skripte und das Beheben von Render-blocking Resources haben eine weitaus größere Wirkung als das Minifizieren des verbleibenden Codes.
Eine 30KB CSS-Datei, die auf 22KB minifiziert wird, spart 8KB. Das Entfernen eines einzigen ungenutzten App-Skripts mit 200KB spart 200KB. Konzentriere dich zuerst darauf.
Was die Shopify-Performance wirklich voranbringt
Wenn du dich mit Minifizierung beschäftigst, hast du wahrscheinlich die einfachen Optimierungen bereits erledigt. Hier liegen die echten Hebel:
1. Bildoptimierung. Nicht komprimierte Produktbilder sind die Ursache Nr. 1 für langsame Shopify-Shops. Nutze das WebP-Format. Komprimiere Bilder vor dem Upload. Zielwert: unter 200KB pro Hero-Image, unter 100KB für Produktbilder.
2. Ungenutzte App-Skripte entfernen. Jedes externe App-Skript ist ein HTTP-Request an einen Drittanbieter-Server. Selbst wenn das Skript klein ist, sorgt der Verbindungs-Overhead für Latenz. Entferne Skripte von Apps, die du nicht mehr nutzt.
3. Render-blocking Scripts beheben. Skripte im <head> ohne async oder defer verzögern den Seitenaufbau. Schau dir unseren Guide zum Optimieren von Render-blocking Scripts an.
4. Ein schnelles Basis-Theme nutzen. Dawn (Shopifys offizielles Theme) erreicht regelmäßig 90+ Punkte bei Mobile PageSpeed. Stark angepasste oder ältere Themes liegen oft bei 50-70. Mit einem schnellen Theme zu starten, ist effektiver als ein langsames zu optimieren.
Den aktuellen Minifizierungs-Status prüfen
Öffne die Chrome DevTools (F12) → Network Tab → Filter nach CSS oder JS → Klick auf eine Datei → schau dir den Response Body an. Wenn er minifiziert ist, siehst du komprimierten, schwer lesbaren Code. Wenn er Leerzeichen und Kommentare enthält, ist er auf CDN-Ebene nicht minifiziert (untypisch für Shopify-Theme-Dateien).
Für die tatsächliche Performance deiner Seite nutze PageSpeed Insights – es wird spezifische Chancen aufzeigen, einschließlich aller nicht minifizierten Dateien, die es erkennt.
