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](https://developer.chrome.com/static/docs/lighthouse/performance/unminified-css/image/a-screenshot-the-lightho-9935f05e8c4cd.png?authuser=6&hl=de)
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.