Wenn Ihre WordPress-Site ein kostenpflichtiges WordPress-Theme oder ein beliebtes WordPress-Theme aus dem offiziellen WordPress-Theme-Repository verwendet, besteht die Möglichkeit, dass das Thema für eine Vielzahl von Anwendungsfällen entwickelt wird. Und Sie verwenden möglicherweise nur einen kleinen Satz aller im Design verfügbaren Funktionen.
In diesem Fall lädt Ihre Website eine Menge ungenutztes CSS, das nicht zum Gestalten der Seiten Ihrer Website erforderlich ist. Zum Beispiel kann das von Ihnen verwendete WordPress-Theme auch Stile für WooCommerce-Seiten haben, aber wenn Sie nur einen Blog auf Ihrer WordPress-Site betreiben, verwenden Sie nicht das für WooCommerce-Seiten auf Ihrer Site enthaltene CSS und dienen somit ungenutzt CSS an die Benutzer.
Wenn Sie Ihre Website mit dem Google Pagespeed-Tool getestet haben, wissen Sie wahrscheinlich bereits, dass Ihre Website ungenutzte CSS-Probleme aufweist. In dieser Anleitung zeigen wir Ihnen, wie Sie zuerst nach ungenutztem CSS suchen und dann ein kostenloses Tool verwenden, um ungenutztes CSS von Ihrer WordPress-Site zu entfernen.
So überprüfen Sie ungenutztes CSS
Google Chrome DevTools (dasjenige, das Sie sehen, wenn Sie im Kontextmenü auf die Option "Inspizieren" klicken) verfügt über eine Abdeckungsfunktion auf der Registerkarte "Quellen". Sie können die Option Abdeckung verwenden, um ungenutzte CSS und JS zu finden, die Ihre Website lädt.
- Öffnen Sie Ihre Website in Chrome auf dem Desktop.
- Klicken Sie mit der rechten Maustaste auf einen leeren weißen Bereich auf Ihrer Site und wählen Sie Prüfen aus dem Kontextmenü.
- Klicken Sie auf Quellen Tab, drücken Sie Strg + Umschalt + P um ein Befehlsfenster zu öffnen, geben Sie dann ein Abdeckung und wählen Sie Beginnen Sie mit der Instrumentierung der Abdeckung und laden Sie die Seite neu. aus verfügbaren Befehlen.
- Klicken Sie auf der Registerkarte Abdeckung auf das URL-Filter Feld und geben Sie hier die Root-Domain Ihrer Site ein, um nur interne CSS/JS-Dateien anzuzeigen.
└ Überprüfen Sie die Ungenutzte Bytes Spalte, um den Prozentsatz der Daten anzuzeigen, die aus Ihrem Design in eine CSS/JS-Datei geladen werden.
- Klicken Sie auf eine CSS-Datei, um das nicht verwendete CSS (mit roten Balken markiert) anzuzeigen, das von Ihrer Site geladen wurde. Das auf der aktuellen Seite verwendete CSS wird mit grünen Balken angezeigt.
Nachdem Sie alle nicht verwendeten CSS analysiert haben, die auf Ihrer Website geladen werden, ist es an der Zeit, sie zu entfernen. Es gibt mehrere kostenlose Tools, um ungenutztes CSS von Webseiten zu entfernen. Unten ist eines der beliebtesten Tools, die ich getestet und in meinen eigenen Projekten verwendet habe.
Verwenden Sie PurifyCSS Online, um ungenutztes CSS zu entfernen
Normalerweise finden Sie für fast alles in WordPress ein Plugin. Aber um ungenutztes CSS zu entfernen, gibt es leider kein einziges Plugin. Daher verwenden wir manuelle, nicht WordPress-spezifische Tools, um ungenutztes CSS von Ihrer Website zu entfernen.
PurifyCSS ist das meiste freundliches Nicht-Entwickler-Tool finden Sie, um mit ungenutztem CSS umzugehen. Das Tool verfügt über eine einfache Benutzeroberfläche, über die Benutzer entweder die Website-URL ODER den HTML- und CSS-Code angeben können. Für WordPress verwenden wir die URL-Option und stellen Links zu allen Arten von Seiten auf Ihrer Website bereit, damit das Tool CSS von allen abrufen und für ungenutztes CSS optimieren kann.
Hier ist eine kurze Liste von Seiten, die Sie in das Tool einfügen sollten:
- Startseiten-URL
- Mehrere Postseiten-URLs aus jeder Kategorie auf Ihrer Website
└ Damit soll sichergestellt werden, dass CSS für alle Post-Elemente enthalten ist.
- Kontakt, Info, Datenschutz und alle möglichen verschiedenen Seiten, die Sie möglicherweise auf Ihrer Website haben.
- Archivseite, Suchseite, Autorenseiten
- Seiten mit benutzerdefiniertem Beitragstyp
Heißer Tipp: Erstellen Sie einen 'Features'-Beitrag/eine Seite mit allen Themenelementen, die Sie verwenden oder in Zukunft verwenden werden, wie z , etc.
Verwenden Sie diese „Features“-Post-URL im PurifyCSS Online-Tool, um sicherzustellen, dass CSS für die häufig verwendeten Elemente enthalten ist.
Hit the CSS bereinigen Schaltfläche, sobald Sie alle relevanten URL-Typen von Ihrer Site zum PurifyCSS Online-Tool hinzugefügt haben.
Kopieren Sie das vom Tool generierte neue CSS und verwenden Sie es auf Ihrer Website. Stell sicher, dass du Sichern Sie die ursprüngliche style.css und andere CSS-Dateien in Ihrem Design, bevor Sie das neue von PurifyCSS generierte CSS ersetzen.
Spitze: Sie können entweder den integrierten WordPress Theme Editor verwenden, um die CSS-Dateien Ihres Themes zu bearbeiten, oder Sie können ein FTP/SFTP-Programm verwenden, um eine Verbindung zum Server herzustellen und Dateien bequem mit einem Notepad-Editor zu bearbeiten.