Über das Tool: Code-Minifier & -Beautifier
Der Code-Minifier macht HTML-, CSS- und JavaScript-Dateien kleiner, damit Ihre Seiten schneller laden. Er funktioniert auch umgekehrt: Verschönern Sie minifizierten Code, um ihn zum Debuggen oder Lernen wieder lesbar zu machen.
So funktioniert es
Jede Sprache wird von einer spezialisierten, weit verbreiteten Engine verarbeitet:
- JavaScript → Terser. Entfernt Leerraum und Kommentare, kürzt lokale Variablennamen, entfernt unerreichbaren Code und vereinfacht Ausdrücke, ohne zu ändern, was der Code tut. Globale Namen bleiben erhalten, damit andere Skripte weiter funktionieren.
- CSS → CSSO. Neben dem Entfernen von Leerraum strukturiert es das Stylesheet um: Es fasst doppelte Regeln zusammen, kürzt Farben (
#ffffff→#fff) und entfernt überschriebene Deklarationen. - HTML. Kommentare und überflüssiger Leerraum werden entfernt, eingebettete
<script>- und<style>-Blöcke werden mit den obigen Engines minifiziert. Der Inhalt von<pre>und<textarea>bleibt exakt erhalten.
Verschönern nutzt js-beautify, um Einrückung und Zeilenumbrüche wiederherzustellen.
Warum minifizieren?
Kleinere Dateien werden schneller heruntergeladen und verarbeitet, besonders in Mobilfunknetzen. Das verbessert die Core Web Vitals und die PageSpeed-Werte, die sowohl die Nutzererfahrung als auch das Ranking beeinflussen. Minifizieren reduziert JavaScript und CSS vor der Komprimierung typischerweise um 30–60 % und wirkt zusätzlich zu gzip oder Brotli auf Ihrem Server.
Tipps
- Bewahren Sie Ihre originalen, lesbaren Quelldateien immer auf. Minifizieren Sie eine Kopie für die Produktion.
- Testen Sie die minifizierte Datei vor dem Deployment, besonders JavaScript, das von Funktions- oder Klassennamen abhängt.
- Verschönern Sie fremden oder minifizierten Code, um zu verstehen, was er tut, und ihn leichter zu durchsuchen.
- Ein Build-Tool (Vite, webpack, esbuild) kann automatisch minifizieren. Dieses Tool ist ideal für schnelle Einzeldateien.