Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Wer in einem Web-Projekt viele verschiedene CSS- und JavaScript-Bibliotheken verwendet, wird feststellen, dass sich im Quellcode eine Menge HTTP-Anfragen anhäufen können:

...

Die feine Art ist das nicht. Der Browser muss so bei jedem Seitenaufruf jede einzelne Datei abklappern. Je nach Internet-Leistung des Besuchers kann das eine Weile dauern. Und jede Millisekunde, die der Nutzer warten muss, ist eine Gefahr, dass dieser die Seite wieder verlassen will.

In diesem Artikel möchte ich ein paar Tipps geben, wie ihr CSS-Dateien kombinieren könnt, sodass der Browser nur noch jeweils eine Datei abfragen muss.

Los geht's: CSS-Dateien mit LESS verbinden

LESS ist ein CSS Pre-Prozessor. LESS-Dateien beinhalten erweiterten CSS-Code, welcher anschließend durch einen Compiler zu einer normalen CSS-Datei kompiliert wird.

LESS-Dateien können mehrere LESS-Dateien importieren. Die kompilierte CSS-Datei sieht dann so aus, als hätte ich einfach die einzelnen Codes hintereinander eingefügt.

Beispiel

./less/main.less

body { font-family: "Arial", sans-serif; font-size: 14px; color: #000; }

./less/home.less

#nav li#home { font-weight: bold; background-color: orange; }

./less/style.less

@import url("main.less"); @import url("home.less");

LESS-Compiler generiert CSS

./css/style.css

body { font-family: "Arial", sans-serif; font-size: 14px; color: #000; } #nav li#home { font-weight: bold; background-color: orange; }

CSS-Datei minimiert

./css/style.min.css

body{font-family:Arial,sans-serif;font-size:14px;color:#000}#nav li#home{font-weight:700;background-color:orange}

Bei vielen CSS-Dateien macht das auf jeden Fall Sinn. Für viele Entwicklungsumgebungen und Code-Editor gibt es passende Plugins, welche aus LESS-Dateien automatisch CSS-Dateien generieren. Unter anderem für Brackets, Visual Studio oder auch NetBeans.

In dem Beispiel habe ich die style.css außerdem noch minimiert (zu: style.min.css). So schrumpft auch nochmal die Größe der End-Datei. Auch hierfür gibt es entsprechende Plugins. Mit CSS Minifier geht das auch online.

Vorher / nachher

Wenn wir das auch noch mit unseren CSS-Frameworks machen wird aus:

schnell das hier:

Was beachtet sei: Drch die Kombinierung ändern sich auch die Verweise. Bei Bootstrap bespielsweise müssen dann die Verweise zu den Font-Dateien geändert werden. Öffne dafür die bootstrap.less und ersetze alle ../fonts/ durch ../lib/bootstrap/fonts/.

JavaScript-Dateien kombinieren

Gut, die Stylesheets haben wir somit auf eine Datei reduziert. Doch auch bei den JavaScript-Dateien auf einer Seite kann sich einiges ansammeln.

In einem seperaten Artikel möchte ich darauf eingehen, JavaScript-Dateien zu kombinieren. Der Link wird dann hier angefügt.