Minifizierung (englisch Minification) entfernt aus Quelltext wie HTML, CSS und JavaScript alles, was für die Ausführung nicht nötig ist, etwa Leerzeichen, Zeilenumbrüche und Kommentare. Die Datei wird kleiner und lädt schneller, die Funktion bleibt gleich. Google beschreibt Minifizierung als Entfernen unnötiger oder redundanter Daten, ohne zu verändern, wie die Ressource verarbeitet wird.
Minifizierung und Kompression
Beide Verfahren verkleinern Dateien, greifen aber an unterschiedlichen Stellen an. Die Minifizierung arbeitet am Quelltext, bevor er ausgeliefert wird, und entfernt Kommentare und Leerzeichen oder fasst überflüssige CSS-Regeln zusammen. Die Kompression mit gzip oder Brotli läuft bei der Übertragung und sucht nach wiederkehrenden Mustern. Laut web.dev addieren sich die Effekte, und Brotli ist nach Möglichkeit gzip vorzuziehen. Bei sehr kleinen Dateien kann die Kompression die Datei sogar vergrößern. Server erlauben deshalb laut web.dev eine Mindestgröße, die typischerweise unter vier oder fünf Kilobyte liegt.
Umsetzung
In der Praxis übernehmen Build-Werkzeuge wie Webpack oder Gulp die Minifizierung beim Veröffentlichen. Die Lighthouse-Diagnose „Minify CSS“ listet CSS-Dateien auf, die nicht minimiert sind, und schätzt die mögliche Einsparung in KiB. Für JavaScript gibt es die entsprechende Diagnose „Minify JavaScript“. Die Prüfung ist laut Dokumentation konservativ und erkennt vor allem Kommentare und Leerzeichen. In vielen Content-Management-Systemen gibt es dafür Einstellungen oder Plugins.
Beispiel
Vor der Minifizierung:
/* Button */
.button {
color: #ffffff;
background: #0a2540;
}
Danach:
.button{color:#fff;background:#0a2540}
Häufige Fehler
- Nur die Originaldatei ausliefern und die Minifizierung auslassen.
- Die Originaldateien überschreiben und keine Quelle behalten. Minifizierter Code ist schwer zu lesen. Laut Berichten aus der Praxis bleiben deshalb Quelldateien und Source Maps im Repository.
- Minifizierung mit Kompression gleichsetzen und eine von beiden weglassen.
Häufige Fragen
Was ist der Unterschied zwischen Minifizierung und Kompression? Die Minifizierung verändert den Quelltext selbst, die Kompression kodiert die Datei für die Übertragung.
Muss ich von Hand minifizieren? Für kleine Websites genügt ein Online-Werkzeug. Größere Projekte automatisieren das im Build.
Quellen
- Minify Resources – Google PageSpeed Insights Docs (veraltete API v4, nur Definition)developers.google.com
- Reduce network payloads using text compression – web.devweb.dev
- Minify CSS – Lighthouse, Chrome for Developersdeveloper.chrome.com
- Minify JavaScript – Lighthouse, Chrome for Developersdeveloper.chrome.com
Stand: