Anleitung PurgeCSS

Unbenutztes CSS erkennen und entfernen mit PurgeCSS unter macOS

Die Ladezeit einer Website oder Onlineshops ist ein wichtiger Faktor im Bereich Suchmaschinenoptimierung. Um die Ladezeit zu verbessern, ist der erste Schritt die Dateigrößen zu reduzieren. Müssen weniger Daten geladen werden, wird die Website natürlich auch schneller geöffnet. Viele "Out of the box Lösungen", wie zum Beispiel das Bootstrap Framework, enthalten CSS Anweisungen die auf der Seite gar nicht benötigt bzw. verwendet werden. Hier sind oft Einsparungen an der Dateigröße jenseits der 90% möglich.

In dieser Anleitung zeige ich Ihnen wie Sie mit Hilfe der Google® Chrome DevTools und PurgeCSS die unbenutzen CSS Anweisungen erkennen und anschließend automatisch entfernen. PurgeCSS ist ein mächtiges Tool mit vielen Möglichkeiten. Hier zeige ich Ihnen den einfachsten Wege um unnötige CSS Anweisungen mit PurgeCSS zu entfernen. Weitere Informationen und Anleitungen zu PurgeCSS finden Sie auf der Herstellerseite unter https://www.purgecss.com/. Die Anleitung zeigt als Beispiel die Optimierung der CSS Datei bootstrap.css für das Bootstrap Framwork unter macOS.

WICHTIGER HINWEIS: Legen Sie auf alle Fälle ein Backup der zu optmierenden CSS Datei an! PurgeCSS ist ein wirklich gutes Tool, durch die automatisierte Bereinigung kann es aber auch zu Fehlern kommen. Man sollte schon etwas Erfahrung mitbringen, wenn man sich an solche Optimierungen wagt. Es muss auch erwähnt werden, dass die Optimierung für eine Seite, in unserem Beispiel die buttons.html, erfolgt. Für andere Seiten Ihrer Homepage werden eventuell andere CSS Anweisungen verwendet. Verwenden Sie die jeweilige CSS Datei global auf Ihrer Seite, müssen Sie nach der Optimierung testen ob die Darstellung auf anderen Seiten eventuell beeinträchtigt ist. Ist das der Fall, müssen Sie für die jeweilige Seite(n) eine seperate Optimierung der CSS Datei durchführen.


Sie wollen die CSS Optimierung von einem Profi durchführen lassen?

Hier geht es zu den Kontaktmöglichkeiten



Was wir brauchen

  • Aktueller Google® Chrome Browser zur Analyse (optional)
  • Node.js® - JavaScript-Laufzeitumgebung
  • PurgeCSS
  • Die jeweilige HTML Datei und die zu optimierende CSS Datei

Schritt 1: Die benötigten Tools installieren


1. Google® Chrome installieren (optional)

Der Chrome Browser wird für die eigentliche Optimierung nicht benötigt. Mit dem Tool "Coverage" der Chrome DevTools können wir aber genau analysieren welche CSS Anweisungen unnötigt sind und wie viel wir bei den CSS Dateien einsparen können. Hier geht es zum Download.


2. Node.js installieren

Damit wir PurgeCSS installieren und benutzen könnnen, brauchen wir die JavaScript-Laufzeitumgebung Node.js. Die Installation auf dem Mac ist ganz simpel. Wir laden uns die aktuelle .pkg Datei unter https://nodejs.org/de/ herunter und installieren Node.js.


3. PurgeCSS installieren

Bei PurgeCSS haben wir verschiedene Möglichkeiten zur Installation. Bei dieser Anleitung beschränken wir uns auf die Installation und Bedienung über das CLI (command-line interface), also dem Terminal von macOS. Für die Installation ist kein Download nötig, einzig Node.js muss installiert sein.


a. Terminal öffnen

Wir öffnen uns das Terminal, zum Beispiel über die Spotlight Suche auf dem Mac (CMD + Leertaste). Einfach "Terminal" eingeben und "Enter" drücken.


