CSS reduzieren

CSS-Dateien können unnötige Zeichen wie Kommentare, Leerzeichen und Einzüge enthalten. In der Produktion können diese Zeichen bedenkenlos entfernt werden, um die Dateigröße zu reduzieren, ohne die Verarbeitung der Stile durch den Browser zu beeinträchtigen. Diese Technik wird als Minifikation bezeichnet.

Nicht reduzierter CSS-Code laden

Sehen Sie sich den folgenden CSS-Block an:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Dieser Inhalt ist leicht zu lesen, allerdings entsteht dadurch eine größere Datei als nötig:

• Es werden Leerzeichen zum Einrücken verwendet und Kommentare enthalten, die vom Browser ignoriert werden, sodass sie entfernt werden können.
• Die Elemente <h1> und <h2> haben dieselben Stile. Anstatt sie separat zu deklarieren, können sie als „h1 {...} h2 {...}“ als „h1, h2{...}“ ausgedrückt werden.
• Die background-color #000000 kann nur als #000 ausgedrückt werden.

Nach diesen Änderungen erhalten Sie eine kompaktere Version derselben Stile:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Vermutlich möchten Sie kein CSS so schreiben. Stattdessen können Sie CSS wie gewohnt schreiben und Ihrem Build-Prozess einen Komprimierungsschritt hinzufügen. In diesem Leitfaden erfahren Sie, wie Sie dies mit dem beliebten Build-Tool webpack tun.

Messen

Die CSS-Komprimierung wird auf eine Website angewendet, die bereits in anderen Anleitungen verwendet wurde: Fav Kitties. In dieser Version der Website wird die praktische CSS-Bibliothek animate.css verwendet, um verschiedene Seitenelemente zu animieren, wenn ein Nutzer für eine Katze abstimmt.

Als Erstes sollten Sie wissen, welche Optimierungsmöglichkeiten sich nach der Komprimierung dieser Datei ergeben:

1. Öffnen Sie die Seite „Messung“.
2. Geben Sie die URL https://fav-kitties-animated.glitch.me ein und klicken Sie auf Audit ausführen.
3. Klicken Sie auf Bericht ansehen.
4. Klicken Sie auf Leistung und rufen Sie den Bereich Empfehlungen auf.

Im erstellten Bericht können bis zu 16 KB aus der Datei animate.css gespeichert werden:

Sehen Sie sich nun den Inhalt des CSS-Codes an:

1. Öffnen Sie in Chrome die Fav Kitties-Website. (Es kann eine Weile dauern, bis die Glitch-Server beim ersten Mal antworten.)
2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf dem Mac), um die Entwicklertools zu öffnen.
3. Klicken Sie auf den Tab Netzwerk.
4. Klicken Sie auf den Filter CSS.
5. Klicken Sie das Kästchen Cache deaktivieren an.
6. Aktualisieren Sie die App.

Die Seite fordert zwei CSS-Dateien mit einer Größe von 1,9 KB und 76,2 KB an.

1. Klicken Sie auf animate.css.
2. Klicken Sie auf den Tab Antwort, um den Dateiinhalt zu sehen.

Beachten Sie, dass das Stylesheet Zeichen für Leerzeichen und Einzüge enthält:

Als Nächstes fügen Sie Ihrem Erstellungsprozess einige Webpack-Plug-ins hinzu, um diese Dateien zu reduzieren.

CSS-Komprimierung mit Webpack

Bevor Sie sich mit den Optimierungen befassen, sollten Sie sich etwas Zeit nehmen, um zu verstehen, wie der Erstellungsprozess für die Fav Kitties-Website funktioniert:

Standardmäßig enthält das von Webpack erstellte JS-Bundle den Inhalt der CSS-Dateien inline. Da wir separate CSS-Dateien verwalten möchten, verwenden wir zwei komplementäre Plug-ins:

• mini-css-extract-plugin extrahiert jedes Stylesheet im Rahmen des Build-Prozesses in eine eigene Datei.
• webpack-fix-style-only-entries wird verwendet, um ein Problem in wepback 4 zu beheben, um zu vermeiden, dass für jede in webpack-config.js aufgeführte CSS-Datei eine zusätzliche JS-Datei generiert wird.

Jetzt nehmen Sie einige Änderungen am Projekt vor:

1. Öffne das Fav Kitties-Projekt in Glitch.
2. Um die Quelle aufzurufen, drücken Sie Quelle anzeigen.
3. Klicke auf Zum Bearbeiten bearbeiten, damit das Projekt bearbeitet werden kann.
4. Klicken Sie auf Terminal. Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Fullscreen“ (Vollbild) verwenden.

Verwenden Sie das optimize-css-assets-webpack-plugin, um die resultierende CSS-Datei zu komprimieren:

1. Führe in der Glitch-Konsole npm install --save-dev optimize-css-assets-webpack-plugin aus.
2. Führe refresh aus, damit die Änderungen mit dem Glitch-Editor synchronisiert werden.

Kehren Sie anschließend zum Glitch-Editor zurück, öffnen Sie die Datei webpack.config.js und nehmen Sie die folgenden Änderungen vor:

Laden Sie das Modul am Anfang der Datei: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Übergeben Sie dann eine Instanz des Plug-ins an das plugins-Array: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Nachdem Sie die Änderungen vorgenommen haben, wird eine Neuerstellung des Projekts ausgelöst. So sieht die resultierende webpack.config.js aus:

Als Nächstes überprüfen Sie das Ergebnis dieser Optimierung mit Leistungstools.

Bestätigen

• Wenn Sie eine Vorschau der Website aufrufen möchten, klicken Sie auf View App (App anzeigen) und dann auf Fullscreen (Vollbild) .

Wenn Sie bei einem vorherigen Schritt verloren gegangen sind, können Sie hier klicken, um eine optimierte Version der Website zu öffnen.

So überprüfen Sie die Größe und den Inhalt der Dateien:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf dem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.
3. Klicken Sie auf den Filter CSS.
4. Klicken Sie das Kästchen Cache deaktivieren an, falls noch nicht geschehen.
5. Aktualisieren Sie die App.

Sie können diese Dateien überprüfen und feststellen, dass die neuen Versionen keine Leerzeichen enthalten. Beide Dateien sind viel kleiner. Insbesondere animate.css wurde auf ~26% reduziert, wodurch ~20 KB eingespart werden.

Abschließender Schritt:

1. Öffnen Sie die Seite „Messung“.
2. Geben Sie die URL der optimierten Website ein.
3. Klicken Sie auf Bericht ansehen.
4. Klicken Sie auf Leistung und wechseln Sie zum Bereich Empfehlungen.

Im Bericht wird „CSS reduzieren“ nicht mehr als „Empfehlung“ angezeigt. Der Bericht wurde in den Bereich „Bestandene Prüfungen“ verschoben:

Da CSS-Dateien Ressourcen sind, die das Rendering blockieren, werden Sie Verbesserungen bei Messwerten wie First Contentful Paint feststellen, wenn Sie die Reduzierung auf Websites mit großen CSS-Dateien anwenden.

Weitere Informationen und Ressourcen

In diesem Leitfaden wurde die CSS-Minification mit Webpack behandelt. Der gleiche Ansatz kann aber auch mit anderen Build-Tools wie gulp-clean-css für Gulp oder grunt-contrib-cssmin für Grunt verwendet werden.

Die Reduzierung kann auch auf andere Dateitypen angewendet werden. Im Leitfaden zum Reduzieren und Komprimieren von Netzwerknutzlasten erfahren Sie mehr über Tools zum Reduzieren von JS und einige komplementäre Techniken wie die Komprimierung.