Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts finden Sie alle nicht komprimierten CSS-Dateien, sowie die potenziellen Einsparungen in Kibibyte (KiB) wenn diese Dateien minimiert werden:
Wie kann die Komprimierung von CSS-Dateien die Leistung verbessern?
Durch die Komprimierung von CSS-Dateien können Sie die Ladeleistung Ihrer Seite verbessern. CSS-Dateien sind oft größer als nötig. 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 Sicht des Browsers Funktional äquivalent sind diese beiden Codebeispiele, aber im zweiten Beispiel werden weniger Byte benötigt. Minifier können die Byteeffizienz weiter verbessern, indem sie Leerzeichen entfernen:
h1,
h2 {
background-color: #000000;
}
Einige Minifier nutzen clevere Tricks, um die Bytes zu minimieren.
Zum Beispiel kann der Farbwert #000000 weiter auf #000 reduziert werden.
was die Kurzform des Äquivalents ist.
Lighthouse bietet eine Schätzung
der potenziellen Einsparungen,
für die Kommentare und Leerzeichen
ein, die im CSS gefunden wurden.
Dies ist eine konservative Schätzung.
Wie bereits erwähnt,
Minifier können clevere Optimierungen durchführen (z. B. #000000 auf #000 reduzieren)
um die Dateigröße weiter zu verringern.
Wenn Sie also einen Minifier verwenden,
sind die Einsparungen eventuell höher als in den Berichten von Lighthouse.
CSS-Code komprimieren (CSS reduzieren)
Bei kleinen Websites, die Sie nicht oft aktualisieren, können Sie Ihre Dateien wahrscheinlich mit einem Onlinedienst manuell reduzieren. Sie fügen den CSS-Code in die Benutzeroberfläche des Dienstes ein und erhalten eine reduzierte Version des Codes.
Für professionelle Entwickler: möchten Sie wahrscheinlich einen automatisierten Workflow einrichten, der Ihre Preisvergleichsportale automatisch komprimiert. bevor Sie den aktualisierten Code bereitstellen. Dies geschieht in der Regel mit einem Build-Tool wie Gulp oder Webpack.
Informationen zum Komprimieren von CSS-Code finden Sie unter CSS-Code reduzieren.
Stack-spezifische Anleitung
Drupal
Aktivieren Sie das Aggregieren von CSS-Dateien unter Verwaltung > Konfiguration > Entwicklung. Sie können auch erweiterte Aggregationsoptionen konfigurieren durch zusätzliche Module um Ihre Website zu beschleunigen, indem Sie Ihre CSS-Dateien verketten und komprimieren. Stile.
Joomla
Eine Reihe von Joomla-Erweiterungen können Sie Ihre Website beschleunigen, indem Sie Ihr CSS verketten, reduzieren und komprimieren. Stile. Es gibt auch Vorlagen, die diese Funktion bieten.
Magento
Aktivieren Sie die Option CSS-Dateien reduzieren. in den Entwicklereinstellungen Ihres Shops.
React
Wenn Ihr Build-System CSS-Dateien automatisch komprimiert, achten Sie darauf, dass Sie Bereitstellen des Produktions-Builds Ihrer Anwendung. Sie können dies mit den React-Entwicklertools prüfen .
WordPress
Eine Reihe von WordPress-Plug-ins können Ihre durch Verketten, Reduzieren und Komprimieren der Stile. Vielleicht möchten Sie auch um diese Reduzierung möglichst im Voraus über einen Build-Prozess vorzunehmen.