macOS Terminal starten


b. PurgeCSS installieren

Jetzt installieren wir PurgeCSS indem wir den Befehl

sudo npm i -g purgecss

im Terminal eingeben. Die Installation muss mit Admin Rechten (sudo) erfolgen, da es sonst zu Fehlermeldungen aufgrund fehlender Berechtigungen kommt.


PurgeCSS im Terminal installieren

Schritt 2: Analyse


Analyse ungenutzter CSS mit Google® Chrome Coverage

Nachdem wir alle Tools installiert haben, geht es an die Optimierung. Die große Frage lautet "Wie viel können wir bei den einzelnen Dateien einsparen?". Für die Analyse nutzen wir das Tool "Coverage" der Chrome DevTools. Wir öffnen also die Webseite mit dem Google® Browser und die DevTools durch drücken von "F12" auf der Tastatur. Anschließend klicken wir auf die 3 Punkte ganz rechts und wählen den Punkt "Run Command".


Chrome DevTools Coverage suchen

Hier suchen wir nach dem Begriff "Coverage" und drücken "Enter".


Chrome DevTools Coverage öffnen

Es öffnet sich ein zusätzliches Fenster. Hier wählen wir dann den Reload Button. Dadurch wird die Seite neu geladen und die Aufzeichnung wird gestartet.


Chrome DevTools Coverage aufzeichnen

Im unteren Fenster (1) sehen wir welche Dateien geladen werden und die Datenmenge bzw. den Prozentsatz der ungenutzten CSS. Bei unserer bootstrap.css Datei können wir 96% einsparen. Im oberen Fenster (2) sehen wir den Inhalt der Datei. Die mit einem roten Balken gekennzeichneten CSS Anweisungen sind unnötig, die mit einem grünen Balken gekennzeichneten CSS Anweisungen werden benötigt.


Chrome DevTools Coverage Ergbenis

Schritt 2: Unbenutzte CSS entfernen


Mit Purge CSS werden nun die unbenutzten CSS Anweisungen automatisch entfernt.

Falls Sie das Projekt nicht lokal gespeichert haben, laden Sie als Erstes die beiden Dateien vom Webserver auf Ihren Rechner. In unserem Beispiel also die HTML Datei "buttons.html" und die CSS Datei "bootstrap.css". Speichern Sie die Dateien in einen eigenen Ordner.

(1) Wir öffnen im Terminal nun den Ordner in dem sich unsere zwei Dateien befinden. Wir legen noch einen eigenen Ordner (out) für die Ausgabe der minimierten Datei an:

mkdir out

Der allgemeine Befehl für PurgeCSS lautet:

purgecss --css "css Datei" --content "Inhaltsdatei" --out "Ausgabe Ordner"

(2) In unserem Beispiel lautet der Befehl also:

purgecss --css bootstrap.css --content buttons.html --out out

(3) Nach nicht mal einer Sekunde ist die Optimierung auch schon abgeschlossen. Wie am Screenshot ersichtlich, hat sich die Dateigröße unserer bootstrap.css Datei von 140KB auf 8KB reduziert. Ein wirklich sehr gutes Ergebnis.


PurgeCSS Befehl ausführen

Jetzt laden wir die optimierte CSS Datei wieder auf unseren Webserver hoch, prüfen die Darstellung der Seite und sehen uns das Ergebnis noch einmal mit den DevTools an.

Et voilà, die Darstellung der Seite hat sich nicht verändert und die Dateigröße wurde erheblich reduziert. Man sieht das noch mehr Einsparungen möglich wären. Auch PurgeCSS ist nicht perfekt und man könnte hier noch manuell nachbessern. Aber unsere automatisierte Optimierung kann sich auf alle Fälle sehen lassen.


Chrome DevTools Coverage Ergebnis

Suchmaschinenoptimierung für Onlineshop und Website

Diese Webseite verwendet Cookies. Durch die Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Datenschutzinformationen