Beim Ausführen eines Geschwindigkeitstests ist Ihnen möglicherweise von PageSpeed Insights bezüglich der Entfernung ungenutzten CSS-Codes aufgefallen. Möchten Sie ungenutzten CSS-Code von Ihrer WordPress-Website entfernen, um die Ladezeit zu verkürzen und bessere Leistungsbewertungen zu erzielen?
WordPress-Themes und -Plugins fügen oft unnötigen CSS-Code hinzu. Durch das Entfernen dieses ungenutzten CSS-Codes lässt sich die Performance von WordPress und die Benutzerfreundlichkeit verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie ungenutzten CSS-Code problemlos von Ihrer WordPress-Website entfernen können, ohne dass Ihre Website dadurch beeinträchtigt wird.
Nicht verwendetes CSS in WordPress entfernen – mit verschiedenen Methoden
Wenn Sie die Menge an ungenutztem CSS auf Ihrer WordPress-Website reduzieren möchten, gibt es verschiedene Methoden, die Sie ausprobieren können.
Es wäre zwar möglich, sämtliches unnötiges CSS in WordPress zu entfernen, aber eine recht schwierige Aufgabe. Aufgrund der Funktionsweise von WordPress im Hintergrund kann es zudem für manche Nutzer 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 Bedürfnissen am besten entspricht.
Finden Sie Ihre größten CSS-Dateien
Um Ihre umfangreichsten CSS-Dateien anzuzeigen, sortieren Sie Ihren Abdeckungsbericht in den Chrome-Entwicklertools nach „Nutzungsvisualisierung“ . URLs enthalten in der Regel den Namen des Plugins, Themes oder Drittanbietercodes, der die Datei generiert hat. Dadurch können Sie leichter feststellen, was optimiert werden muss.
Nicht verwendetes CSS entfernen und das verwendete CSS in einer separaten Datei speichern
Das Erstellen einer separaten Datei ist schneller, da die HTML-Größe nicht zunimmt und die Datei – anders als beim Inlining – zwischengespeichert werden kann. Auch LiteSpeed Cache und FlyingPress laden sie in einer separaten Datei. Darüber hinaus WP Rocket im Gegensatz zu den meisten anderen Plugins, die aufgrund der höheren Geschwindigkeit separate Dateien verwenden, auf die Seitenladegeschwindigkeit und nicht auf die Besucherzahlen.
Vermeiden Sie Plugins, die CSS hinzufügen
Tools wie Query Monitor und WP Hive sind zwar hilfreich, zeigen aber nicht immer an, ob ein Plugin zusätzlichen CSS/JS-Code im Frontend hinzufügt. Daher lässt sich die volle Auswirkung eines Plugins erst nach einem erneuten Test der Website nach dem Hinzufügen von Inhalten im Frontend feststellen. Häufige Ursachen sind Galerien, Slider, Kontaktformulare, Kommentarfunktionen, Chat-Elemente, Kalender und Page-Builder-Plugins, die mit Design zu tun haben.
Verwenden Sie ein leichtgewichtiges Theme + einen Page Builder.
Das Frontend ist mit CSS, JavaScript und Schriftarten überladen. In Kombination mit zusätzlichen Page-Builder-Plugins wie Elementor Pro und Ultimate Addons ist daher eine langsame Website vorprogrammiert.
CSS-Optimierungen in Page-Buildern aktivieren
Zu diesen Einstellungen gehören die Experimentieroptionen von Elementor und die Leistungseinstellungen von Divi, die verschiedene Optionen zur Reduzierung der CSS-Größe bieten (z. B. verbessertes Laden von Assets und CSS in Elementor und dynamisches CSS in Divi). Generell erzielen Sie bessere Ergebnisse, wenn Sie die Leistungseinstellungen erhöhen.
Deaktivieren Sie Symbole, wenn Sie sie nicht verwenden
Wenn Sie die Elementor-Icons nicht verwenden, deaktivieren Sie sie. Für Google Fonts und Font Awesome können Sie dies in der PerformanceMatters- oder Elementor-Dokumentation einstellen.
CSS in Asset-Entlade-Plugins entfernen
Mit Perfmatters können Sie nicht benötigtes CSS/JS (oder ganze Plugins) deaktivieren, ungenutztes CSS entfernen und YouTube-iFrames durch Vorschaubilder ersetzen. Das verbleibende ungenutzte CSS lässt sich durch all diese Methoden besser zugänglich machen. CSS/JS-Dateien können auch mit dem Asset CleanUp Plugin deaktiviert werden.
Hintergrundbilder werden in CSS verzögert geladen
Die meisten Cache-Plugins laden Hintergrundbilder nicht verzögert, wenn diese in einer separaten CSS-Datei gepackt sind.
Wenn Sie Hintergrundbilder verzögert laden möchten, lesen Sie bitte die Dokumentation Ihres Cache-Plugins. FlyingPress bietet im Gegensatz zu WP Rocket, das Inline-HTML erfordert, eine Hilfsklasse namens `lazy-bg`, die Sie der zusätzlichen CSS-Klasse hinzufügen können. Die Hilfsklasse `lazy-bg` lässt sich manuell hinzufügen, oder Optimole bietet eine Lösung mithilfe von CSS-Selektoren.
Gutenberg-CSS entfernen
Angenommen, Sie können die Gutenberg-Blockbibliothek entfernen, wenn Sie keine Gutenberg-Blöcke verwenden. Fügen Sie dies mithilfe von Code-Snippets oder der functions.php hinzu.
CSS kombinieren (oder nicht)
Die Gesamtgröße von CSS und JavaScript sollte 10 KB nicht überschreiten, wenn Sie beides kombinieren. In den meisten Fällen ist es jedoch praktisch unmöglich, CSS und JavaScript zu kombinieren.
WooCommerce-Stile deaktivieren
Standardmäßig lädt WooCommerce Styles auf Ihrer gesamten Website. Wenn Sie diese Styles nur auf Ihren E-Commerce-Seiten verwenden, können Sie sie überall deaktivieren. WooCommerce bietet zwar eine Dokumentation, wir empfehlen jedoch Disable WooCommerce Bloat, da dieses Tool viele weitere Einstellungen zur Reduzierung von unnötigem Code bietet.
Weitere Artikel dieser Art finden Sie bei Seahawk Media .
