HTML-Minifizierer

HTML-Minifizierung entfernt alle Zeichen, die ein Browser zum Rendern der Seite nicht benötigt – Kommentare, Zeilenumbrüche, Einrückungen und Leerzeichen zwischen Tags –, ohne das Aussehen oder die Funktion der Seite zu verändern. Zum Beispiel wird '<ul>\n <li>Eins</li>\n <li>Zwei</li>\n</ul>' (ca. 46 Bytes) zu '<ul><li>Eins</li><li>Zwei</li></ul>' (35 Bytes) minimiert. Die gerenderte Liste sieht für den Besucher identisch aus. Die Einsparung klingt pro Snippet gering, aber echte HTML-Seiten mit viel Einrückung und CMS-generiertem Markup schrumpfen routinemäßig um 15–25 % an rohen Bytes – mehr, wenn sie mit Gzip-Komprimierung auf dem Server kombiniert werden.

Kleineres HTML bedeutet weniger Bytes zum Herunterladen und weniger Arbeit für den Browser beim Parsen, sodass die Seite schneller lädt – was First Contentful Paint (FCP) und Core Web Vitals verbessert, besonders auf Mobilgeräten. Google's PageSpeed Insights markiert nicht-minimiertes HTML als Standard-Leistungsproblem und führt es in seinen Empfehlungen auf. Der Gewinn ist am größten bei handgeschriebenen oder CMS-generierten Seiten mit viel Einrückung und Entwickler-Kommentaren. Jedes Kilobyte, das Sie einsparen, ist ein Kilobyte, das der Besucher nie abrufen muss – was auf langsamen mobilen Verbindungen mit begrenzter Bandbreite am meisten zählt.

Kommentare (<!-- … -->), mehrfache Leerzeichen, Einrückungen und Zeilenumbrüche zwischen Tags sowie Abstände zwischen Block-Elementen werden entfernt. Der Minifier fasst außerdem boolesche Attribute zusammen (aus 'disabled="disabled"' wird schlicht 'disabled') und kann optional redundante schließende Tags wie </li> und </td> weglassen. Bedingte Kommentare (<!--[if IE]>) werden stets beibehalten, da sie für älteres IE-Targeting noch relevant sind. Der Inhalt von <pre>, <textarea>, <script> und <style> wird nie angetastet – Leerzeichen in diesen Elementen ist bedeutsam, und eine Änderung würde die Seite beschädigen.

Ja, wenn das HTML nicht bereits durch einen Build-Schritt läuft. Seiten, die Sie von Hand schreiben, aus einem CMS exportieren oder in einem WordPress-Theme zusammenstellen, sowie HTML-E-Mails und inline-<style>/<script>-Blöcke werden alle mit Einrückungen und Kommentaren ausgeliefert, die die Minifizierung kostenlos entfernt. Wenn ein Bundler wie Vite oder webpack Ihre Ausgabe bereits minimiert, benötigen diese Dateien keinen zweiten Durchlauf – aber die meisten HTML-Seiten in der Praxis sehen nie einen Bundler. Statische Site-Builder wie Jekyll und Hugo bieten HTML-Minifier als optionale Plugins an, und WordPress-Plugins wie WP Rocket, LiteSpeed Cache und Autoptimize erledigen es automatisch bei jedem Seitenaufruf.

Als reiner Text spart die Minifizierung typischerweise 10–25 %. Eine handgeschriebene 30-KB-Seite schrumpft oft auf etwa 24 KB, und ein kleines Snippet wie '<ul>\n <li>Eins</li>\n <li>Zwei</li>\n</ul>' (46 Bytes) wird auf 35 Bytes reduziert – rund 24 % kleiner. Sobald Ihr Server das Ergebnis gzippt, beträgt die kombinierte Reduktion meist 70–85 %. Dieses Tool zeigt die minimierte Größe und eine Gzip-Schätzung nebeneinander an, sodass Sie beide Zahlen auf einmal sehen. Die Gzip-Schätzung wird lokal in Ihrem Browser berechnet – nicht auf einem Server –, sodass Sie die realen kombinierten Einsparungen sehen, ohne etwas hochzuladen.

Nicht bei sicherer Ausführung, und genau so funktioniert dieses Tool. Es berührt niemals den Inhalt von <pre>, <textarea>, <script> oder <style>, wo Leerzeichen bedeutsam ist, und es bewahrt die einzelnen Leerzeichen zwischen Inline-Elementen wie Links und <span>s – 'ein <a href="/x">Link</a> hier' wird also nie zu 'einLinkhier' zusammengezogen. Einige schnelle Online-Minifier reduzieren diesen Abstand und verändern subtil das Rendering oder Layout. Kangax's HTMLMinifier – die beliebteste Node.js-HTML-Minifizierungsbibliothek – verwendet aus demselben Grund einen ähnlich sicheren Standardansatz. Wenn Sie nach der Minifizierung einen Darstellungsunterschied bemerken, verwenden Sie den Beautify-Modus, um die ursprüngliche Struktur wiederherzustellen.

Wechseln Sie mit dem Umschalter oben in den Beautify-Modus und fügen Sie Ihr minimiertes HTML ein. Das Tool rückt das Markup neu ein und setzt Tags auf eigene Zeilen, sodass aus '<ul><li>Eins</li><li>Zwei</li></ul>' wieder lesbarer, formatierter Code wird. Wählen Sie 2-Leerzeichen-, 4-Leerzeichen- oder Tab-Einrückung, um dem Stil Ihres Projekts zu entsprechen. Dies ist die Umkehrung der Minifizierung – nützlich zum Untersuchen einer minimierten Seite aus der Produktion, zum Lesen eines CMS-Templates, das ein Build-Tool zusammengepresst hat, oder zum Debuggen eines Layouts durch klare Darstellung der vollständigen Tag-Struktur.

