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.
Der Chrome Browser wird für die eigentliche Optimierung nicht benötigt. Mit dem Tool Coverage (bzw. Abdeckung in der deutschen Version) 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.
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.
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.
Wir öffnen uns das Terminal, zum Beispiel über die Spotlight Suche auf dem Mac (CMD + Leertaste). Einfach "Terminal" eingeben und "Enter" drücken.
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.
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 (Abdeckung) 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 (Befehl ausführen in der deutschen Version).
Hier suchen wir nach dem Begriff Coverage (Abdeckung) und drücken "Enter".
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.
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.
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.
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.
