Wird mein Code irgendwohin hochgeladen?

Nein. terser, csso und js-beautify laufen in Ihrem Browser, Ihr Code bleibt also auf Ihrem Gerät.

Funktioniert minifiziertes JavaScript noch?

Ja. terser nimmt nur Änderungen vor, die das Verhalten erhalten. Code, der zur Laufzeit von Funktions- oder Klassennamen abhängt, etwa manche Dependency-Injection-Frameworks, braucht eventuell abgeschaltetes Namenkürzen.

Wird modernes JavaScript mit ES-Modulen unterstützt?

Ja. terser versteht moderne Syntax wie Klassen, async/await, Optional Chaining und Top-Level-await. Dateien mit import- oder export-Anweisungen werden als ES-Module minifiziert.

Kann ich TypeScript oder JSX minifizieren?

Nein. Kompilieren Sie TypeScript oder JSX zuerst zu JavaScript und minifizieren Sie dann das Ergebnis. Ist der Code kein reines JavaScript, wird ein Syntaxfehler mit Zeile und Spalte angezeigt.

Was ist der Unterschied zwischen Minifizieren und gzip?

Minifizieren schreibt den Code selbst kürzer um. Gzip ist eine Kompression, die der Server beim Versand auf jede Datei anwendet. Beides ergänzt sich: erst minifizieren, dann den Server komprimieren lassen.

Kann ich JavaScript oder CSS wieder lesbar machen?

Ja. Wählen Sie Formatieren, um minifizierten Code neu einzurücken. Ursprüngliche Variablennamen und Kommentare lassen sich nicht wiederherstellen, aber die Struktur wird lesbar.

Warum werden meine CSS-Regeln zusammengeführt oder umsortiert?

Das ist die Umstrukturierung von csso, die Regeln mit gleichen Deklarationen oder Selektoren zusammenführt. Bei normalen Stylesheets ist das sicher; schalten Sie Komprimieren ab, wenn Sie auf eine exakte Regelreihenfolge zwischen Selektoren gleicher Spezifität angewiesen sind.

CSS, JS & HTML Minifier und Beautifier online

Kleinere Dateien für die Produktion, lesbarer Code zum Debuggen

Dieser Minifier verkleinert CSS, JavaScript und HTML für die Produktion und zeigt Ihnen genau, was Sie sparen: die Originalgröße, die minifizierte Größe und die Größe nach gzip, also das, was Ihre Besucher tatsächlich herunterladen. JavaScript wird mit terser minifiziert, dem Minifier, den die meisten modernen Build-Tools verwenden, CSS mit csso, das außerdem doppelte Regeln zusammenführt. Wechseln Sie zu Formatieren, um ein minifiziertes Bundle oder Stylesheet wieder in eingerückten, lesbaren Code zu verwandeln. Ihr Code wird in Ihrem Browser verarbeitet und nie hochgeladen.

So minifizieren oder formatieren Sie Code

1Wählen Sie die Sprache: CSS, JavaScript oder HTML. Wenn Sie eine .css-, .js- oder .html-Datei auf die Eingabe ziehen, wird sie automatisch gewählt.
2Wählen Sie Minifizieren, um den Code zu verkleinern, oder Formatieren, um ihn lesbar zu machen.
3Passen Sie die Optionen an: bei JavaScript, ob Namen gekürzt und der Code komprimiert wird; bei CSS, ob Regeln umstrukturiert werden; bei HTML, ob Inline-Styles und -Skripte minifiziert werden. Lizenzkommentare bleiben erhalten, sofern Sie das nicht abschalten.
4Lesen Sie die Größen unter dem Ergebnis ab, um die Ersparnis vor und nach gzip zu sehen.
5Kopieren Sie die Ausgabe oder laden Sie sie als .min.js, .min.css oder .html herunter.

Was Minifizierung bewirkt

