Wenn Sie einen Geschwindigkeitstest durchführen, haben Sie vielleicht die PageSpeed Insights-Warnung zum Entfernen von unbenutztem CSS bemerkt. Möchten Sie ungenutztes CSS von Ihrer WordPress-Website entfernen, damit sie schneller lädt und bessere Leistungswerte erhält?
Es gibt eine Menge CSS-Code, der von WordPress-Themes und Plugins hinzugefügt wird, die Sie nicht benötigen. Die Leistung von WordPress und die Benutzerfreundlichkeit können durch das Entfernen des ungenutzten CSS-Codes verbessert werden. In diesem Artikel zeigen wir Ihnen, wie Sie ungenutzten CSS-Code ganz einfach von Ihrer WordPress-Website entfernen können, ohne dass Ihre Website dadurch beschädigt wird.
Unbenutzte CSS in WordPress auf verschiedene Weise entfernen
Wenn Sie die Menge an ungenutztem CSS auf Ihrer WordPress-Website reduzieren möchten, gibt es einige Methoden, die Sie ausprobieren können.
Es wäre zwar möglich, alle unnötigen CSS in WordPress zu entfernen, aber das wäre eine ziemlich schwierige Aufgabe. Darüber hinaus kann es aufgrund der Art und Weise, wie WordPress hinter den Kulissen arbeitet, für einige Benutzer schwierig sein, unnötige CSS zu finden und zu entfernen.
In diesem Fall zeigen wir Ihnen verschiedene Möglichkeiten, wie Sie ungenutztes CSS entfernen können, und Sie können die beste Methode wählen, die Ihren Bedürfnissen entspricht.
Finden Sie Ihre größten CSS-Dateien
Um Ihre umfangreichsten CSS-Dateien zu sehen, sortieren Sie Ihren Abdeckungsbericht nach "Nutzungsvisualisierung" in Chrome Dev Tools. Die URLs enthalten in der Regel den Namen des Plugins, Themes oder Drittanbieter-Codes, der die Datei erzeugt hat. So können Sie jetzt leichter feststellen, was optimiert werden muss.
Entfernen Sie nicht verwendetes CSS mit verwendetem CSS in einer separaten Datei
Es ist schneller, eine separate Datei zu erstellen, da die HTML-Größe nicht zunimmt und die Datei im Gegensatz zum Inlining zwischengespeichert werden kann. Sie wird auch von LiteSpeed Cache's CSS und FlyingPress in eine separate Datei geladen. Darüber hinaus optimiert WP Rocket eher für die Ergebnisse als für die Besucher, im Gegensatz zu den meisten anderen Plugins, die andere Dateien verwenden, weil sie schneller sind.
Vermeiden Sie Plugins, die CSS hinzufügen
Tools wie Query Monitor und WP Hive sind gut, aber sie zeigen nicht immer, ob ein Plugin dem Frontend zusätzliche CSS/JS hinzufügt. Infolgedessen kann die volle Auswirkung des Plugins nur nach einem erneuten Test Ihrer Website nach dem Hinzufügen von Inhalten zum Frontend beobachtet werden. Die häufigsten Übeltäter sind Galerien, Schieberegler, Kontaktformulare, Kommentare, Chats, Kalender und Plugins für den Seitenaufbau im Zusammenhang mit dem Design.
Verwenden Sie ein leichtes Theme + Page Builder.
Das Frontend ist mit CSS, JavaScript und Schriftarten überfrachtet. In Kombination mit zusätzlichen Page-Builder-Plugins wie Elementor Pro und Ultimate Addons ist eine langsame Website daher garantiert.
CSS-Optimierungen in Page Buildern aktivieren
Zu diesen Einstellungen gehören die Experimente von Elementor und die Leistungseinstellungen von Divi, die mehrere Optionen zur Reduzierung der CSS-Größe enthalten (z. B. verbessertes Laden von Assets und CSS in Elementor und dynamisches CSS in Divi). Im Allgemeinen werden Sie bessere Ergebnisse erzielen, wenn Sie mehr Leistung aktivieren.
Deaktivieren von Symbolen, wenn Sie sie nicht verwenden
Wenn Sie keine Elementor-Symbole verwenden, schalten Sie sie aus. Für Google Fonts + Font Awesome können Sie dies in Perfmatters oder in der Dokumentation von Elementor tun.
CSS in Asset-Entlade-Plugins entfernen
Mit Perfmatters können Sie CSS/JS (oder ganze Plugins) dort deaktivieren, wo sie nicht benötigt werden, ungenutzte CSS entfernen und YouTube-iframes durch Vorschaubilder ersetzen. Das verbleibende ungenutzte CSS kann durch all diese Methoden zugänglicher gemacht werden. CSS/JS-Dateien können auch mit dem Asset CleanUp Plugin deaktiviert werden.
Lazy Load Hintergrundbilder in CSS gefunden
Die meisten Cache-Plugins laden Hintergrundbilder nicht, wenn sie in eine separate CSS-Datei gepackt sind.
Wenn Sie also Hintergrundbilder "lazy" laden möchten, schauen Sie bitte in die Dokumentation Ihres Cache-Plugins. FlyingPress wird mit einer lazy-bg-Hilfsklasse geliefert, die Sie der zusätzlichen CSS-Klasse hinzufügen können, im Gegensatz zu WP Rocket, das Inline-HTML erfordert. Eine lazy-bg-Hilfsklasse kann manuell hinzugefügt werden, oder Optimole hat eine Lösung mit CSS-Selektoren.
Gutenberg-CSS entfernen
Angenommen, Sie können die Gutenberg-Block-Bibliothek deaktivieren, wenn Sie keine Gutenberg-Blöcke verwenden. Verwenden Sie Code Snippets oder functions.php, um dies hinzuzufügen.
Kombinieren Sie CSS (oder nicht)
Die CSS/JS-Größe sollte 10 KB nicht überschreiten, wenn Sie sie kombinieren. In den meisten Fällen sollten CSS und JavaScript nicht kombiniert werden, da dies fast unmöglich ist.
WooCommerce-Stile deaktivieren
Standardmäßig lädt WooCommerce Stile auf Ihrer gesamten Website. Wenn Sie diese Stile nur auf eCommerce-Seiten verwenden, können Sie sie überall deaktivieren. WooCommerce hat eine Dokumentation, aber wir empfehlen Disable WooCommerce Bloat, die viele weitere Einstellungen für die Entfernung von Bloat hat.
Weitere Artikel dieser Art finden Sie bei Seahawk Media.
