Ungenutztes CSS einfach entfernen
Wenn Sie eine Website mit einem CSS-Framework wie Bootstrap erstellen, verwenden Sie nur einen Teil des Frameworks und unbenutzte CSS-Stile werden berücksichtigt.
PurgeCSS entfernt unbenutzte Selektoren aus Ihrem CSS, was natürlich zu kleineren CSS-Dateien führt.
Unused CSS finder
https://www.jitbit.com/unusedcss/
Der Unused CSS finder durchsucht Ihre Website (nach allen internen Links), analysiert alle Seiten und stellt eine Liste der unbenutzten CSS-Selektoren in Ihren Stylesheets bereit.
PurifyCSS (für Entwicklungsumgebungen)
https://github.com/purifycss/purifycss
PurifyCSS ist ein kostenloses Tool, das unbenutztes CSS aus Ihren HTML-, PHP-, JavaScript- und CSS-Dateien entfernt, bevor Sie live gehen.
Auf der anderen Seite müssen Sie manuell festlegen, welche Dateien einzeln gescannt werden sollen, was den Prozess etwas mühsam macht. Anstatt Ihre Originaldateien zu ändern, gibt PurifyCSS eine neue Datei mit dem optimierten CSS aus. Da PurifyCSS nicht mit Live-Websites funktioniert, müssen Sie es in einer Entwicklungsumgebung verwenden. Sie können PurifyCSS während der Entwicklung verwenden und später auf UnusedCSS aktualisieren.
PurifyCSSonline (für Live-Webseiten)
PurifyCSS ist ein kostenloses Onlinetool
Sie müssen manuell festlegen, welche Dateien einzeln gescannt werden sollen, was den Prozess etwas mühsam macht – allerdings funktioniert die Online-Version mit Live-Webseiten.
UnCSS
https://github.com/giakki/uncss
Der Prozess, mit dem UnCSS die nicht verwendeten Regeln entfernt, lautet wie folgt:
Die HTML-Dateien werden von jsdom geladen und JavaScript wird ausgeführt.
Alle Stylesheets werden von PostCSS analysiert.
document.querySelector filtert Selektoren heraus, die nicht in den HTML-Dateien enthalten sind.
Die restlichen Regeln werden zurück in CSS konvertiert.
Hinweis:
UnCSS kann nicht auf Nicht-HTML-Seiten wie Vorlagen oder PHP-Dateien ausgeführt werden. Wenn Sie UnCSS mit Ihren Templates ausführen wollen, sollten Sie HTML-Beispielseiten aus Ihren Vorlagen erstellen und diese generierten Dateien mit Uncss ausführen oder führe auf einem lokalen Live-Dev-Server.
UnCSS führt nur das Javascript aus, das beim Laden der Seite ausgeführt wird. Es kann JavaScript nicht verarbeiten (und kann es auch nicht), das auf Benutzerinteraktionen wie Schaltflächenklicks ausgeführt wird. Sie müssen die Option ignore verwenden, um Klassen beizubehalten, die durch JavaScript bei Benutzerinteraktionen hinzugefügt werden.
ReduceCSS
https://smartit.ninja/reducecss.html
Dieses kostenfeie Tool scannt eine Seite, wenn man die URL der Seite und die URL der gewünschten CSS-Datei einfügt.
Manuelle Bereinigung
Hier gibt es eine gute Anleitung für manuelle Bereingung in Google Chrome:
http://www.labnol.org/internet/remove-unused-css/28635/
Google Chrome Entwicklertools hat einige großartige Funktionen, die Ihnen helfen können, ungenutzte CSS zu erkennen. Mit der Audit-Funktion können Sie alle CSS-Selektoren anzeigen, die von der aktuellen Webseite nicht verwendet werden. Diese Funktion ist wirklich praktisch, aber es kann mühsam sein, jede Seite manuell durchzugehen und das unbenutzte CSS zu entfernen.
Eine Schritt für Schritt-Anleitung gibt es hier.
Alternative Methoden zum Entfernen von CSS
Viele Web-Auditing-Tools bieten CSS-Optimierung als Teil ihrer Dienstleistungen an. Neue eigenständige Tools zum Entfernen von unbenutztem CSS kommen ebenfalls ständig auf den Markt, also zögern Sie nicht zu experimentieren. Mozilla arbeitet derzeit an einem neuen Tool namens CSS Coverage, um Entwicklern bei der Optimierung ihres CSS zu helfen.
Ein Wort der Warnung über das Entfernen von unbenutztem CSS
Die oben beschriebenen Tools sind nicht perfekt. Es gibt einige verschiedene Methoden zur Identifizierung von Rouge-CSS-Selektoren; jedoch kann es schwierig sein, Selektoren mit Elementen im DOM abzugleichen, wenn Sie Elemente haben, die von APIs und Skripten von Drittanbietern abhängen. Wenn Sie versuchen wollen, unbenutzte CSS manuell zu entfernen, dann müssen Sie besonders vorsichtig sein, damit Sie Ihre Anwendung nicht versehentlich lahmlegen, indem Sie etwas Wichtiges löschen.
