[Teil 2] Die Website-Geschwindigkeit: CSS optimieren!

Im ersten Teil dieser Artikelserie über die Website-Geschwindigkeit, bin ich hauptsächlich auf Analysetools eingegangen, mit denen wir Einblicke in Seitenaufbau, Ladegeschwindigkeit und somit den genrellen Speed unseres Blogs kriegen konnten.

In diesem Artikel soll es dann aber endlich ein wenig konkreter werden und ich möchte schauen, wie wir die eigene CSS-Datei und somit die Website-Geschwindigkeit optimieren können.

Das Cascading Style Sheet, kurz CSS, ist auf fast jeder Seite zu finden und ist enorm hilfreich, da es dem Browser hilft, Informationen zu bestimmten und festgelegten Elementen aus nur einer einzigen Datei auszulesen.

Würde man das kleine Ding schlicht und ergreifend entfernen, müssten bei jedem einzelnen Seitenaufruf alle relevanten Informationen neu geladen werden und das wäre natürlich eher kontraproduktiv für die Ladegeschwindigkeit einer Seite.

Somit ist das Optimieren einer CSS-Datei eigentlich eher Feintuning, davon ausgehend, dass diese selbst schon eine zusammengefasste Optimierung darstellt.

Die Website-Geschwindigkeit: Wie optimiere ich die CSS-Datei?

Ich möchte diesen Blog-Artikel in zwei Blöcke aufteilen, anfangs schauen wir einfach, welche Möglichkeiten wir selbst haben, welche Kleinigkeiten zu vermeiden sind und danach werfen wir einen Blick auf ein paar nützliche Helferlein, die uns einen Großteil der Arbeit abnehmen können.

Was können wir selbst tun?

Sinnvoll ist es in einem ersten Schritt, die eigene CSS-Datei nach verteiltem Code abzusuchen und diesen einfach zusammenzufassen. Beispielsweise können wir hier:

margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;

lieber eine Kurzform wählen:

margin: 5px 10px 5px 10px;

Hierbei gilt, dass die erste Angabe oben, die zweite rechts, die dritte unten und vierte links beschreibt. Ich bin dabei anfangs immer ein wenig durcheinander gekommen, aber das ist wohl einfach eine Frage der Zeit und Übung.

Ein ähnliches Beispiel finden wir bei der Vergabe von Klassen und manchmal fummeln wir lange am eigenen Blog rum und blasen so unnötig den Code auf. Beispielsweise können wir:

<p class=“bumsfallera“>Ein Bumsfallera-Text</p>
<p class=“bumsfallera“>Zweiter Bumsfallera-Text</p>

Einfach zu:

<div class=“bumsfallera“>
<p>Ein Bumsfallera-Text</p>
<p>Zweiter Bumsfallera-Text</p>
</div>

ändern und auch auf diesem Weg ein paar Kleinigkeiten bereinigen. Diese beiden einfachen Maßnahmen können bei einer überdimensionierten CSS-Datei jede Menge bewirken, meine ich.

Außerdem sollten wir auch Leerstellen vermeiden, um die ganze CSS-Datei nicht unnötig in die Länge zu ziehen. Dabei kann man fast alles wegkürzen und letzten Endes einen CSS-Brei produzieren, der ein wenig unübersichtlich daherkommt.

Dennoch sollte bedacht werden, dass das Ganze vielleicht auch in drei Jahren nochmals überarbeitet werden sollte und eine starke Verknappung zwar förderlich für die Dateigröße, aber nicht unbedingt für die Benutzerfreundlichkeit ist.

Doch ist es damit natürlich nicht getan, doch viele Tipps und Tricks zum Optimieren der CSS-Datei sind natürlich eher individueller Natur.

Was für Programme optimieren die CSS-Datei?

Nur ein kleiner Hinweis, bevor es zu irreparablen Schäden im eigenen Blog kommt: Sichert, bevor ihr auch nur irgendein Tool zur Optimierung verwendet, unbedingt die Original-Datei und bedenkt dabei, dass Veränderungen im CSS oft erst nach dem Leeren des Cache sichtbar werden und sonst erst nach einer Weile für Euch ersichtlich sind.

