HTML minifizieren
Kleinere Seiten, identische Darstellung
Hier können Sie HTML minifizieren: Das kostenlose Online-Tool entfernt Kommentare und Abstände aus Ihrem Markup und gibt eine kleinere Seite zurück. Fügen Sie zuerst Ihr HTML ein oder legen Sie Ihre Dateien ab. Lösen Sie anschließend die gewünschte Aktion aus. Kopieren Sie schließlich das Ergebnis, denn die ganze Arbeit passiert in diesem Tab.
- KostenlosPreis
- Nicht nötigKonto
- KeineUploads
- Bei jedem DurchlaufGeprüft
HTML-Minifier
Markup einfügen oder Dateien ablegen — nichts wird hochgeladen
Minifiziertes Ergebnis
- Original
- —
- Minifiziert
- —
- Gespart
- —
- Mit gzip
- —
- Tags
- —
- Dauer
- —
Bereit. Fügen Sie Ihr HTML ein und drücken Sie dann Minifizieren oder Verschönern.
Was bedeutet es, HTML zu minifizieren?
Ein HTML-Minifier schreibt eine für Menschen geschriebene Seite in eine um, die der Browser schneller lädt. Er wirft Ihre Kommentare und die Einrückung weg, die nur Lesern hilft. Jedes Tag und jedes Wort bleibt jedoch erhalten, also wird die Seite genau wie vorher dargestellt.
Die Ersparnis kommt früh, und genau deshalb zählt sie. HTML ist das Erste, was ein Browser anfordert, und alles andere wartet darauf. Deshalb startet ein Dokument, das von 80 KB auf 58 KB schrumpft, die ganze Kaskade früher.
Manche nennen dieselbe Aufgabe HTML-Kompressor. Beide Begriffe beschreiben ein Ergebnis: weniger Zeichen, identische Darstellung. Kurz gesagt, Sie liefern die kleine Seite aus und behalten die lesbare.
Manche Leerzeichen zählen, die meisten nicht. Die HTML-Syntaxspezifikation zieht diese Grenze genau dort, wo diese Seite sie zieht.
Warum HTML schwerer zu minifizieren ist als CSS oder JavaScript
In CSS und JavaScript ist der Abstand zwischen zwei Tokens Dekoration. In HTML ist er Text, den ein Leser sehen kann. `bold italic` zeigt eine Lücke zwischen den Wörtern und `bolditalic` nicht, also schreibt ein Tool, das jedes Leerzeichen herausquetscht, still Ihren Satz um.
Dieser eine Unterschied erklärt die meisten Meldungen à la „Der Minifier hat meine Seite kaputt gemacht“. Deshalb fragt dieses Tool, was auf beiden Seiten jeder Lücke steht. Neben einem Inline-Tag wird die Lücke zu einem Leerzeichen, weil ein Leser sie sehen würde. Neben einem Block-Tag verschwindet sie, weil dort nichts dargestellt wird.
Was unverändert erhalten bleibt
Alles innerhalb von `pre`, `textarea`, `script`, `style` und `code` bleibt Byte für Byte erhalten, Zeilenumbrüche inklusive. Ein Leerzeichen in einem `pre`-Block ist sichtbare Ausgabe, und ein Zeilenumbruch in einem Skript kann eine Anweisung beenden.
Auch bedingte Kommentare bleiben erhalten. `
Warum Anführungszeichen bei Attributen bleiben
Manche Tools entfernen die Anführungszeichen aus `class="card"`. Die Bytes sind echt, aber wenige, und ob es sicher ist, hängt vom Wert ab. Dieses Tool lässt sie stehen, denn ein paar Zeichen rechtfertigen diese Art von Fehler nie.
Auf dieser Seite
- Das Tool
- Was bedeutet es, HTML zu minifizieren?
- HTML minifizieren in vier Schritten
- Ein HTML-Minifier, der Ihre Leerzeichen respektiert
- Das Beste aus diesem HTML-Kompressor herausholen
- Fehler, die eine minifizierte Seite zerstören
- Häufige Fragen zum HTML-Minifier
- Weitere Tools, die Sie sofort nutzen können
Weiterlesen
HTML minifizieren in vier Schritten
Ohne Software, ohne Registrierung, ohne Warteschlange. Alles läuft in dem Tab, den Sie schon offen haben.
- 1
Markup hinzufügen
Fügen Sie Ihr HTML in den Editor ein oder legen Sie Ihre .html-Dateien im Upload-Tab ab. Beide Wege erledigen dieselbe Arbeit.
- 2
Wählen, was wegfällt
Kommentare fallen standardmäßig weg, bedingte Kommentare bleiben. Außerdem entscheiden Sie, ob Leerraum zusammengefasst und Attribute aufgeräumt werden.
- 3
Minifizieren drücken
Das Tool geht jedes Zeichen durch, schreibt die Seite neu und liest dann seine eigene Antwort erneut, bevor es Ihnen etwas zeigt.
- 4
Kopieren oder herunterladen
Nehmen Sie das Ergebnis als Text oder speichern Sie es als .min.html-Datei. Dabei bleibt Ihr Original genau so, wie Sie es verlassen haben.
Ein HTML-Minifier, der Ihre Leerzeichen respektiert
Eine kaputte Seite kündigt sich selten an. Sie wird einfach leicht falsch dargestellt, und niemand merkt, welches Tool schuld war.
Es unterscheidet Inline und Block
Eine Lücke neben einem span oder einem Link wird zu einem Leerzeichen, weil ein Leser sie sieht. Eine Lücke neben einem div verschwindet, weil dort nichts dargestellt wird.
Rohe Blöcke bleiben exakt
Was in pre, textarea, script, style oder code steht, kommt Byte für Byte heraus, samt Zeilenumbrüchen.
Es prüft jeden Durchlauf
Das Tool liest seine eigene Ausgabe erneut und vergleicht jedes Tag, jedes Attribut und jedes Wort mit Ihrem Original. Eine Abweichung wird gemeldet, nie versteckt.
Bedingte Kommentare bleiben
Ein bedingter IE-Kommentar ist Markup im Kommentarkostüm. Deshalb bleibt er, außer Sie sagen etwas anderes.
Nichts verlässt Ihren Tab
Ihr Markup reist nirgendwohin. Es gibt keine Anfrage, keinen Speicher und kein Protokoll, deshalb können Sie Kundenarbeit hier sicher einfügen.
Es zeigt die echte Zahl
Sie sehen die gzip-Größe neben der Rohgröße, denn gzip ist das, was tatsächlich bei Ihrem Besucher ankommt.
Das Beste aus diesem HTML-Kompressor herausholen
Ein paar kleine Gewohnheiten halten eine minifizierte Seite berechenbar.
- Das Original behalten. Bearbeiten Sie immer die lesbare Datei. So bleibt die minifizierte Kopie etwas, das Sie erzeugen, nie etwas, das Sie pflegen.
- Zuletzt minifizieren. Führen Sie es nach Ihrer Template-Engine und nach Ihren Tests aus. Sonst testen Sie eine Seite und liefern eine andere aus.
- Einen Satz mit Links prüfen. Sehen Sie sich einen Absatz mit Links an. Haben die Wörter noch ihre Lücken, haben die Leerzeichenregeln ihre Arbeit getan.
- Mit gzip ausliefern. Minifizieren und Komprimieren addieren sich. Dadurch liegt die Übertragungsgröße deutlich unter der Dateigröße auf der Festplatte.
- Bedingte Kommentare in Ruhe lassen. Sofern Sie nicht wissen, dass nichts davon abhängt, lassen Sie diesen Schalter an. Sie kosten fast nichts.
- Auf das Prüfsiegel achten. Meldet ein Durchlauf, dass er nicht prüfen konnte, liefern Sie diese Datei nicht aus. Schicken Sie uns stattdessen den Fall und behalten Sie Ihr Original.
Fehler, die eine minifizierte Seite zerstören
Fast jede Geschichte à la „jetzt sieht es falsch aus“ ist einer dieser drei Fälle.
Inline-Lücken zusammenquetschen
Ein Tool, das jedes Leerzeichen entfernt, zieht Ihre Wörter zusammen. Die Seite ist weiterhin valide und liest sich trotzdem falsch.
pre-Blöcke plattmachen
Codebeispiele und ASCII-Layouts hängen an ihren Zeilenumbrüchen. Fallen diese weg, wird das Beispiel zu einer langen Zeile.
Die minifizierte Datei bearbeiten
Ihre Änderungen verschwinden beim nächsten Build. Die Korrektur gehört also immer in die Quellvorlage.
Häufige Fragen zum HTML-Minifier
Verändert dieses Tool, wie meine Seite aussieht, wenn ich HTML minifiziere?
Das sollte es nicht, und es prüft das, statt es anzunehmen. Das Tool behält die Leerzeichen, die zwischen Inline-Elementen sichtbar sind, entfernt nur die unsichtbaren und liest danach seine eigene Ausgabe erneut, um zu bestätigen, dass jedes Tag und jedes Wort erhalten blieb.
Was passiert mit meinen script- und pre-Blöcken?
Sie kommen Byte für Byte heraus, Zeilenumbrüche inklusive. Das zählt doppelt: Ein Leerzeichen in einem pre-Block ist sichtbare Ausgabe, und ein Zeilenumbruch in einem Skript kann eine Anweisung beenden.
Wie viel kleiner wird meine Seite?
Lesbares Markup schrumpft meist um 15 bis 30 Prozent, und das Tool zeigt den genauen Wert für Ihre Datei. Eine von einem Bundler erzeugte Seite ist jedoch oft schon kompakt, also spart sie viel weniger.
Entfernt es meine bedingten IE-Kommentare?
Ausschließlich auf Ihren Wunsch. Sie sehen wie Kommentare aus, verhalten sich aber wie Markup, deshalb behält das Tool sie standardmäßig und gibt Ihnen einen Schalter für den Fall, dass Sie sicher sind, dass nichts sie braucht.
Landet mein HTML auf einem Server?
Nein. Der ganze Minifier läuft in Ihrem Browser-Tab. Es gibt keine Anfrage, keinen Speicher und kein Protokoll, deshalb können Sie auch vertrauliche Arbeit gefahrlos einfügen.
Kann ich mehrere Dateien auf einmal minifizieren?
Ja. Öffnen Sie den Upload-Tab und legen Sie beliebig viele .html- oder .htm-Dateien ab. Das Tool minifiziert jede einzeln, und Sie können sie nacheinander herunterladen.
Weitere Tools, die Sie sofort nutzen können
Jedes davon läuft in Ihrem Browser und verlangt nichts.
CSS minifizieren
Verkleinern Sie ein Stylesheet, ohne calc() oder Ihre Selektoren zu beschädigen.
Tool öffnen →JavaScript minifizieren
Verkleinern Sie ein Skript, mit derselben Prüfung, dass das Ergebnis noch zu Ihrem Code passt.
Tool öffnen →Bildgrößen-Finder
Lesen Sie echte Abmessungen, Gewicht und Format aller Bilder auf einmal.
Tool öffnen →
Verkleinern Sie Ihre nächste Seite in Sekunden
Markup einfügen, eine Schaltfläche drücken und die Ersparnis selbst prüfen. Nichts reist irgendwohin, und nichts bleibt gespeichert.