JavaScript & CSS Performance

In den letzten Jahren zeichnet sich ein Trend bei JavaScript ab: Die Bibliotheken und Frameworks werden immer umfangreicher und bestehen aus immer mehr verschiedenen Dateien. Darunter leidet die Performance enorm, denn für jede angefragte JS oder CSS-Datei muss ein neuer HTTP-Request gestartet werden. Einige Webanwendungen, die zum großen Teil aus JS bestehen bekommen da allerdings irgendwann richtige Probleme, wenn 400Kb JS-Code bei jedem Aufruf geladen werden müssen. Aber wie kann man diesem Problem entgegenwirken? Die erste Möglichkeit wäre, alle JS-Dateien zu einer zusammenzufassen, aber das macht die Wartung des Codes unerträglich. Ich möchte deshalb auf eine neue Möglichkeit eingehen, die der Performance einen deutlichen Schub verpassen wird. Bemerkbar macht sich das aber wirklich nur bei größeren JS-Anwendungen ab 100Kb aufwärts.

Wie schon beschrieben sollte man den JS-Code möglichst zusammenfassen, damit weniger HTTP-Requests versendet werden müssen. Um aber dem Wartungsproblem aus dem Weg zu gehen, lassen wir die Dateien einfach getrennt und überlassen PHP (oder einer anderen serverseitigen Sprache) das einsammeln der einzelnen Dateien. Dem PHP-Skript können wir so einfach die Dateiennamen übergeben, die geladen werden sollen und wir haben die HTTP-Requests auf einen zusätzlichen reduziert.

<script src="/js/index.php?js=jquery/jquery.js,jquery/jquery-ui.js,prototype.js" type="text/javascript"></script>

Aber das ist noch nicht alles: Mit PHP haben wir zusätzlich noch die Möglichkeit, den JS-Code mit GZIP zu komprimieren. So lässt sich aus 300Kb mal eben 80Kb machen. Das sorgt nicht nur für weniger Traffic auf dem Server, sondern auch der Client-Browser kann den Code schneller verarbeiten.
Wichtig: Unbedingt Dateien und Verzeichnisse überprüfen, damit Unbefugte keinen Zugriff auf andere Dateien haben.

Das selbe lässt sich natürlich auch mit CSS-Dateien umsetzen. Man sollte nur darauf achten, dass der Header vom PHP-Skript entsprechend angepasst wird (z.b. text/css oder text/javascript).

<link href="/css/index.php?css=style.css,jquery-ui.css" rel="stylesheet" type="text/css" media="all"/>

Und noch ein Tipp: Wenn man den JS-Code vorher noch mit Shrinksafe oder einem anderen Kompressor-Tool verkleinert, lässt sich die Performance nochmal maximieren.

Wenn Jemand Interesse an dem JS- und CSS-Sammler hat, ich hätte nichts dagegen, das Skript abzugeben.

UPDATE 26.01.2010:
Hier geht’s zu Teil II «