Minifizierung entfernt alles, was ein Browser zum Ausführen des Codes nicht braucht: Kommentare, Einrückungen, Zeilenumbrüche und optionale Semikolons. Gute Minifier gehen weiter. terser benennt lokale Variablen in einzelne Buchstaben um (Mangling), entfernt unerreichbaren Code, berechnet konstante Ausdrücke vorab und verkürzt if-Anweisungen zu Ternären. csso kürzt Farben (#ff0000 wird zu red), entfernt Einheiten bei Nullwerten und führt Regeln mit identischen Deklarationen oder Selektoren zusammen.

Das Ergebnis verhält sich genau wie das Original, ist aber vor der Kompression typischerweise 30–70 % kleiner bei JavaScript und 15–40 % kleiner bei CSS.

Warum die Gzip-Größe zählt

Webserver und CDNs komprimieren Textdateien vor dem Versand mit gzip oder Brotli. Für die Ladezeit zählt also die komprimierte Größe, nicht die rohe. Die Kompression entfernt bereits einen Großteil der Wiederholungen, auf die Minifizierung abzielt, deshalb kann aus 60 % Ersparnis beim Minifizieren nach gzip nur noch 20 % werden. Das lohnt sich trotzdem bei jedem Seitenaufruf, und gerade Mangling zahlt sich auch nach der Kompression aus.

Der Gzip-Wert hier verwendet Stufe 6, den Standard von nginx und den meisten Servern. Brotli ist meist noch einmal 10–20 % kleiner.

Die Optionen erklärt

Namen kürzen: Benennt lokale Variablen und Funktionsparameter in kurze Namen um. Globale Namen und Objekteigenschaften werden nie umbenannt, sodass Code, den andere Skripte aufrufen, weiter funktioniert.
Komprimieren: Bei JavaScript die Optimierungsdurchläufe von terser: Entfernen von totem Code, Constant Folding, Inlining. Bei CSS die Umstrukturierung von csso, die Regeln zusammenführt und umsortiert, wo es sicher ist.
Lizenzkommentare behalten: Behält Kommentare, die mit /*! beginnen oder @license bzw. @preserve enthalten. Viele Open-Source-Lizenzen verlangen, dass diese erhalten bleiben.
Inline-CSS und -JS: Minifiziert in HTML den Inhalt von <style>- und <script>-Elementen sowie style-Attribute. JSON-LD-Blöcke werden ebenfalls komprimiert; Skripte anderer Typen bleiben unverändert.
Attribut-Anführungszeichen entfernen: Schreibt class=nav statt class="nav", wo HTML es erlaubt. Das ist gültiges HTML, aber manche XML-Tools und Template-Systeme kommen damit nicht zurecht, daher ist die Option standardmäßig aus.

Wie HTML minifiziert wird

Die HTML-Minifizierung ist hier bewusst vorsichtig. Kommentare werden entfernt, außer bedingte Kommentare für den Internet Explorer. Folgen von Leerzeichen werden zu einem einzigen zusammengefasst, und Leerraum neben Blockelementen wie <div> und <p>, wo er nie dargestellt wird, wird entfernt. Zwischen Inline-Elementen bleibt immer ein Leerzeichen erhalten, weil sonst <b>big</b> <i>world</i> zu einem Wort verschmelzen würde. Der Inhalt von <pre> und <textarea> wird nie angetastet.

Hat ein Inline-Skript einen Syntaxfehler, bleibt es genau so, wie es war, und Sie erfahren, in welcher Zeile der Fehler liegt, statt dass die ganze Seite scheitert.

Minifizierten Code formatieren

Formatieren nutzt js-beautify, um Code neu einzurücken: eine Anweisung pro Zeile bei JavaScript, eine Deklaration pro Zeile bei CSS und verschachtelte Einrückung bei HTML. So lesen Sie am schnellsten ein minifiziertes Fremdskript oder verstehen ein aus dem Browser kopiertes Stylesheet. Ursprüngliche Variablennamen oder vom Minifier entfernte Kommentare lassen sich nicht wiederherstellen, aber die Struktur wird leicht nachvollziehbar.

Für andere Formate gibt es den JSON-Formatter und den SQL-Formatter.

Häufige Fragen

Wird mein Code irgendwohin hochgeladen?: Nein. terser, csso und js-beautify laufen in Ihrem Browser, Ihr Code bleibt also auf Ihrem Gerät.
Funktioniert minifiziertes JavaScript noch?: Ja. terser nimmt nur Änderungen vor, die das Verhalten erhalten. Code, der zur Laufzeit von Funktions- oder Klassennamen abhängt, etwa manche Dependency-Injection-Frameworks, braucht eventuell abgeschaltetes Namenkürzen.
Wird modernes JavaScript mit ES-Modulen unterstützt?: Ja. terser versteht moderne Syntax wie Klassen, async/await, Optional Chaining und Top-Level-await. Dateien mit import- oder export-Anweisungen werden als ES-Module minifiziert.
Kann ich TypeScript oder JSX minifizieren?: Nein. Kompilieren Sie TypeScript oder JSX zuerst zu JavaScript und minifizieren Sie dann das Ergebnis. Ist der Code kein reines JavaScript, wird ein Syntaxfehler mit Zeile und Spalte angezeigt.
Was ist der Unterschied zwischen Minifizieren und gzip?: Minifizieren schreibt den Code selbst kürzer um. Gzip ist eine Kompression, die der Server beim Versand auf jede Datei anwendet. Beides ergänzt sich: erst minifizieren, dann den Server komprimieren lassen.
Kann ich JavaScript oder CSS wieder lesbar machen?: Ja. Wählen Sie Formatieren, um minifizierten Code neu einzurücken. Ursprüngliche Variablennamen und Kommentare lassen sich nicht wiederherstellen, aber die Struktur wird lesbar.
Warum werden meine CSS-Regeln zusammengeführt oder umsortiert?: Das ist die Umstrukturierung von csso, die Regeln mit gleichen Deklarationen oder Selektoren zusammenführt. Bei normalen Stylesheets ist das sicher; schalten Sie Komprimieren ab, wenn Sie auf eine exakte Regelreihenfolge zwischen Selektoren gleicher Spezifität angewiesen sind.