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 ermöglichen es dir, benutzerdefiniertes HTML in einem „Custom HTML“-Block hinzuzufügen. JavaScript, das hier eingefügt wird, wird von Shopify nicht minifiziert.
Passend dazu: Custom JavaScript in Shopify hinzufügen.
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 automatisch übernimmt. Für die Gesamtperformance gilt: Bildoptimierung, das Entfernen ungenutzter App-Skripte und das Beheben von Render-blocking Resources haben einen weitaus größeren Impact als das Minifizieren des restlichen Codes.
Eine 30 KB große CSS-Datei, die auf 22 KB minifiziert wird, spart 8 KB. Das Entfernen eines einzelnen ungenutzten App-Skripts mit 200 KB spart hingegen 200 KB. Konzentriere dich zuerst darauf.
Passend dazu: App-Code-Reste aus Shopify entfernen.
Passend dazu: Ungenutzten Code in Shopify entfernen.
Was die Shopify-Performance wirklich voranbringt
Wenn du dich mit Minification beschäftigst, hast du wahrscheinlich das Limit bei den „Quick Wins“ für die Performance bereits erreicht. Hier liegen die wirklichen Hebel:
Passend dazu: Ein Shopify Theme schneller machen.
1. Bildoptimierung. Unkomprimierte Produktbilder sind die Ursache Nr. 1 für langsame Shopify-Stores. Nutze das WebP-Format. Komprimiere Bilder vor dem Upload. Zielwert: unter 200 KB für Hero-Bilder, unter 100 KB 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, verursacht der Verbindungsaufbau Latenzzeit. Entferne Skripte von Apps, die du nicht mehr nutzt.
3. Render-blocking Scripts fixen. Skripte im <head>, die kein async oder defer Attribut haben, verzögern den Seitenaufbau. Schau dir dazu unseren Guide zum Optimieren von Render-blocking Scripts an.
4. Ein schnelles Basis-Theme nutzen. Dawn (Shopify’s offizielles Theme) erreicht regelmäßig Scores von 90+ bei Mobile PageSpeed. Stark angepasste oder ältere Themes liegen oft nur bei 50-70. Mit einem schnellen Theme zu starten, ist effektiver als ein langsames mühsam 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.
