Fix "Unutztes CSS entfernen" In Lighthouse.

Was ist Unutztes CSS?

Unutztes CSS besteht aus CSS-Deklarationen, die nirgendwo auf einer Webseite verwendet werden.
Es ist ganz normal, dass ein Teil des CSS nicht verwendet wird. Zum Beispiel, weil einige CSS-Deklarationen für ein anderes Gerät wie Desktop oder Handy geschrieben sind. Manchmal  weil ein Element, das im Stylesheet beschrieben wird (wie ein Button), auf dieser spezifischen Seite nicht verwendet wird.
Unutztes CSS tritt oft auf, wenn Sie ein Framework wie Bootstrap verwenden, bei dem standardmäßig viel mehr Elemente im CSS beschrieben sind, als Sie jemals verwenden werden. Oder wenn Sie Ihre Seite neu gestaltet haben, aber vergessen haben, die alten CSS-Elemente zu entfernen.

Warum ist unutztes CSS schlecht für PageSpeed?

CSS verlangsamt das Laden der Seite. Wenn eine Seite geladen wird, ruft der Browser zuerst das HTML von dieser Seite ab. Dieses HTML wird in DOM-Knoten umgewandelt. Danach ruft der Browser alle Stylesheets ab. Die Stile, die in diesen CSS-Dateien gefunden werden, werden ebenfalls in ein anderes Format umgewandelt, nämlich das CSSOM. Das DOM und das CSSOM werden in einem Render Tree kombiniert. Erst wenn dieser Render Tree erstellt wurde, beginnt ein Browser mit dem Painten des ersten Inhalts.
Aufgrund dieses Mechanismus werden CSS-Dateien immer das Rendern Ihrer Webseite blockieren. Wenn eine CSS-Datei größer ist, als sie sein sollte, dauert das Herunterladen dieser Datei länger und das verursacht die erste Verzögerung.  Wenn eine CSS-Datei unutztes CSS enthält, dauert es länger, den Render Tree zu erstellen. 

Wie finden Sie unutztes CSS manuell?

In Google Chrome können Sie unutztes CSS in der Code Coverage Übersicht sehen. Code Coverage ist Teil der Chrome DevTools. DevTools ist eine Reihe integrierter Tools, die in jedem Chrome-Browser verfügbar sind. 

Öffnen Sie zuerst die DevTools mit der Strg-Umschalt-J Tastenkombination. Tippen Sie dann Strg-Umschalt-P  um die Befehlspalette zu öffnen. Tippen Sie nun 'coverage'. Wählen Sie Coverage und laden Sie die Seite neu. Sie sehen nun eine Übersicht der CSS- und JavaScript-Dateien, die von der Seite geladen und verwendet werden. Außerdem können Sie sehen, wie groß die Dateien sind und wie viel des Codes tatsächlich verwendet wird.
Klicken Sie auf eine CSS-Datei, um zu sehen, welche CSS-Regeln auf der aktuellen Seite verwendet werden (grün) und welche nicht (rot). 

Wie beheben Sie die 'Unutztes CSS entfernen' Warnung

Es gibt mehrere Möglichkeiten, die Meldung 'Unutztes CSS entfernen' in Lighthouse zu beheben. Wenn es aus irgendeinem Grund nicht möglich ist, die Warnung zu beheben, könnten Sie die CSS-Auslieferung optimieren, um sicherzustellen, dass unutztes CSS weniger Einfluss auf die Ladezeit Ihrer Seite hat. Ich werde die Optionen, die Sie zum Beheben von unutztem CSS haben, unten kurz besprechen.

1. Entfernen Sie das unutzte CSS manuell

Der logischste und beste Weg, aber auch der aufwendigste Weg, ist natürlich das manuelle Entfernen des unutzten CSS. Die Schritte sind einfach:

1. Erstellen Sie ein Backup Ihrer Original-CSS-Dateien. Vielleicht entfernen Sie zu viel CSS.
2. Öffnen Sie den Code Coverage Tab in Google Chrome und sehen Sie pro CSS-Datei, welche Deklarationen Sie nicht benötigen.
3. Öffnen Sie die CSS-Datei auf dem Server (oder lokal) und überprüfen Sie jede unutzte CSS-Deklaration. Entscheiden Sie, ob diese entfernt werden kann. Aber seien Sie vorsichtig: eine unutzte CSS-Deklaration bedeutet nicht, dass Sie diese Deklaration nie benötigen werden. Das müssen Sie selbst beurteilen!
4. Überprüfen Sie pro CSS-Deklaration, ob diese im CSS nicht dupliziert ist. Doppeltes CSS wird auch als ungenutzt markiert. 
5. Überprüfen Sie jede CSS-Regel auf Shorthand-Methoden.  Ist es möglich, das CSS zu kürzen? Dann kürzen Sie es!

