Ungenutzte CSS in WordPress entfernen

 
  • ES
  • JA
  • RU
  • CN
  • PT
  • FR
  • EN
  • Ungenutzte CSS in WordPress entfernen

    Perfmatters hat in der Version 1.8.5, die am 19. Januar veröffentlicht wurde, eine neue Funktion hinzugefügt, die sich derzeit noch in der Beta-Phase befindet und mit der Sie nicht verwendete CSS entfernen können. 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.

    Ich habe es bereits mit WordPress 5.8 und 5.9-RC getestet und bisher ist nichts kaputt gegangen. Obwohl ich das ungenutzte CSS bereits durch das Skript Manager dieses Plugins, spart die Aktivierung dieser Option mindestens ein paar Anfragen und einige Kb.

    warum sollten Sie nicht verwendete CSS entfernen?

    Ungenutzte CSS in WordPress entfernen


    Die üblichen Warnungen in PageSpeed von„Ungenutzte CSS entfernen“ oder„Ungenutzte CSS-Inhalte reduzieren“ erscheinen in der Regel, wenn die von einem Plugin oder einer Vorlage geladenen CSS auf einer bestimmten Seite nicht benötigt oder nicht verwendet werden

    Entwickler stellen ein Stylesheet in der Regel nur dann in die Warteschlange, wenn es auch verwendet wird. Oftmals werden jedoch auch zusätzliche Stile hinzugefügt, die vielleicht gar nicht benötigt werden. 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 Beginn des Ladens 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 Beginn des Ladens der Seite bis zur vollständigen Interaktivität(TTI). Wie auch immer, 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.

    Ungenutzte CSS in WordPress entfernen

    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 Rückgang des FCP um 15,20%.
    Durchschnittlicher LCP-Rückgang von 19,66%.
    Durchschnittlicher Rückgang des TTI

    um 14,95%.

    Denken Sie daran, dass es sich im Moment noch in der Beta-Phase befindet und die Ergebnisse möglicherweise nicht die gewünschten sind oder sogar etwas kaputt machen. Daher ist es ratsam, es in einer Testumgebung zu testen, auch wenn es aus der Beta-Phase herauskommt.

    Vor dem Aktivieren

    Die Historie von Perfmatters empfiehlt, dass Sie vor der Aktivierung dieser Option alle vorhandenen CSS-Preloads, die in Perfmatters konfiguriert wurden, entfernen (mit Ausnahme der lokalen Stylesheets der google-Schriftarten) und NICHT das CSS zusammenführen.

    Die CSS-Zusammenführung ist seit HTTP/2 eine veraltete Optimierungstechnik. In manchen Fällen kann sich die CSS-Zusammenführung sogar nachteilig auf die Leistung auswirken. 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 möglicherweise in Konflikt geraten oder durch die Aktivierung derselben Funktionen überschrieben werden.

    La imagen tiene un atributo ALT vacío; su nombre de archivo es remove-unused-css-perfmatters.jpg

    Nach der Aktivierung finden Sie drei Optionen:

    1- Verzögerung (die Standardeinstellung und empfohlen).

    Ihr verwendetes CSS wird inline und alle CSS-Stylesheets (nicht verwendetes CSS) werden verzögert und mit der Benutzerinteraktion geladen.


    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.


    3- Löschen

    Ihr verwendetes CSS wird inline, und alle ursprünglichen CSS-Stylesheets (nicht verwendetes CSS) werden gelöscht. 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 haben in der Regel eine Menge einzigartiger CSS, und daher wird das verwendete CSS beim ersten Besuch für jede Seite separat generiert und eingefügt.
    Da die Einträge jedoch in der Regel viel CSS gemeinsam haben, wird das verwendete CSS nur einmal, beim ersten Besuch, generiert und wird inline. 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/

    Ungenutzte CSS in WordPress entfernen

    So sieht das von Perfmatters generierte CSS für Seiten, Beiträge, Kategorien, Tags, Suchen, die Startseite oder 404s aus.

    Ungenutzte CSS in WordPress entfernen

    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.

    Ungenutzte CSS in WordPress entfernen

    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.

    Ungenutzte CSS in WordPress entfernen

    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„.

    Ungenutzte CSS in WordPress entfernen


    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;
    });




    Perfmatters


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

    Artículos relacionados