Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts werden alle Stylesheets mit nicht verwendetem CSS-Code aufgeführt, die potenziell 2 KiB oder mehr einsparen können. Entfernen Sie die nicht verwendete CSS-Datei, um unnötige Byte durch Netzwerkaktivitäten zu reduzieren:
Wie nicht verwendetes CSS die Leistung verlangsamt
Die Verwendung eines <link>-Tags ist eine gängige Methode, um einer Seite Stile hinzuzufügen:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Die Datei main.css, die der Browser herunterlädt, wird als externes Stylesheet bezeichnet, da sie getrennt vom HTML-Code gespeichert wird, in dem sie verwendet wird.
Standardmäßig muss ein Browser alle erkannten externen Stylesheets herunterladen, parsen und verarbeiten, bevor er Inhalte auf dem Bildschirm eines Nutzers anzeigen oder rendern kann. Es macht keinen Sinn, dass ein Browser versucht, Inhalte anzuzeigen, bevor die Stylesheets verarbeitet wurden, da die Stylesheets Regeln enthalten können, die sich auf den Stil der Seite auswirken.
Jedes externe Stylesheet muss aus dem Netzwerk heruntergeladen werden. Dadurch kann es länger dauern, bis Nutzer Inhalte auf ihren Bildschirmen sehen.
Nicht verwendeter CSS-Code verlangsamt außerdem die Konstruktion der Rendering-Baumstruktur eines Browsers. Die Rendering-Struktur entspricht der DOM-Struktur, mit der Ausnahme, dass sie auch die Stile für jeden Knoten enthält. Um die Rendering-Struktur zu erstellen, muss ein Browser den gesamten DOM-Baum durchlaufen und prüfen, welche CSS-Regeln für jeden Knoten gelten. Je mehr nicht verwendeter CSS-Code vorhanden ist, desto mehr Zeit benötigt ein Browser möglicherweise für die Berechnung der Stile für jeden Knoten.
Nicht verwendete CSS erkennen
Auf dem Tab „Abdeckung“ in den Chrome-Entwicklertools können Sie wichtige und unkritische CSS entdecken. Weitere Informationen finden Sie unter Verwendete und nicht verwendete CSS auf dem Tab „Abdeckung“ ansehen.
Kritisches CSS inline einbinden und nicht kritisches CSS aufschieben
Ähnlich wie beim Einfügen von Code in einem <script>-Tag lassen sich wichtige Stile, die für die erste Painting-Funktion erforderlich sind, in einem <style>-Block beim head der HTML-Seite einbetten.
Laden Sie die restlichen Stile dann asynchron über den preload-Link.
Sie können das Extrahieren und Einfügen von „Above the Fold“-CSS mit dem kritischen Tool automatisieren.
Weitere Informationen finden Sie unter Nicht kritisches CSS aufschieben.
Stackspezifische Anleitung
Drupal
Entfernen Sie eventuell nicht verwendete CSS-Regeln. Fügen Sie nur die benötigten Drupal-Bibliotheken zu den relevanten Seiten oder Komponenten hinzu. Weitere Informationen finden Sie unter Bibliothek definieren.
Joomla
Sie können die Anzahl der Joomla-Erweiterungen, über die nicht verwendete CSS-Ressourcen auf Ihre Seite geladen werden, verringern oder durch andere Versionen ersetzen.
WordPress
Sie können die Anzahl der WordPress-Plug-ins, über die nicht verwendete CSS-Ressourcen auf Ihre Seite geladen werden, verringern oder durch andere Plug-ins ersetzen.