2. Teilen Sie das CSS in mehrere Dateien auf

Es gibt einen einfachen Weg  um schnell die Anzahl der CSS-Regeln zu reduzieren! Laden Sie nur die Stile, die Sie für Ihr Gerät benötigen. Ihre Seite wird oft mobil besucht. Sie müssen eigentlich nicht die Stile für Desktop und Druck für dieses mobile Gerät herunterladen. Das Nicht-Herunterladen dieser Stile spart Zeit und verkürzt somit die Critical Request Chain in Lighthouse.

Verwenden Sie hierfür das Media-Attribut. Das Media-Attribut sorgt dafür, dass ein Stylesheet nur verwendet wird, wenn das Media-Attribut mit dem Medium übereinstimmt, das Sie gerade verwenden.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. Verwenden Sie ein automatisches CSS-Clean-Up-Tool

Es gibt eine Reihe intelligenter Tools, die Ihre CSS-Dateien automatisch für Sie bereinigen und alle ungenutzten CSS-Referenzen entfernen können.
Obwohl Tools erstaunlich gut funktionieren, sind sie nicht fehlerfrei. Manchmal entfernen diese Tools zu viele CSS-Deklarationen. Verwenden Sie sie also vorsichtig und überprüfen Sie Ihr CSS immer selbst.
Die besten CSS-Clean-Up-Tools sind PurifyCSS und PurgeCSS . Diese Tools laufen auf NodeJS. NodeJS ist eine JavaScript-Laufzeitumgebung, auf der Sie JavaScript-Skripte ausführen können, basierend auf der V8-JavaScript-Engine von Google selbst.  Sie können auch PurifyCSS online ausprobieren.

4.  Critical CSS

Critical CSS ist eine Sammlung von CSS-Regeln, die im Viewport (dem sichtbaren Teil) Ihrer Website benötigt werden. Mit anderen Worten:  Critical CSS ist das CSS, das erforderlich ist, um den sichtbaren Teil Ihrer Seite zu rendern.

Es gibt eine Reihe von Tools, die filtern können und dieses CSS von Ihrer Seite extrahieren können. Das Critical CSS wird dann inline platziert, im Head Ihrer Seite, während die Original-CSS-Dateien asynchron geladen werden (damit der Browser sie später verwenden kann).

Dies löst das Problem des ungenutzten CSS nicht vollständig. Letztendlich wird das ungenutzte CSS geladen und geparst, aber Ihr Browser wird während der ersten Render-Phase nicht davon 'gestört' werden.

Das am häufigsten verwendete Tool, um Critical CSS zu finden und zu extrahieren, ist das NodeJS-Skript Critical . Es gibt auch Online-Tools wie Critical Path CSS Generator und noch einen Critical Path CSS Generator

5. Minify der CSS-Dateien

Unutztes CSS verlangsamt eine Seite, wie Sie oben gelesen haben, auf 2 Arten. Die erste ist, weil die CSS-Dateien größer sind und daher mehr Zeit zum Herunterladen benötigen. 

Wir können diesem Problem entgegenwirken, indem wir die CSS-Dateigröße verringern, indem wir die CSS-Dateien minifizieren. Das geschieht über einen CSS-Minifier.  Ein CSS-Minifier verkleinert CSS-Dateien, indem er Leerzeichen, Kommentare und Formatierung entfernt. Auch kann ein CSS-Minifier Variablen und CSS-Code umschreiben, damit er bei der Übertragung weniger Bytes beansprucht.

Ein bekanntes CSS-Minify-Tool ist css-minify . Minifizieren Sie alle Ihre CSS-Dateien über die Kommandozeile mit dem Befehl css-minify -f dateiname. Es gibt auch diverse Online-CSS-Minifier wie cssminifier.com

6. Kompilieren Sie Ihr CSS-Framework neu

Verwenden Sie ein CSS-Framework wie Bootstrap CSS? Das ist ein CSS-Framework, mit dem Sie Ihre gesamte Seite stylen können. Dieses Framework ist so komplett, dass die Chance groß ist, dass Sie große Teile davon nie verwenden werden.

