Beim Durchführen eines Geschwindigkeitstests ist Ihnen möglicherweise von PageSpeed Insights vor der Entfernung nicht verwendeter CSS aufgefallen. Möchten Sie ungenutztes CSS von Ihrer WordPress-Site entfernen, um das Laden zu beschleunigen und bessere Leistungsbewertungen zu erhalten?
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 das Benutzererlebnis können durch das Entfernen des nicht verwendeten CSS-Codes verbessert werden. In diesem Artikel zeigen wir, wie Sie ungenutztes CSS ganz einfach von Ihrer WordPress-Website entfernen können, ohne dass Ihre Website kaputt geht.
Entfernen Sie nicht verwendetes CSS in WordPress auf verschiedene Arten
Wenn Sie die Menge an ungenutztem CSS auf Ihrer WordPress-Website reduzieren möchten, können Sie verschiedene Methoden ausprobieren.
Es wäre zwar möglich, das gesamte unnötige CSS in WordPress zu entfernen, aber das wäre eine ziemlich schwierige Aufgabe. Darüber hinaus kann es aufgrund der Funktionsweise von WordPress im Hintergrund für einige Benutzer schwierig sein, unnötiges CSS zu finden und zu entfernen.
In diesem Fall zeigen wir Ihnen verschiedene Möglichkeiten, ungenutztes CSS zu entfernen, und Sie können die Methode auswählen, die Ihren Anforderungen am besten entspricht.
Finden Sie Ihre größten CSS-Dateien
Um Ihre umfangreichsten CSS-Dateien anzuzeigen, sortieren Sie Ihren Abdeckungsbericht in den Chrome Dev Tools nach „Nutzungsvisualisierung“ . URLs enthalten normalerweise den Namen des Plugins, Themes oder Drittanbietercodes, der die Datei generiert hat. Dadurch können Sie jetzt leichter ermitteln, 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. Es wird auch von LiteSpeed Caches CSS und FlyingPress in eine separate Datei geladen. Darüber hinaus WP Rocket im Gegensatz zu den meisten anderen Plugins, die andere Dateien verwenden, weil sie schneller sind, eher für Punkte als für Besucher.
Vermeiden Sie Plugins, die CSS hinzufügen
Tools wie Query Monitor und WP Hive sind gut, zeigen aber nicht immer an, ob ein Plugin dem Frontend zusätzliches CSS/JS hinzufügt. Daher kann die volle Wirkung des Plugins erst beobachtet werden, wenn Sie Ihre Website nach dem Hinzufügen von Inhalten zum Frontend erneut testen. Die häufigsten Übeltäter sind Galerien, Slider, Kontaktformulare, Kommentare, Chat, Kalender und Plugins für den Seitenersteller im Zusammenhang mit dem Design.
Verwenden Sie ein leichtes Theme + Page Builder.
Das Frontend ist mit CSS, JavaScript und Schriftarten überladen. Dadurch ist in Kombination mit zusätzlichen Page Builder-Plugins wie Elementor Pro und Ultimate Addons eine langsame Website garantiert.
Aktivieren Sie CSS-Optimierungen in Page Buildern
Zu diesen Einstellungen gehören die Experimente von Elementor und die Leistungseinstellungen von Divi, die mehrere Optionen zum Reduzieren der CSS-Größe umfassen (z. B. verbessertes Laden von Assets und CSS in Elementor und dynamisches CSS in Divi). Im Allgemeinen erhalten Sie bessere Ergebnisse, wenn Sie mehr Leistung aktivieren.
Deaktivieren Sie Symbole, wenn Sie sie nicht verwenden
Wenn Sie keine Elementor-Symbole verwenden, deaktivieren Sie diese. Für Google Fonts + Font Awesome können Sie dies in der Dokumentation von Perfmatters oder Elementor tun.
Entfernen Sie CSS in Plugins zum Entladen von Assets
Mit Perfmatters können Sie CSS/JS (oder ganze Plugins) dort deaktivieren, wo sie nicht benötigt werden, nicht verwendetes CSS entfernen und YouTube-Iframes durch Vorschaubilder ersetzen. Das verbleibende ungenutzte CSS kann durch alle diese Methoden besser zugänglich 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 verzögert, wenn sie in einer separaten CSS-Datei gepackt sind.
Wenn Sie Hintergrundbilder daher verzögert laden möchten, lesen Sie bitte die Dokumentation Ihres Cache-Plugins. FlyingPress verfügt über eine Lazy-BG-Hilfsklasse, die Sie zur 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 bietet eine Lösung mit CSS-Selektoren.
Entfernen Sie Gutenberg-CSS
Angenommen, Sie können die Gutenberg-Blockbibliothek aus der Warteschlange entfernen, wenn Sie keine Gutenberg-Blöcke verwenden. Verwenden Sie Code-Snippets oder Functions.php, um dies hinzuzufügen.
CSS kombinieren (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 nahezu unmöglich ist.
Deaktivieren Sie WooCommerce-Stile
Standardmäßig lädt WooCommerce Stile auf Ihrer gesamten Website. Wenn Sie diese Stile nur auf E-Commerce-Seiten verwenden, können Sie sie überall deaktivieren. WooCommerce verfügt über eine Dokumentation, wir empfehlen jedoch „WooCommerce Bloat deaktivieren“, das viele weitere Einstellungen zum Entfernen von Bloat bietet.
Weitere Artikel dieser Art finden Sie bei Seahawk Media .
