Ein oft vernachlässigter Punkt bei der PageSpeed-Optimierung ist die Minimierung der CSS Dateien (minify CSS). Hier kann sehr schnell angesetzt und sofort sichtbare Performance-Verbesserungen erzielt werden.
Das Ziel der CSS Optimierung ist die Verringerung der Größe der einzelnen CSS-Dateien. Dabei gilt, je kleiner die einzelne CSS-Datei ist, desto schneller kann die einzelne CSS Datei geladen werden.
Da die meisten CSS Dateien benutzerfreundlich geschrieben sind, bestehen diese aus vielen Leerzeichen, Leerzeilen, Kommentaren und Zeilenumbrüchen. Wenn diese entfernt werden, verringert sich automatisch und sehr beachtlich die Größe der CSS-Dateien.
CSS minimieren Vorgehensweise:
Um die CSS-Dateien zu optimieren, bzw. Leerzeilen, Zeilenumbrüche und Kommentare zu entfernen, gibt es verschiedene Herangehensweisen. Die CSS Dateien können sowohl manuell als auch maschinell optimiert werden.
Beispiel-Optimierung einer CSS Datei
So sehen normalerweise viele CSS Dateien aus. Optisch gut strukturiert und mit kleinen Hinweisen für mögliche Änderungen versehen.
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
Größe 750bytes.
Als erstes werden die Kommentare und Leerzeilen, sowie Leerzeichen entfernt. Damit ergibt sich folgende CSS Datei:
@charset "UTF-8";
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
Größe 585bytes.
Zum Schluss werden noch die Zeilenumbrüche entfernt. Als Ergebnis steht der komplette CSS Code auf einer Zeile:
@charset "UTF-8";.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s}.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}
Größe 491bytes.
Allein in diesem sehr kleinen Beispiel könnte eine Reduzierung von 750bytes auf nur noch 491bytes durch das Entfernen von Leerzeilen, Umbrüchen und Kommentaren erzielt werden!
Einsatz von PHP und GZIP
Die nun minimierte CSS Datei lässt sich unter der Verwendung von PHP und GZIP noch weiter komprimieren. Lesen Sie mehr dazu unter CSS komprimieren.
Weitere Tricks und Tipps zur Minimierung von CSS Dateien
Mit ein paar kleinen Tricks lässt sich die Größe und damit die Ladezeit einer CSS Datei noch weiter minimieren, auch wenn alle Leerzeichen, Zeilenumbrüche und Kommentare bereits entfernt sind. Dabei muss jeder selbst für sich entscheiden ob diese Hinweise für ihn sinnvoll, umsetzbar und nach den möglichen Änderungen auch noch verständlich sind.
- Verwendet kurze Namen von CSS Klassen und ID’s. Z.B. an statt von div id=“main-container“ kann auch div id=“mcon“ oder ga div id=“mc“ verwendet.
- Farben verkürzen – z.B. an statt von background-color:#ffffff; kann auch background-color:#fff; geschrieben werden. Dies sind pro Farbangabe 3 Zeichen, die bei umfangreichen CSS Dateien ein paar Bytes ergeben können.
- Wer z.B. margin: 0px 0px 0px 0px; nutzt, der kann auch margin: 0; schreiben.
Minify CSS Tools
Um schnell große CSS Dateien zu optimieren, zu minimieren, könnt Ihr auch auf verschiedene kostenlose Onlinetools zurückgreifen. Da viele leider wieder viel zu schnell vom Markt verschwinden, sucht daher einfach nach css minify, css compressor oder css minimieren. Diese Tools nehmen Euch die Arbeit der Minimierung der CSS schnell und unkompliziert ab.
Kommentar verfassen