Glücklicherweise haben die Macher von Bootstrap und anderen CSS-Frameworks dies berücksichtigt. Dieses Framework ist in SASS geschrieben. Das ist eine Sprache, die CSS sehr ähnlich ist. Es besteht aus verschiedenen kleinen SASS-Dateien, die einfache Variablen und Funktionen verwenden können. Dies macht es einfach, das Framework selbst  anzupassen und mit ein wenig Wissen zu personalisieren. Sie können einfach Teile weglassen, die Sie nicht verwenden, und es einfach zu einer endgültigen CSS-Datei kompilieren.

Stellen Sie auch sicher, dass Sie ein CSS-Framework nicht unverändert vom Standard-CDN laden. Laden Sie das Framework herunter und kompilieren Sie es mit SASS genau so, wie Sie es wollen, mit nur den CSS-Klassen, die Sie und verwenden.

7. Erwägen Sie eine andere CSS-Strategie

Wollen Sie wirklich schnell sein? Dann ist es vielleicht eine Idee, Ihre CSS-Strategie zu überdenken. Wie das gemacht wird, hängt von Ihrer Seite ab. Es führen mehrere Wege nach Rom.

Nehmen wir unsere Seite als Beispiel. Wir laden nur das CSS, das wir tatsächlich pro Seite benötigen. Die CSS-Klassen werden automatisch von unserem CMS importiert, nur wenn sie benötigt werden. Wir platzieren das CSS inline (im Head der Seite). Das spart uns eine zusätzliche Netzwerkanfrage. Diese Lösung ist blitzschnell und einfach zu warten.

Ein aufmerksamer Leser denkt vielleicht: "Wie sieht es mit CSS-Caching aus, CSS ist schneller, wenn die endgültigen CSS-Dateien gecacht sind. Ja, das stimmt. Deshalb laden wir alle Links im sichtbaren Viewport vor, damit eine Seite immer aus dem Cache geholt wird, einschließlich CSS.

Fix 'unutztes CSS entfernen' in Wordpress

Sind Sie bereit, unutztes CSS zu entfernen? So legen Sie in WordPress los. In WordPress kann CSS auf 3 Arten hinzugefügt werden:

• Direkt im Template . In Ihrem Template-Ordner befindet sich eine Datei namens header.php. In dieser Datei befinden sich oft Template-spezifische CSS-Dateien. Sie könnten diese CSS-Dateien anpassen, wie ich oben beschrieben habe. Vergessen Sie nicht, ein Backup Ihrer Original-CSS-Dateien zu erstellen und denken Sie daran, dass ein Theme-Update Ihre CSS-Dateien überschreiben kann.
• CSS hinzugefügt durch ein Plugin . Plugins in WordPress können unendlich viele CSS-Dateien zu Ihrem HTML hinzufügen. Diese Plugins verwenden die Funktionen wp_register_style und wp_enqueue_style. Die meisten Plugins machen sich nicht die Mühe zu überprüfen, ob sie auf der aktuellen Seite aktiv sind. Sie injizieren einfach CSS in jede Seite, auch wenn auf dieser Seite kein Bedarf an diesem Plugin-spezifischen CSS besteht. Dem begegne ich jeden Tag. Wenn das der Fall ist, können Sie die Funktionen wp_dequeue_style und wp_deregister_style verwenden, um diese Stile von den Seiten zu entfernen. Das ist eine genaue Arbeit. Wenn Sie nicht sicher sind, wie Sie das lösen sollen, wenden Sie sich an Ihren Entwickler oder bitten Sie mich um Hilfe. Sie können auch das Asset CleanUp Plugin verwenden, mit dem Sie pro Seitentyp einstellen können, welches Plugin, welche Stile und Skripte geladen werden dürfen.
• CSS hinzugefügt durch JavaScript . Es ist auch möglich, Stylesheets in die Seite mit JavaScript zu 'injizieren'. Genau wie Stylesheets können Sie diese Skripte pro Seite mit der wp_dequeue_script Funktion deaktivieren . Wenn das JavaScript nicht lädt, wird das Stylesheet auch nicht injiziert.
  Wenn Sie das Skript und das Stylesheet benötigen, aber nicht direkt nach dem Laden, ist es möglich, das Laden von JavaScript über das Script Defer-Attribut zu verzögern. Tun Sie dies, indem Sie diesen Code in functions.php hinzufügen

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //machen Sie WP Admin nicht kaputt
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );