Perfmatters fügte am 19. Januar in seiner Version 1.8.5 eine neue Funktion hinzu, um ungenutzte CSS zu entfernen. Ich werde nicht müde, dieses Plugin zu empfehlen, das zu einem Muss geworden ist, wenn Sie die Leistung Ihres Blogs verbessern möchten.
Für die 25 Dollar kurz nach einem Jahr bietet es ein leistungsstarkes Tool, das ständig verbessert wird. Hier finden Sie eine Konfigurationsanleitung.
Ich habe es bereits auf WordPress 5.8 und 5.9-RC getestet und bisher ist nichts kaputt gegangen. Obwohl ich das unbenutzte CSS bereits sehr kontrolliert durch die Skript Manager dieses Plugins, spart die Aktivierung dieser Option mindestens ein paar Anfragen und einige Kb.
warum sollten Sie nicht verwendete CSS löschen?
Die üblichen Warnungen in PageSpeed die Warnungen "Ungenutzte CSS entfernen" oder"Ungenutzte CSS-Inhalte reduzieren" erscheinen normalerweise, wenn CSS, das von einem Plugin oder einer Vorlage geladen wird, auf einer bestimmten Seite nicht benötigt oder nicht verwendet wird.
Entwickler stellen ein Stylesheet in der Regel nur dann in die Warteschlange, wenn es auch verwendet wird. Oft werden jedoch auch zusätzliche Stile hinzugefügt, die vielleicht gar nicht notwendig sind. Dies führt zu einer Menge ungenutzter CSS, was das Laden verlangsamt.
Gelegentlich kann es auch zu einer Warnung"Ressourcen entfernen, die das Rendering blockieren" kommen.
Neben dem Placebo für einen besseren PageSpeed-Score hat das Entfernen von ungenutztem CSS einen großen Einfluss auf die Verringerung der Zeit, die vom Laden der Seite bis zum Rendern eines Teils des Seiteninhalts auf dem Bildschirm vergeht(FCP), auf die Zeit, die der Hauptinhalt einer Webseite braucht, um heruntergeladen zu werden und vollständig für den Benutzer bereitzustehen(LCP), und auf die Zeit vom Laden der Seite bis zur vollständigen Interaktivität(TTI). Wie auch immer, wissen Sie, ein wichtiger Teil der Geschichte des Core Web Vitals.
wie findet man ungenutzte CSS?
Der einfachste Weg, ungenutzte CSS zu finden, ist, die URL mit PageSpeed zu testen. Wenn es ungenutztes CSS gibt, sehen Sie die Warnung, die nur ausgelöst wird, wenn sie über dem Schwellenwert liegt, den Google für wichtig genug hält, um eine Warnung auszusprechen. Wenn also die wahrgenommene Ladegeschwindigkeit (die tatsächliche Geschwindigkeit, die Sie erleben) gut ist, sollten Sie sich nicht zu sehr daran stören.
Die andere Möglichkeit, nicht verwendete CSS zu finden, ist die Verwendung von Chrome DevTools. Öffnen Sie den Inspektor in Chrome (Strg+Umschalt-I), drücken Sie Shitft+Steuerung+P, geben Sie "Coverage" ein und dort finden Sie die ungenutzten Bytes für CSS und JS. In Rot die unbenutzten und in Blau/Grün die benutzten.
Von hier aus, und wenn Sie wissen, dass Sie jedes CSS erkennen, was es bewirkt und ob Sie es von der Seite, auf der Sie messen, entfernen oder deaktivieren können, gibt es mehrere Möglichkeiten, wie z.B. das Ersetzen bestimmter Plugins durch andere, leichtere, das Überprüfen oder Ändern der Vorlage, die Verwendung des Script Managers, um JS und CSS selektiv zu deaktivieren, usw.
Der einfachste Weg, PageSpeed-Warnungen zu beseitigen, ist die Aktivierung der Funktion"Ungenutzte CSS entfernen" in Perfmatters, die dies automatisch erledigt. Sie behaupten, es an Hunderten von URLs (mit verschiedenen Vorlagen und Konfigurationen) getestet zu haben und berichten über diese Ergebnisse:
Durchschnittlicher FCP-Rückgang um 15,20%.
Durchschnittlicher LCP-Rückgang um 19,66%.
Durchschnittlicher TTI-Rückgang um 14,95%.
Vor dem Aktivieren
Perfmatters empfiehlt, dass Sie vor der Aktivierung dieser Option alle bestehenden CSS-Voreinstellungen, die in Perfmatters konfiguriert wurden, entfernen (mit Ausnahme lokaler Stylesheets von google-Schriftarten) und NICHT das CSS zusammenführen.
Die CSS-Zusammenführung ist seit HTTP/2 eine veraltete Optimierungstechnik. In einigen Fällen kann die CSS-Zusammenführung sogar die Leistung beeinträchtigen. Denken Sie daran, dass sich jede Seite je nach Konfiguration anders verhält und dass es am besten ist, zu testen und zu beobachten, bis Sie das beste fehlerfreie Ergebnis für Ihren Fall finden.
Sie sollten auch auf mögliche Konfigurationen anderer Performance- oder Caching-Plugins achten, die Sie verwenden und die in Konflikt miteinander stehen oder sich gegenseitig aufheben können, wenn dieselben Funktionen aktiviert sind.
Nach der Aktivierung finden Sie zwei Optionen mit zwei Konfigurationen:
1- Verwendete CSS-Methode
1.1- Inline (Standard): Das verwendete CSS wird im Quellcode der Website oberhalb der Falz ausgerichtet. Diese Option ist die beste für die PageSpeed-Bewertungen.
1.2 -Datei: Das verwendete CSS wird in einem separaten CSS-Stylesheet (Datei) abgelegt. Diese Option ist für den Benutzer und die wahrgenommene Leistung am besten, da die Datei bei wiederholten Besuchen zwischengespeichert werden kann und die Größe des HTML-Dokuments reduziert.
2- Verhalten bei Stilvorlagen
2. 1- Verzögerung (die Standardeinstellung und empfohlen).
Ihr CSS war früher inline und alle CSS-Stylesheets (nicht verwendetes CSS) werden verzögert und mit der Benutzerinteraktion geladen.
2.2- Asynchron
Ihr verwendetes CSS wird inline, und alle CSS-Stylesheets (nicht verwendetes CSS) werden asynchron geladen. Diese Methode kann helfen, Pop-In zu vermeiden, da die Stylesheets asynchron ausgeführt werden, während die Seite geladen wird. Diese Methode führt zu einem geringfügig höheren LCP/FCP als das bisherige Verzögerungsverhalten.
2.3- Entfernen Sie
Ihr verwendetes CSS wird inline, und alle ursprünglichen CSS-Stylesheets (nicht verwendetes CSS) werden entfernt. Dies ist die aggressivste Methode, erfordert aber wahrscheinlich auch das Hinzufügen von Ausnahmen. Nur für fortgeschrittene Benutzer empfohlen.
Sobald diese Funktion aktiviert ist, verhalten sich Seiten und Beiträge anders.
Seiten neigen dazu, eine Menge einzigartiger CSS zu haben, und daher wird das verwendete CSS für jede Seite separat generiert und beim ersten Besuch inline gestellt.
Da Einträge jedoch dazu neigen, eine Menge CSS zu teilen, wird das verwendete CSS nur einmal, beim ersten Besuch, generiert und inline gestellt. Der Unterschied zwischen Eingaben und Seiten besteht darin, dass die Generierung des verwendeten CSS nur einmal stattfindet.
Alle verwendeten CSS, die von Perfmatters generiert werden, werden lokal in diesem Pfad gespeichert:
/wp-content/cache/perfmatters/tudomain.com/css/
So sieht das von Perfmatters generierte CSS für Seiten, Beiträge, Kategorien, Tags, Suchen, die Startseite oder 404s aus.
Im Feld"Ausgeschlossene Stylesheets" können Sie bestimmte Stylesheets von der Funktion "Unbenutzte CSS entfernen" ausschließen, indem Sie die vollständige Quell-URL(loquesea.css) oder einen einzelnen Teil der Quell-URL hinzufügen. Format: eine pro Zeile.
Im nächsten Feld"Ausgeschlossene Selektoren" können Sie bestimmte CSS (Selektoren) von der Funktion "Unbenutzte CSS entfernen" ausschließen, indem Sie die Element-ID, den Klassennamen usw. hinzufügen (#id, .class). Formatierung: eine pro Zeile.
Es ist wahrscheinlich, dass Sie irgendwann einmal verwendetes CSS löschen müssen. Zum Beispiel nach der Umgestaltung einer Seite oder nach dem Hinzufügen eines neuen Elements. Um das generierte CSS zu löschen und es bei späteren Besuchen neu zu erstellen, klicken Sie einfach auf die Option unten bei"Verwendetes CSS löschen".
Sie können einen einzelnen Beitrag, eine Seite oder einen benutzerdefinierten Beitragstyp von der Verwendung der Funktion Nicht verwendete CSS löschen ausschließen. Deaktivieren Sie im Editor auf der rechten Seite das Kontrollkästchen"Nicht verwendete CSS".
Dies schließt die gesamte Seite aus und kann z. B. für eine Einkaufswagen-, Kassen- oder Kontaktseite nützlich sein, die möglicherweise mehr Probleme als der Rest der Website hat.
Sie können auch den Filter perfmatters_remove_unused_css verwenden, um den Ort zu ändern, an dem ungenutztes CSS auf Ihrer Website entfernt wird. Mit diesem Beispiel würden Sie nicht verwendete CSS nur auf Seiten deaktivieren.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