Das heißt, dass ein Tool den Code zwar verkürzen, optimieren oder verändern kann, aber vielleicht Schäden hervorgerufen hat, die auf den ersten Blick gar nicht ersichtlich sind.

  • CleanCSS

Ich verwende hauptsächlich CleanCSS, um Fehlerquellen und Optimierungspotential in meiner CSS-Datei auszumachen. Hier haben wir unzählige Einstellungsmöglichkeiten, um den eigenen Code sinnvoll zu untersuchen und gegebenenfalls eben zu optimieren.

  • CSS-Validator

Auch dieses Tool scheint mit recht hilfreich und ich nutze es meistens parallel zu CleanCSS, um Fehlerquellen aufzuspüren. Wahrscheinlich würde auch lediglich die ein oder andere Variante ausreichen, aber irgendwie bin ich immer ein wenig skeptisch und sichere mich doppelt ab…

Die Website-Geschwindigkeit: CSS optimieren – Fazit

Das Optimieren des eigenen CSS-Codes ist natürlich eine ganz schöne Quälerei und braucht auch ein wenig Zeit. Vor allem weil manche Fehler immer und immer wieder gemacht werden und man sich meisten nur selbst im Weg steht. Jedenfalls geht es mir so.

Deshalb muss vielleicht nicht das Optimum herausgeholt werden, aber die gröbsten „Vergehen“ würde ich immer beseitigen.

Außerdem habe ich überlegt, ob man eine Größe nennen kann, wie groß die optimale CSS-Datei sein sollte, bin aber zu dem Schluss gekommen, dass das wohl wenig Sinn macht und es effektiver ist, einfach zu versuchen, das Beste aus dem eigenen Blog zu holen.

Die CSS-Datei dieses Blogs ist beispielsweise gerade rund 24KB groß und ich denke, dass mir dieses Ergebnis derzeitig reicht und trotzdem mache ich mich ab und an auf die Suche und stelle mir die Frage, ob ich nicht noch irgendwo an der CSS-Datei arbeiten könnte, um die Website-Geschwindigkeit zu steigern.

5 Meinungen

  1. Thomas Rith12-02-2011

    Danke für den guten Tipp… :) Ich konnte meine CSS von 44k auf immerhin 35k runterschrauben… Hab es zuerst durch den Validator geschickt und dann CleanCSS genutzt.

    Seite sieht aus wie vorher, nur weniger KB und überflüssiger Mist wurde entfernt… :)

    Jetzt muss ich nur noch finden, wo der Misttext von „Kommentar abschicken“ steckt, damit ich da mal eine „vernünftige“ Länge hinbekomme, damit es nicht so doof aussieht… Dachte erst in der .po Datei. Aber irgendwie nimmt er die Änderung nicht… :( Nun ja…

    Schöner Artikel… Gleich mal zwitschern… 😉

    • Jonas G.12-02-2011

      Der Text sollte in der comments.php zu finden sein. Dort sollte es den Eintrag value geben, der den Inhalt Deiner Box bestimmt :)

      Beste Grüße

  2. Thomas Rith12-03-2011

    Kann es nicht finden. ^^ Weder in allen Dateien noch in der Datenbank. Den Wert in der .po-Datei habe ich schon geändert, aber das zeigt bisher keine Wirkung… ^^ Verstehe es nicht ganz, wie das da hinkommt. Im Notfall werde ich es einfach „hart löten“… :)

  3. Björn12-14-2011

    Was hat der zweite Vorschlag, Absätze mit einem Div zu umfassen statt eine Class zu vergeben mit Einsparungen im CSS zu tun? Abgesehen davon wäre die Vergabe einer id nach einer Vornahme dieser hypothetischen Änderung sinnvoller.

  4. Jonas G.01-18-2012

    Hallo Björn,

    die Frage ist natürlich berechtigt und vielleicht liegt es an der verkürzten Darstellungsform, mehr ging es mir darum, dass beim Zusammenfassen de facto Zeichen eingespart werden können, was natürlich bei mehreren deutlicher geworden wäre.

    Grüße