CSS reduzieren

Demián Renzulli

CSS-Dateien können unnötige Zeichen wie Kommentare, Leerzeichen und Einzüge enthalten. In der Produktion können diese Zeichen sicher entfernt werden, um die Dateigröße zu verringern, ohne dass die Verarbeitung der Stile durch den Browser beeinflusst wird. Diese Technik wird als Minifizierung bezeichnet.

Nicht reduzierte CSS-Ressourcen werden geladen

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;
}

Diese Inhalte sind leicht zu lesen, allerdings ist die Datei größer als nötig:

• Sie verwendet Leerzeichen zu Einrückungszwecken und enthält Kommentare, die vom Browser ignoriert werden und daher entfernt werden können.
• Die Elemente <h1> und <h2> haben den gleichen Stil und werden nicht separat deklariert: „h1 {...} h2 {...}“ könnten sie als „h1, h2{...}“ ausgedrückt werden.
• Für background-color, #000000, könnte einfach nur #000 ausgedrückt werden.

Nachdem Sie diese Änderungen vorgenommen haben, 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}

Sie wollen CSS wahrscheinlich nicht so schreiben. Stattdessen können Sie CSS wie gewohnt schreiben und Ihrem Build-Prozess einen Reduzierungsschritt hinzufügen. In diesem Leitfaden erfahren Sie, wie Sie dazu ein beliebtes Build-Tool verwenden: webpack.

Messen

Sie wenden CSS-Reduzierung auf eine Website an, die in anderen Leitfäden verwendet wurde: Fav Kitties. In dieser Version der Website wird eine tolle CSS-Bibliothek verwendet: animate.css, mit denen verschiedene Seitenelemente animiert werden, wenn ein Nutzer für einen Speck stimmt.

Als Erstes müssen Sie wissen, welche Möglichkeiten sich nach dem Reduzieren dieser Datei bieten:

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 gehen Sie zum Bereich Empfehlungen.

Im Bericht sehen Sie, dass bis zu 16 KB aus der Datei animate.css gespeichert werden können:

Untersuchen Sie nun den Inhalt des CSS:

1. Öffnen Sie in Chrome die Fav Kitties-Website. Es kann eine Weile dauern, bis die Glitch-Server beim ersten Mal reagieren.
2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem 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.

Von der Seite werden zwei CSS-Dateien mit 1,9 KB bzw. 76,2 KB angefordert.

1. Klicken Sie auf animate.css.
2. Klicken Sie auf den Tab Response (Antwort), um den Dateiinhalt anzuzeigen.

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

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

CSS-Komprimierung mit Webpack

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

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

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

Sie werden jetzt einige Änderungen im Projekt vornehmen:

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

Sie verwenden das optimize-css-assets-webpack-plugin zum Reduzieren des resultierenden CSS-Codes:

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

Kehren Sie als Nächstes 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 das resultierende webpack.config.js aus:

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

Bestätigen

• Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

Wenn Sie sich bei einem der vorherigen Schritte nicht verlaufen haben, können Sie auf hier, um ein optimiertes Version der Website.

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

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem 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 sich diese Dateien ansehen und feststellen, dass die neuen Versionen keine Leerzeichen enthalten. Beide Dateien sind viel kleiner. Vor allem animate.css wurde um ~26% reduziert, wodurch ~20 KB eingespart werden konnten.

Als letzten 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 gehen Sie zum Bereich Empfehlungen.

Im Bericht wird die Option „CSS reduzieren“ nicht angezeigt. als „Opportunity“ und finden Sie jetzt unter „Bestandene Prüfungen“. Abschnitt:

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

Weitere Informationen und Ressourcen

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

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