Die kurze Antwort
Minifizieren ist ein Aufräumen von Leerraum und Kommentaren. Ein Stylesheet mit einer Eigenschaft pro Zeile, Kommentaren und vier Leerzeichen Einrückung wird zu einer einzigen dichten Zeile, die der Browser genauso verarbeitet. Am Ergebnis auf dem Bildschirm ändert sich nichts, nur die Zahl der Bytes, die übers Netz gehen, sinkt.
Das Tool unten kann HTML, CSS und JavaScript. Wähl die Sprache, stell Aktion auf Minifizieren, füg deinen Code ein oder öffne eine Datei, und das Ergebnis erscheint rechts, mit der Größe vorher und nachher und wie viel kleiner es geworden ist. Kopier es oder lade es als Datei herunter. Dein Code wird im Browser verarbeitet und nicht hochgeladen.
Hier ausprobieren: CSS minifizieren
Vollständige Tool-Seite öffnenWas Minifizieren entfernt und was bleiben muss
Ein Minifier ist nur dann sicher, wenn er die Sprache gut genug versteht, um zu wissen, welche Zeichen eine Bedeutung haben. Ein falsch entferntes Leerzeichen macht Code still und heimlich kaputt, deshalb gelten je nach Sprache andere Regeln.
Manche Tools gehen über Leerraum hinaus. JavaScript-Bundler wie Terser oder esbuild benennen außerdem lokale Variablen in einzelne Buchstaben um und werfen nicht erreichbaren Code raus, CSS-Tools wie cssnano oder Lightning CSS kürzen Farben (#ffffff zu #fff) und fassen Regeln zusammen. Das spart mehr, ist aber eine Umwandlung deines Codes und nicht nur ein Aufräumen, und gehört in einen getesteten Build-Prozess. Der Minifier auf dieser Seite hört bewusst bei Kommentaren und Leerraum auf, deshalb kannst du ihn bei jedem Schnipsel ohne Testsuite gefahrlos nutzen.
- CSS: Kommentare und Zeilenumbrüche fallen weg, aber das Leerzeichen in einem Nachfahren-Selektor wie .menu a muss bleiben, und calc(1px + 2px) braucht die Leerzeichen um Plus und Minus. Lizenzkommentare, die mit /*! beginnen, bleiben meist erhalten.
- JavaScript: Kommentare und Einrückung fallen weg, aber Strings, Template-Literale und reguläre Ausdrücke dürfen nicht angefasst werden. In Code ohne Semikolons kann ein Zeilenumbruch eine Anweisung beenden, deshalb müssen manche Zeilenumbrüche bleiben.
- HTML: Leerraum zwischen Blockelementen fällt weg und mehrere Leerzeichen werden zu einem, aber das einzelne Leerzeichen zwischen zwei Links in einem Satz ist sichtbar und muss bleiben. Der Inhalt von pre und textarea bleibt exakt erhalten.
Wie viel spart Minifizieren?
Die Ersparnis hängt davon ab, wie die Datei geschrieben ist. Stark kommentierte, großzügig eingerückte Dateien schrumpfen am meisten. Das sind typische Bereiche für handgeschriebenen Code vor der Kompression durch den Server:
| Dateityp | Typische Ersparnis durch Minifizieren | Was den Unterschied macht |
|---|---|---|
| CSS | 15 bis 30 Prozent | Kommentare, Einrückung, eine Eigenschaft pro Zeile |
| JavaScript (nur Leerraum) | 20 bis 40 Prozent | Kommentare und Einrückung; lange Namen bleiben |
| JavaScript (mit Umbenennen) | 40 bis 70 Prozent | Lokale Variablen vom Bundler gekürzt |
| HTML | 10 bis 25 Prozent | Einrückung und Kommentare zwischen Elementen |
Minifizieren oder gzip? Beides
Server und CDNs komprimieren Textdateien meist mit gzip oder Brotli, bevor sie sie ausliefern, und das verkleinert CSS und JavaScript schon um etwa 60 bis 80 Prozent. Kompression ist sehr gut darin, wiederholten Leerraum zusammenzupressen, deshalb ist der zusätzliche Gewinn durch Minifizieren nach der Kompression kleiner als davor, oft im Bereich von 5 bis 20 Prozent der komprimierten Größe.
Es lohnt sich trotzdem. Minifizierte Dateien werden etwas schneller verarbeitet, Kommentare mit internen Notizen landen nie in der Öffentlichkeit, und die Ersparnis summiert sich bei jedem Seitenaufruf. Tools wie Lighthouse und PageSpeed Insights haben nicht minifiziertes CSS und JavaScript lange genau aus diesem Grund angemahnt. Prüf außerdem, ob die Kompression wirklich eingeschaltet ist: Öffne in den Entwicklertools des Browsers den Tab Netzwerk, klick auf eine CSS-Datei und such nach dem Antwort-Header content-encoding mit gzip oder br.
Wege zum Minifizieren, von einer Datei bis zur ganzen Website
Welche Methode passt, hängt davon ab, wie oft sich der Code ändert.
- Eine Datei oder ein Schnipsel: Füg sie ins Tool oben ein. Gut für Inline-Skripte in einem CMS, ein Stylesheet für eine E-Mail-Vorlage, ein Widget, das du einem Kunden übergibst, oder um zu prüfen, wie viel eine Datei bringen würde.
- Eine Website mit Build-Schritt: Lass den Bundler das machen. Vite, webpack, Parcel und esbuild minifizieren Produktions-Builds standardmäßig, meist brauchst du also keine zusätzliche Einstellung, nur den Befehl für den Produktions-Build.
- Eine Website ohne Build-Schritt: Viele CMS und Caching-Plugins haben eine Option zum Minifizieren, und manche CDNs bieten automatisches Minifizieren an. Teste die Seiten nach dem Einschalten, denn zu aggressives Minifizieren von HTML oder JavaScript ist die häufigste Ursache für ein kaputtes Layout oder Skript nach so einer Umstellung.
- Serverseitige Frameworks: ASP.NET, Django und Rails haben alle Asset-Pipelines oder Pakete, die beim Veröffentlichen minifizieren.
Wenn minifizierter Code nicht mehr läuft, und was hilft
Die meisten Probleme entstehen, weil der Originalcode sich auf etwas verlässt, das ein Minifier verändert, oder weil der Minifier zu aggressiv ist. Das sind die üblichen Verdächtigen:
- Fehlende Semikolons plus ein aggressiver JavaScript-Minifier: Eine Zeile, die mit ( oder [ beginnt, wird an die vorherige Zeile geklebt. Lass Zeilenumbrüche stehen (wie dieses Tool) oder ergänze die Semikolons.
- Zwei Dateien nach dem Minifizieren aneinandergehängt: Wenn die erste Datei nicht mit einem Semikolon endet, kann die zweite als Funktionsaufruf gelesen werden. Schließ jede Datei sauber ab oder lass einen Bundler sie zusammenführen.
- CSS-Hacks und ungewöhnliche Syntax: Alte Browser-Hacks, die von genauen Abständen abhängen, können aufhören zu funktionieren. Entferne Hacks, die du nicht mehr brauchst.
- Code, der seinen eigenen Text oder Funktionsnamen liest: Umbenennende Minifier machen ihn kaputt, reine Leerraum-Minifier nicht.
- Syntaxfehler im Quellcode: Die kann ein Minifier nicht beheben. Das Tool auf dieser Seite meldet nicht geschlossene Strings, Kommentare und Tags mit Zeile und Spalte, korrigier also zuerst das Original.
Gute Gewohnheiten
Bearbeite minifizierte Dateien nie direkt. Behalte den lesbaren Quellcode in der Versionsverwaltung und betrachte die minifizierte Kopie als Build-Ergebnis, das sich jederzeit neu erzeugen lässt. Wenn du die minifizierte Datei von jemand anderem lesen musst, stell im selben Tool Aktion auf Formatieren, dann bekommst du lesbare Einrückungen zurück.
Wenn du ein Build-Tool nutzt, erzeug für die Produktion Source Maps. Damit zeigen die Entwicklertools des Browsers beim Debuggen die Originalzeilen, während die Nutzer trotzdem die kleine Datei herunterladen.