Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts finden Sie Alle Stylesheets mit nicht verwendetem CSS-Code mit potenziell Einsparungen von mindestens 2 KiB. Nicht verwendete CSS entfernen um unnötige Bytes zu reduzieren, die durch Netzwerkaktivitäten verbraucht werden:
Wie nicht verwendetes Preisvergleichsportal 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 Datei main.css, die der Browser herunterlädt, wird als externes Stylesheet bezeichnet.
da sie getrennt vom HTML-Code gespeichert werden, in dem sie verwendet werden.
Standardmäßig muss ein Browser alle externen Stylesheets herunterladen, parsen und verarbeiten. bevor sie Inhalte auf dem Bildschirm des Nutzers darstellen oder rendern können. Es ist nicht sinnvoll, wenn ein Browser versucht, Inhalte 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. Diese zusätzlichen Netzfahrten können die Nutzer warten müssen, bevor sie Inhalte auf ihren Bildschirmen sehen.
Nicht verwendete CSS verlangsamt auch die Konstruktion des Rendering-Baum. 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 CSS-Code verwendet wird, desto mehr Zeit muss ein Browser möglicherweise mit der Berechnung der Stile für jeden Knoten verbringen.
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 Preisvergleichsportal auf dem Tab „Abdeckung“.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Kritisches CSS inline einbinden und nicht kritisches CSS aufschieben
Ähnlich wie beim Einfügen von Code in ein <script>-Tag
Für den First Paint sind kritische Inline-Stile erforderlich.
innerhalb eines <style>-Blocks im head der HTML-Seite.
Laden Sie dann den Rest der Stile asynchron über den Link preload.
Sie können den Prozess zum Extrahieren und Einfügen von „Above the fold“ (ohne Scrollen sichtbar) automatisieren Preisvergleichsportal mit dem kritischen Tool.
Weitere Informationen finden Sie unter Nicht kritisches CSS zurückstellen.
Stack-spezifische Anleitung
Drupal
Entfernen Sie gegebenenfalls nicht verwendete CSS-Regeln. Nur die benötigten Drupal-Bibliotheken anhängen relevanten Seiten oder Komponenten einer Seite hinzufügen. Weitere Informationen finden Sie unter Bibliothek definieren. .
Joomla
Sie können die Anzahl der Joomla-Erweiterungen, über die nicht verwendetes CSS auf Ihre Seite geladen wird, reduzieren oder wechseln.
WordPress
Reduzieren oder wechseln Sie die Anzahl der WordPress-Plug-ins, über die nicht verwendete CSS auf Ihre Seite geladen werden.