CSS und JavaScript minimieren

Lighthouse meldet JavaScript minimieren und CSS minimieren, wenn eine Seite Dateien ausliefert, die noch Leerzeichen, Zeilenumbrüche, Kommentare und lange Variablennamen enthalten, die nur für Entwickler eine Bedeutung haben. Die Minimierung entfernt all das, ohne das Verhalten des Codes zu ändern. Für sich genommen ist der Gewinn überschaubar, meist kleiner als bei der Komprimierung oder beim Entfernen ungenutzten Codes. Aber die Maßnahme ist billig, sie addiert sich zu jeder anderen Optimierung, und eine unminimierte Datei in Produktion ist ein zuverlässiges Zeichen dafür, dass die Build-Pipeline nicht tut, was sie soll.

Aus den Messungen von PerfDelta: Lighthouse meldet diesen Befund auf 14 % von 4.108 gemessenen Startseiten. Die geschätzte Einsparung liegt im Median bei 275 ms. Mehr dazu im Datenblock unten.

Was die Befunde prüfen

Für jede JavaScript- und CSS-Datei der Seite schätzt Lighthouse, wie viel kleiner sie nach der Minimierung wäre. Dateien mit einer Ersparnis von mindestens zehn Prozent oberhalb einer kleinen absoluten Grenze erscheinen in der Liste, jeweils mit der geschätzten Einsparung in Bytes. Geprüft wird die übertragene Quelle, deshalb taucht eine Datei, die komprimiert, aber nicht minimiert ist, trotzdem auf: Minimierung und Komprimierung beseitigen unterschiedliche Arten von Redundanz.

Minimierung und Komprimierung sind zwei Schritte

Komprimierung (Brotli oder Gzip) findet wiederholte Bytefolgen und kodiert sie kompakter, was Leerzeichen und Kommentare schon stark eindampft. Die Minimierung entfernt sie ganz und kürzt zusätzlich Bezeichner, fasst Konstanten zusammen und streicht tote Zweige, was keine Komprimierung leisten kann. Beides ergänzt sich: Eine minimierte Datei komprimiert zu einem kleineren Ergebnis als das unminimierte Original. Betrachten Sie die Textkomprimierung als ersten und die Minimierung als zweiten Schritt; beide gehören in jeden Produktions-Build.

So minimieren Sie JavaScript und CSS

1. Das Build-Werkzeug erledigt es

Jeder moderne Bundler minimiert im Produktionsmodus: Vite und Rollup über esbuild oder Terser, webpack über Terser und das CSS-Minimizer-Plugin, Parcel von Haus aus. Next.js, Nuxt, Astro und SvelteKit liefern aus ihren Produktions-Builds minimierte Dateien ohne weitere Konfiguration. Listet der Befund Dateien aus Ihrem eigenen Build, sind die üblichen Ursachen ein versehentlich ausgerollter Entwicklungs-Build, ein NODE_ENV, das nicht auf production steht, oder eine Datei, die am Bundler vorbei in einen statischen Ordner kopiert wurde.

# Vite: minimiert standardmäßig
vite build

# webpack: der Produktionsmodus aktiviert Terser
webpack --mode production

2. Am CDN oder Server minimieren

Cloudflare, Fastly und mehrere Hosting-Plattformen können JavaScript und CSS beim Ausliefern minimieren. Für Dateien, die Sie nicht kontrollieren, ist das ein brauchbarer Rückfall. Es ist aber riskanter als die Minimierung beim Build: Ein Minimierer im Anfragepfad kann keine Tests laufen lassen, und ein seltener Syntax-Sonderfall bricht die Live-Seite statt den Build. Nutzen Sie für eigenen Code den Build-Schritt und die CDN-Minimierung für den Rest.

3. WordPress, Shopify und andere Plattformen

