Google PageSpeed – CSS reduzieren

CSS reduzieren

In der Reihe Bessere Performance für ein höheres Google Ranking erläutern wir einzelne Faktoren des Google PageSpeed. Google führte den Google PageSpeed ein Webseiten nach Kriterien auf ihre Performance zu beurteilen. Neben der Performance gilt der Google PageSpeed gilt seit einigen Jahren als zusätzlicher Rankingfaktor. Je mehr Maßnahmen des Google PageSpeeds erfolgreich umgesetzt werden, desto schneller wird die Webseite ausgeliefert und dem Besucher zur Verfügung gestellt. Im heutigen Beitrag widmen wir uns dem Punkt CSS reduzieren. Wir erläutern inwiefern sich das CSS einer Webseite reduzieren lässt und welche Auswirkungen dies hat.

Was bringt es, wenn ich mein CSS reduziere?

CSS-Dateien werden beim Aufruf deiner Webseite vom Besucher heruntergeladen, damit der Browser deine Seite korrekt darstellen kann. Je größer deine CSS-Dateien sind, desto länger dauert die Übertragung zum Besucher. Die Größe von CSS-Dateien wird sehr oft unterschätzt. Sie kann bis zu 30% des übertragenen Traffics ausmachen.

Oftmals enthalten Stylesheets viel zu viele Informationen und unnötige Anweisungen. Diese blähen deine CSS-Dateien unnötigerweise auf. Die Reduzierung deines CSS-Stylesheets kann also dazu beitragen die Performance deiner Webseite zu erhöhen. Du hast zwei Möglichkeiten deine CSS-Datei zu verkleinern.

Entferne unnötige CSS-Anweisungen

In den meisten Fällen entwickeln sich CSS-Dateien über einen längeren Zeitraum. Neue Anweisungen kommen hinzu, Attribute werden gesetzt. Ans Aufräumen von CSS Dateien denkt dabei häufig aber niemand. Das Entfernen von nicht verwendeten CSS-Anweisungen kann dein CSS reduzieren. Entferne daher alle nicht benötigten Anweisungen aus deiner CSS-Datei.

Wer sauberes CSS schreibt spart dadurch ebenfalls einiges an CSS-Code. Wenn du dir daher unsicher bist ob du wirklich gut CSS kannst, solltest du es zuerst richtig lernen.

Reduziere dein CSS automatisch

Während das Entfernen unnötiger CSS-Anweisungen aus deinen CSS-Dateien sehr aufwändig und nur für erfahrene Anwender geeignet ist, kann diesen Tipp wirklich jeder durchführen.

Zur besseren Lesbarkeit enthalten deine CSS-Dateien Leerzeilen, Leerzeichen, Kommentare und Absätze. Diese sind für den Browser zur Interpretation aber unnötig. Hier lässt sich einiges an Dateigröße reduzieren. Man spricht von CSS Minify. 

Die Reduzierung deines CSS musst du natürlich nicht von Hand machen. Dafür gibt es Tools.

Mache immer ein Backup deiner aktuellen – nicht reduzierten – CSS-Datei.

Google Pagespeed zum Reduzieren von CSS

Über das Google Chrome Plugin Google Pagespeed kann sich eine optimierte Version der CSS-Datei direkt runterladen. Mache ein Backup deiner alten CSS-Datei und überschreibe sie mit der von Google geladenen.

Nutze Online-Tools zum Reduzieren von CSS

Weitere Tools zum CSS reduzieren gibt es im Internet. Die Webseite CSS Minifier bietet ein Tool um dein CSS zu reduzieren.

WordPress-Plugins zum CSS reduzieren

Etliche WordPress Plugins zum CSS reduzieren stehen im WordPress-Plugin Repository zur Verfügung. Ich selbst nutze das Plugin W3 Total Cache. Das Plugin ist sehr mächtig und kompliziert einzustellen. Dafür enthält es auch jede Menge nützlicher Funktionen. Unter anderem bietet es dir an deine CSS-Dateien automatisch zu verkleinern.

Fazit

Einfacher kann man keine Datenlast sparen. Nutze die Vorteile und reduziere dein CSS. Bearbeite immer die gut lesbaren Backups deiner CSS-Dateien. Jedesmal nachdem du eine Änderung an einer CSS-Datei gemacht hast musst du diese nur erneut verkleinern und hochladen.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.