Im Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts werden alle Stylesheets mit nicht verwendetem CSS aufgeführt, mit denen Sie mindestens 2 KiB einsparen können. Entfernen Sie nicht verwendetes CSS, um unnötigen Datenverbrauch durch Netzwerkaktivität zu vermeiden:
Wie nicht verwendetes CSS die Leistung beeinträchtigt
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 main.css-Datei, die der Browser herunterlädt, wird als externes Stylesheet bezeichnet, da sie getrennt von dem HTML-Code gespeichert wird, in dem sie verwendet wird.
Standardmäßig muss ein Browser alle gefundenen externen Stylesheets herunterladen, parsen und verarbeiten, bevor Inhalte auf dem Bildschirm eines Nutzers angezeigt oder gerendert werden können. Es ist nicht sinnvoll, wenn ein Browser Inhalte anzeigt, bevor die Stylesheets verarbeitet wurden, da die Stylesheets möglicherweise Regeln enthalten, die sich auf den Stil der Seite auswirken.
Jedes externe Stylesheet muss aus dem Netzwerk heruntergeladen werden. Diese zusätzlichen Netzwerkzugriffe können dazu führen, dass Nutzer erheblich länger warten müssen, bis Inhalte auf dem Bildschirm zu sehen sind.
Nicht verwendetes CSS verlangsamt außerdem die Erstellung des Renderbaums durch den Browser. Die Rendering-Struktur ähnelt der DOM-Baumstruktur, mit der Ausnahme, dass sie auch die Stile für die einzelnen Knoten enthält. Zum Erstellen der Rendering-Struktur muss ein Browser den gesamten DOM-Baum durchlaufen und überprüfen, welche CSS-Regeln für die einzelnen Knoten gelten. Je mehr ungenutztes CSS vorhanden ist, desto mehr Zeit benötigt ein Browser möglicherweise, um die Stile für jeden Knoten zu berechnen.
Nicht verwendete CSS erkennen
Auf dem Tab „Abdeckung“ der Chrome-Entwicklertools können Sie kritische und unkritische CSS finden. Weitere Informationen finden Sie unter Verwendetes und nicht verwendetes CSS auf dem Tab „Abdeckung“ ansehen.
Kritisches CSS inline einbinden und nicht kritisches CSS aufschieben
Ähnlich wie beim Einfügen von Code in ein <script>-Tag können Sie wichtige Stile, die für die erste Darstellung erforderlich sind, in einen <style>-Block an der head der HTML-Seite einfügen.
Laden Sie dann den Rest der Stile asynchron über den Link preload.
Mit dem Critical-Tool können Sie das Extrahieren und Einfügen von CSS für den Bereich „Above the Fold“ automatisieren.
Weitere Informationen finden Sie unter Nicht kritisches CSS verschieben.
Stack-spezifische Anleitung
Drupal
Sie können ungenutzte CSS-Regeln entfernen und nur die benötigten Drupal-Bibliotheken zu relevanten Seiten oder Seitenkomponenten hinzufügen. Weitere Informationen finden Sie in der Drupal-Dokumentation.
Wenn Sie die angehängten Bibliotheken ermitteln möchten, über die irrelevantes CSS hinzugefügt wird, können Sie das Prüftool zur Codeabdeckung in den Chrome-Entwicklertools verwenden. Wenn die CSS-Aggregation auf Ihrer Drupal-Website deaktiviert ist, können Sie das entsprechende Design oder Modul anhand der URL des Stylesheets erkennen.
Suchen Sie nach Designs und Modulen mit mehreren Stylesheets, bei denen im Prüftool zur Codeabdeckung viel nicht verwendeter Code (markiert in Rot) angezeigt wird. Mit Designs und Modulen sollte nur dann eine Stylesheet-Bibliothek verknüpft werden, wenn sie auch tatsächlich auf der Seite verwendet wird.
Joomla
Reduzieren Sie die Anzahl der Joomla-Erweiterungen, über die nicht verwendetes CSS auf Ihre Seite geladen wird, oder wechseln Sie diese.
WordPress
Prüfen Sie, ob Sie WordPress-Plug-ins, über die nicht verwendete CSS auf Ihre Seite geladen werden, entfernen oder durch alternative Plug-ins ersetzen können.