Ungenutztes CSS entfernen: eine kürzere Kopie jedes Stylesheets aus Ihrer eigenen Prüfung

Ungenutztes CSS entfernen ersetzt jedes Stylesheet, das Ihre Besucher laden, durch eine kürzere Kopie, die aus dem entsteht, was Ihre Seiten wirklich verwenden. Nichts wird von selbst entfernt: Sie starten eine Prüfung, und Baza Helper fragt Ihre eigenen Seiten, welche Regeln sie verwenden. Die Option befindet sich unter Baza Helper > Cache und Optimierung, nur in Baza Helper Pro (kostenpflichtige Tarife). Die kostenlose Version und die Version im WordPress.org-Verzeichnis enthalten sie nicht. Sie ist standardmäßig ausgeschaltet.

Einschalten und die Website prüfen

1. Öffnen Sie Baza Helper > Cache und Optimierung und suchen Sie Ungenutztes CSS entfernen.
2. Setzen Sie den Haken bei Ungenutztes CSS entfernen und speichern Sie.
3. Klicken Sie auf Website prüfen. Lassen Sie den Tab geöffnet, bis die Prüfung endet. Die Zeile über den Schaltflächen zeigt, wie viele Seiten geprüft wurden und wie stark die Stylesheets geschrumpft sind.
4. Öffnen Sie Ihre Website in einem Fenster, in dem Sie nicht angemeldet sind, und prüfen Sie die wichtigen Seiten, das Menü, Formulare und Slider.

Was die Prüfung tut

Nur ein Administrator kann sie starten. Die Prüfung öffnet nacheinander in einem versteckten Frame die Startseite, die Seiten, die Sie unter Weitere Seiten zum Prüfen hinzufügen, zwei aktuelle Seiten jedes öffentlichen Beitragstyps und den am stärksten genutzten Begriff jeder öffentlichen Taxonomie, bis zu 40 Adressen. Jede Seite wird mit 1440 und mit 390 Pixeln Breite geöffnet.

Ein Skript in jedem Frame scrollt die Seite, geht dann die Stylesheets Ihrer eigenen Website durch und fragt die Seite für jede Regel, ob es ein Element für diesen Selektor gibt. Die Antworten aller Seiten werden zusammengeführt: Eine Regel bleibt, wenn mindestens eine Seite sie verwendet hat. Für jedes Stylesheet speichert Baza Helper eine kürzere Kopie im Ordner uploads/baza-helper-cache/rucss/.

Die Prüfung läuft im Browser des Administrators, auf Ihrer eigenen Website. Es wird kein externer Dienst verwendet.

Was Besucher erhalten

Solange die Option eingeschaltet ist, erhalten Besucher, die nicht angemeldet sind, die kürzere Kopie statt des ursprünglichen Stylesheets. Angemeldete Benutzer und Vorschauen erhalten weiterhin das Original. Ein Stylesheet ohne Kopie, zum Beispiel nachdem sich seine Versionsnummer geändert hat, wird vollständig geladen.

Was immer erhalten bleibt

• Regeln, die einen Zustand benennen, wie is-, has-, active, open oder show.
• Regeln mit hover, focus, active und Pseudo-Elementen: Sie werden anhand ihres Basiselements geprüft. Ein Selektor, der sich nicht testen lässt, bleibt erhalten.
• @font-face und @keyframes.
• @media-, @supports-, @container- und @layer-Blöcke, solange etwas darin erhalten bleibt.
• Alles, was Sie unter Regeln, die nie entfernt werden eintragen, und jedes Stylesheet, das Sie unter Stylesheets, die ganz bleiben eintragen.

Einstellungen

• Ungenutztes CSS entfernen: der Schalter. Jedes Stylesheet wird durch eine kürzere Kopie ersetzt, sobald eine Prüfung durchgeführt wurde.
• Weitere Seiten zum Prüfen: Adressen von Seiten, die sich vom Rest unterscheiden, etwa eine Landingpage oder eine Shop-Seite. Eine pro Zeile, zum Beispiel /pricing/.
• Regeln, die nie entfernt werden: ein Teil eines Selektors pro Zeile, zum Beispiel .modal oder .swiper.
• Stylesheets, die ganz bleiben: ein Teil einer Stylesheet-Adresse pro Zeile, zum Beispiel /plugins/some-plugin/.

Nach einer Änderung erneut prüfen

Prüfen Sie erneut, nachdem Sie das Theme, ein Plugin oder das Design geändert haben. Ein Stylesheet, dessen Versionsnummer (?ver=) sich geändert hat, hat keine Kopie und wird bis zur nächsten Prüfung vollständig geladen. Prüfung vergessen entfernt die Kopien und den Eintrag und stellt alle vollständigen Stylesheets auf einmal wieder her.

Grenzen

• Entfernt wird nur, was auf den geprüften Seiten nicht gefunden wurde. Regeln für Seiten, die nicht geprüft wurden, und für Zustände, die ein Skript erst nach einer Aktion des Besuchers einschaltet, können verloren gehen. Fügen Sie die Seite unter Weitere Seiten zum Prüfen hinzu oder den Selektor unter Regeln, die nie entfernt werden.
• Die Einsparung hängt von Ihrem Theme und Ihren Plugins ab, daher gibt es keine feste Zahl. Prüfen Sie die Seite nach der Prüfung.
• Es ersetzt nicht Critical CSS, ein separates Pro-Werkzeug für den ersten Bildschirm.