CSS reduzieren

Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts werden alle nicht reduzierten CSS-Dateien zusammen mit den potenziellen Einsparungen in Kibibyte (KiB) aufgeführt, wenn diese Dateien reduziert werden:

Screenshot der CSS-Prüfung mit Lighthouse Minify

Leistungssteigerung durch das Reduzieren von CSS-Dateien

Durch das Reduzieren von CSS-Dateien lässt sich die Leistung beim Laden der Seite verbessern. CSS-Dateien sind oft größer, als sie sein müssen. Beispiel:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Kann reduziert werden auf:

h1,
h2 {
  background-color: #000000;
}

Aus Browserperspektive sind diese beiden Codebeispiele äquivalent, das zweite Beispiel verwendet jedoch weniger Byte. Reduzierer können die Byte-Effizienz weiter verbessern, indem sie Leerräume entfernen:

h1,
h2 {
  background-color: #000000;
}

Einige Minifier nutzen clevere Tricks, um die Bytes zu minimieren. Beispielsweise kann der Farbwert #000000 weiter auf #000 reduziert werden, was die Kurzschreibweise ist.

Lighthouse bietet eine Schätzung der potenziellen Einsparungen basierend auf den Kommentaren und Leerzeichen, die in Ihrem CSS gefunden werden. Dies ist eine konservative Schätzung. Wie bereits erwähnt, können Reduzierer intelligente Optimierungen vornehmen (z. B. #000000 auf #000 reduzieren), um die Dateigröße weiter zu reduzieren. Bei Verwendung eines Komprimierungsprogramms sind die Einsparungen also möglicherweise höher als die, die in Lighthouse gemeldet werden.

CSS-Minifier verwenden, um CSS-Code zu komprimieren

Bei kleinen Websites, die Sie nicht oft aktualisieren, können Sie wahrscheinlich einen Onlinedienst verwenden, um Ihre Dateien manuell zu reduzieren. Sie fügen Ihren CSS-Code in die Benutzeroberfläche des Dienstes ein und es wird eine reduzierte Version des Codes zurückgegeben.

Professionelle Entwickler sollten vielleicht einen automatisierten Workflow einrichten, der den CSS-Code automatisch komprimiert, bevor Sie den aktualisierten Code bereitstellen. Dazu verwenden Sie normalerweise Build-Tools wie Gulp oder Webpack.

Weitere Informationen zum Reduzieren von CSS-Code finden Sie unter CSS reduzieren.

Stackspezifische Anleitung

Drupal

Aktivieren Sie unter Administration > Konfiguration > Entwicklung die Option CSS-Dateien aggregieren. Sie können auch erweiterte Aggregationsoptionen über zusätzliche Module konfigurieren, um Ihre Website durch Verkettung, Komprimierung und Komprimierung Ihrer CSS-Stile zu beschleunigen.

Joomla

Ihre Website lässt sich mit einer Reihe von Joomla-Erweiterungen beschleunigen, durch die Ihre CSS-Stile verkettet und komprimiert werden. Es gibt auch Vorlagen, die diese Funktion bieten.

Magento

Aktivieren Sie in den Entwicklereinstellungen Ihres Shops die Option CSS-Dateien reduzieren.

React

Wenn Ihr Build-System CSS-Dateien automatisch komprimiert, achten Sie darauf, dass Sie den Produktions-Build der Anwendung bereitstellen. Das können Sie mit der Erweiterung „React Developer Tools“ prüfen.

WordPress

Ihre Website lässt sich mit einer Reihe von WordPress-Plug-ins beschleunigen, durch die Ihre Stile verkettet und komprimiert werden. Wenn möglich, können Sie diese Komprimierung auch im Voraus über einen Build-Prozess vornehmen.

Ressourcen