• WordPress: Der Kern und gepflegte Plugins liefern minimierte Dateien. Der Befund zeigt meist auf ein Theme oder Plugin mit unminimiertem Build oder auf Inline-Skripte eines Page Builders. Caching-Plugins bieten Minimierungsoptionen; aktivieren Sie zuerst CSS, testen Sie, dann JavaScript, denn das Zusammenfassen und Minimieren von Skripten kann die Ausführungsreihenfolge ändern.
• Shopify: Theme-Dateien minimiert die Plattform. Befunde stammen hier fast immer von Apps, die eigene Skripte einfügen; die Lösung ist, die App zu entfernen oder den Anbieter anzusprechen.
• Baukästen (Wix, Squarespace, Webflow): Die Plattform minimiert ihren eigenen Code. Verbleibende Befunde zeigen auf eigene Code-Blöcke oder Einbettungen.

4. Auch Inline-Code kurz halten

Inline-Blöcke mit <script> und <style> im HTML gehören zum Dokument und fallen unter die HTML-Minimierung, nicht unter diesen Befund, vergrößern aber das Dokument. Halten Sie Inline-Code kurz, lagern Sie alles ab wenigen Kilobyte in eine cachebare externe Datei aus und lassen Sie die Template-Engine in Produktion HTML-Leerraum entfernen.

5. Source Maps aus dem Produktions-Bundle fernhalten

Source Maps helfen beim Debuggen, dürfen aber nicht in Produktionsdateien eingebettet sein, wo sie die Dateigröße vervielfachen. Geben Sie sie als separate .map-Dateien aus, die nur Entwicklerwerkzeuge anfordern, oder laden Sie sie in Ihr Fehler-Tracking statt auf den öffentlichen Server.

Was die Minimierung bringt

Bei einem typischen minimierten und komprimierten Bundle liegt der Anteil der Minimierung an der Ersparnis zwischen wenigen Prozent und einigen zehn Prozent der unkomprimierten Größe, je nachdem, wie ausführlich die Quelle ist. Es ist selten die Maßnahme, die einen gescheiterten LCP in einen bestandenen verwandelt. Die Befunde, die die Core Web Vitals bewegen, sind nicht verwendetes JavaScript, renderblockierende Ressourcen und die Ausführungszeit. Die Minimierung ist der Hygieneschritt, der diese Gewinne etwas größer macht und zeigt, dass die Pipeline sauber läuft.

Häufige Fragen

Kann die Minimierung meine Website kaputt machen?

Minimierung beim Build mit einem aktuellen Werkzeug ist für normales JavaScript und CSS sicher. Probleme entstehen bei Code, der zur Laufzeit auf Funktionsnamen angewiesen ist, bei sehr alter Syntax oder bei Minimierern im Anfragepfad, die Dateien in anderer Reihenfolge zusammenfassen. Testen Sie nach dem Aktivieren, besonders bei WordPress, wo Plugin-Optionen Dateien zusätzlich kombinieren.

Warum meldet Lighthouse eine Datei, die bereits minimiert ist?

Manche minimierten Dateien enthalten noch Lizenzkommentare, eingebettete Source Maps oder große eingebettete Daten. Sehen Sie sich die Datei im Browser an: Besteht sie aus einer einzigen langen Zeile und ist trotzdem groß, liegt es am Inhalt, nicht an der Formatierung, und der passende Befund ist nicht verwendetes JavaScript.

Soll ich Dateien zusätzlich zusammenfassen?

Mit HTTP/2 und HTTP/3 bringt das Zusammenfassen vieler Dateien zu einer nicht mehr, was es unter HTTP/1.1 brachte, und es kann das Caching verschlechtern. Minimieren Sie jede Datei, fassen Sie aber nur zusammen, wo ein Build-Werkzeug die Abhängigkeiten sauber auflöst.

Zählt die HTML-Minimierung auch?

Lighthouse prüft sie nicht gesondert, aber ein kleineres Dokument kommt früher an und hilft dem First Contentful Paint. Die meisten Template-Engines und Generatoren für statische Seiten können in Produktion Leerraum entfernen.