Minifizierung verkleinert den Quelltext selbst – Sie liefern eine physisch kleinere .html-Datei aus. Gzip und Brotli komprimieren die Bytes während der Übertragung, und der Browser dekomprimiert sie transparent beim Empfang. Beide Methoden ergänzen sich: Erst die Quelle minimieren, dann vom Server gzippen lassen. Google's web.dev empfiehlt beide Schritte – Minifizierung eliminiert Bytes, die Gzip nicht vollständig komprimieren kann, während Gzip repetitive Muster behandelt, die die Minifizierung belässt. Deshalb zeigt dieses Tool sowohl eine minimierte Byte-Anzahl als auch eine Gzip-Schätzung, damit Sie den vollständigen kombinierten Gewinn vor und nach dem Deployment sehen.

Minifizierung macht HTML kleiner, während es gültig und nach dem Beautifizieren vollständig lesbar bleibt – es werden nur Zeichen gelöscht, die der Browser ignoriert. Obfuskierung verschlüsselt oder schreibt Code absichtlich um, um ihn schwer verständlich oder kopierbar zu machen. Das Minimieren von HTML benennt niemals Ihre Klassen, IDs oder Inhalte um und verändert keine Bedeutung; es ist verlustfrei und umkehrbar, was Obfuskierung nicht ist. Wenn Sie verhindern möchten, dass andere Ihren HTML-Quellcode lesen (den Browser ohnehin über Seitenquelltext zugänglich machen), hilft Minifizierung allein nicht – dazu wären zusätzliche Techniken nötig, die über einen Minifier hinausgehen.

Ja, in einem einzigen Durchlauf. Lassen Sie 'Inline-CSS minimieren' aktiviert, und das Tool komprimiert den Inhalt jedes <style>-Blocks – entfernt Kommentare und Leerzeichen und schützt dabei Strings, url() und calc(). 'Inline-JS minimieren' bearbeitet <script>-Blöcke konservativ: Es entfernt Kommentare und reduziert Leerzeichen, behält aber Zeilenumbrüche bei, damit automatische Semikolon-Einfügung (ASI) Ihren Code nicht beschädigen kann. Als JSON oder Templates markierte Skripte bleiben unverändert. Dieser kombinierte Ansatz schließt eine Lücke, die reine CSS-Minifier und JS-Minifier beide aufweisen – HTML-Seiten mit allen drei gemischten Sprachen.

Mit diesem Tool ja – denn es läuft zu 100 % in Ihrem Browser per JavaScript. Ihr HTML wird niemals hochgeladen, protokolliert oder irgendwo gespeichert, sodass auch unveröffentlichte Seiten, Kundenprojekte oder Markup mit privaten Daten vollständig auf Ihrem Gerät verbleiben. Sie können dies bestätigen, indem Sie die Netzwerkverbindung trennen: Der Minifier funktioniert weiterhin offline, da kein Server beteiligt ist. Im Gegensatz dazu senden HTMLMinifier.com und Minifier.org beide Ihr HTML zur Verarbeitung an einen Remote-Server. Auch Willpeavy.com's HTML-Minifier führt einen Server-Roundtrip durch. Bei vertraulichen Projekten ist lokale Browser-Verarbeitung die einzig sichere Option.

Sie haben zwei Möglichkeiten. Für einen einmaligen Fall kopieren Sie Ihren gerenderten Seitenquellcode (oder die Ausgabe eines Templates) und fügen ihn hier zum Minimieren ein. Für jede Seite automatisch kann ein Caching- oder Optimierungs-Plugin HTML im laufenden Betrieb minimieren: WP Rocket, W3 Total Cache, LiteSpeed Cache und Autoptimize bieten alle HTML-Minifizierungseinstellungen. WP Rocket und LiteSpeed Cache sind für komplexe Themes mit viel dynamischem Inhalt am zuverlässigsten. Dieses Tool eignet sich perfekt für Theme-Snippets, benutzerdefinierte Blöcke und HTML-E-Mail-Templates, die diese Plugins nicht automatisch abdecken – beispielsweise benutzerdefinierte Elementor-Bereiche oder ACF-Feld-Templates.

HTMLMinifier.com und Minifier.org sind beliebte Online-HTML-Minifier, senden Ihr HTML jedoch beide zur Verarbeitung an einen Remote-Server. Das bedeutet, dass Ihr Markup – einschließlich unveröffentlichter Seiten, Passwörter in Formularen oder vertraulicher Kundenprojekte – Ihr Gerät verlässt. Minifycode.com ist ein weiteres serverseitiges Tool mit derselben Einschränkung. Dieses Tool erledigt alles lokal im Browser, sodass nichts je hochgeladen wird. Funktional bietet es zusätzlich einen bidirektionalen Beautifier in derselben Oberfläche, Echtzeit-Gzip-Schätzungen und Inline-CSS/JS-Minifizierung – alles ohne Seitenneuladen oder Server-Roundtrips.

Ja, er funktioniert vollständig auf Mobilgeräten – HTML aus der Zwischenablage einfügen, das minimierte Ergebnis sofort sehen und zurückkopieren. Die Oberfläche passt sich kleinen Bildschirmen an. Er wurde auf Safari für iOS und Chrome für Android getestet. Ein häufiger mobiler Anwendungsfall ist das Prüfen, wie viel kleiner ein Seiten-Template wird, bevor eine Änderung übernommen wird – Sie können das HTML aus dem mobilen Browser-Quelltext einfügen und die Einsparungen direkt sehen. Kein App-Download, keine Anmeldung und keine Nutzungslimits auf Mobilgeräten. Es funktioniert auch ohne Netzwerkverbindung, sobald die Seite geladen wurde.