So nutzt du: HTML Minifier
- Füge HTML ein oder öffne eine
.html-Datei. - Wähle aus, was entfernt werden soll: Leerraum, Kommentare, Standard-
type-Attribute und überflüssige boolesche Werte. - Lass die Minifizierung von Inline-CSS und -JavaScript aktiviert, damit auch
<style>- und<script>-Blöcke kleiner werden. - Kopiere oder lade das minifizierte HTML herunter und vergleiche die Größen oben.
Was entfernt die HTML-Minifizierung?
Handgeschriebenes und generiertes HTML enthält Einrückungen, Zeilenumbrüche und Kommentare, die Browser ignorieren. Wenn du sie entfernst, muss der Browser weniger Bytes herunterladen, bevor er mit dem Rendern beginnen kann. Typische Einsparungen liegen bei 10–25 % des ursprünglichen HTML, bei Templates mit tiefer Einrückung oder langen Kommentaren auch mehr.
| Vorher | Nachher |
|---|---|
<!-- nav --> | (entfernt) |
<button disabled="disabled"> | <button disabled> |
<script type="text/javascript"> | <script> |
class=" card featured " | class="card featured" |
Einrückung zwischen <li>-Elementen | (entfernt) |
Sicherer Umgang mit Leerraum
Leerraum in HTML ist nicht immer bedeutungslos: Das Leerzeichen in <strong>Free</strong> plan trennt zwei Wörter. Dieser Minifier behält ein einzelnes Leerzeichen zwischen Inline-Elementen und Text, entfernt Leerraum nur um Block-Elemente wie div, p, li und section und verändert den Inhalt von <pre> und <textarea> nie, weil dort der Abstand Teil des Inhalts ist.
Was bleibt erhalten
- Bedingte Kommentare (
<!--[if IE]>) und Kommentare, die mit<!--!beginnen. - Anführungszeichen bei Attributen. Sie zu entfernen spart wenig und kann Attributwerte mit Leerzeichen kaputt machen.
- Scripts mit anderen Typen als JavaScript, etwa Templates. JSON-LD wird als JSON minifiziert.
HTML in der Produktion minifizieren
Für eine Build-Pipeline nutzt du am besten den integrierten Minifier deines Frameworks oder html-minifier-terser. Für einzelne Seiten, E-Mail-Templates, CMS-Einbettungen und Webflow-Custom-Code ist dieses Tool schneller. Stelle nach dem Minifizieren sicher, dass dein Server das HTML ebenfalls komprimiert. Prüfe das mit dem Website-Kompressionstest. Um minifiziertes HTML wieder lesbar zu machen, nutze den HTML-Formatter.
Auch gesucht als: html komprimieren, html minify online, html verkleinern, whitespace entfernen html, html kompressor, inline css js minify.
Passende Tools zu: HTML Minifier
- JavaScript Minifier — JavaScript einfügen und produktionsreifen, minifizierten Code von Terser erhalten — derselben Engine, die Vite, webpack und Rollup nutzen — mit echtem Vorher-Nachher-Vergleich und gzip-Größen.
- CSS Minifier — Füge ein Stylesheet ein, um es sofort zu verkleinern.
- SVG Optimierer — Bereinige SVGs aus Figma, Illustrator, Inkscape oder Sketch mit SVGO und prüfe in der Vorher-Nachher-Vorschau, ob das Icon danach noch richtig aussieht.
- Gzip komprimieren & entpacken — Komprimiere Text oder beliebige Dateien mit Gzip, Zlib oder Raw Deflate – oder füge Base64 ein bzw.
Häufige Fragen
Verbessert das Minifizieren von HTML die SEO?
Kann die Minifizierung mein Layout kaputt machen?
Werden CSS und JavaScript im HTML ebenfalls minifiziert?
<style>-Blöcke und style-Attribute werden minifiziert, <script>-Blöcke mit Terser. Hat ein Script einen Syntaxfehler, bleibt es unverändert.