Web-Performance #2: CSS und JavaScript optimieren

Zur Optimierung der Performance einer Website helfen bereits kleinste Änderungen bezüglich CSS und JavaScript. In diesem Artikel zeige ich euch einfache Möglichkeiten zur Verbesserung auf.

Auslagern von Styles und Scripts

Browser cachen, soweit in den Einstellungen des Browsers nicht anders angegeben, eine Seite. Das wiederrum bedeutet, dass bereits geladene Inhalte nicht immer wieder erneut angefragt werden müssen.

Hat man innerhalb einer Website nun CSS und JavaScript Blöcke, die man auf jeder einzelnen Seite verwendet, muss der entsprechende Code auch immer wieder mit geladen werden. Daher sollte man CSS und JavaScript auslagern.

Position von CSS und JavaScript Tags

Es ist erwiesen, dass man JavaScript-Dateien erst am Ende vom BODY in einer Seite angeben sollte. Allein die Umstrukturierung vom Kopfbereich hin zu dem Ende vom BODY-Tag bringt bereits mehrere Sekunden.

CSS-Dateien hingegen gehören in den HEAD-Bereich einer Website.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<title>Mein Titel</title>
  5. 		<link rel="stylesheet" type="text/css" href="pfad/css/screen.css" media="screen" />
  6. 	</head>
  7. 	<body>
  8. 		<h1>Meine &Uuml;berschrift</h1>
  9. 		<p>Mein Inhalt</p>
  10. 		<script type="text/javascript" src="pfad/js/meinscript.js"> </script>
  11. 	</body>
  12. </html>

mehrere Dateien mit nur einem HTTP-Request

Beim Laden von mehreren Dateien werden auch mehrere HTTP-Requests benötigt. Dies kann der Performance einer Website ungünstig gegenüberstehen. Legt man diese Dateien in einer einzigen zusammen, kann man dadurch bereits Sekunden gewinnen.

Unter dem nächsten Punkt findest du unter anderem einen Lösungsansatz mit PHP für dieses Problem.

Komprimieren von Dateien

Zum Komprimieren von JavaScript und CSS eignet sich die PHP-Klasse Minify, die auf Google-Code zu finden ist.

Minify entfernt nicht nur Kommentare und Leerzeichen, sondern kann die Dateien auch GZIP komprimiert ausgeben. Entstandene komprimierte Dateien werden zudem gecacht.

Konfiguration

Bei Minify kann man einige Einstellungen in der config.php vornehmen. So kann man zum Beispiel einen Debug-Mode aktivieren, bei dem mehrere Dateien zwar zusammengeführt, aber nicht komprimiert werden.

Ein Fehlerprotokoll für FirePHP (Firefox AddOn für die Firebug Konsole) kann mittels $min_errorLogger aktiviert werden.

Als Beispiel nun eine Konfigurationsdatei. Diese könnte entsprechend in einer XAMPP-Umgebung liegen. Weitere Informationen zur Konfiguration befinden sich in der mit heruntergeladenen Konfigurationsdatei.

  1. <?php
  2. $min_allowDebugFlag = false; // Debug-Mode
  3. $min_errorLogger = false; // Fehlerprotokoll für FirePHP
  4. $min_enableBuilder = false; // Manuell Dateien komprimieren
  5. $min_cachePath = 'C:\\xampp\\htdocs\\cache'; // Pfad, in dem die Cache-Dateien abgelegt werden
  6. $min_documentRoot = 'C:\\xampp\\htdocs'; // Hauptpfad, in dem auch der min Ordner liegt
  7. $min_cacheFileLocking = true; // auf false stellen, wenn das Dateisystem NFS ist
  8. $min_serveOptions['bubbleCssImports'] = false; // @import in CSS Dateien: Fehlermeldung werfen oder alle @import Befehle an den Anfang stellen
  9. $min_serveOptions['maxAge'] = 1800; // maximales Alter des Browser-Caches in Sekunden
  10. $min_serveOptions['minApp']['groupsOnly'] = false; // Minify akzeptiert bei true nur noch Gruppen in den Parametern
  11. $min_serveOptions['minApp']['maxFiles'] = 10; // maximale Anzahl an Dateien, die bei Angabe von einzelnen Dateien komprimiert werden können
  12. $min_symlinks = array(); // Bei Pfad-Problemen können hier mehrere mögliche Pfade angegeben werden
  13. $min_uploaderHoursBehind = 0; // Fehlerbehebung von hochgeladenen Dateien von einem Windows zu einem Nicht-Windows-System
  14. $min_libPath = dirname(__FILE__) . '/lib'; // Pfad zum Minify lib Ordner
  15. ini_set('zlib.output_compression', '0'); // Versuche Ausgabe-Kompression zu deaktivieren

einzelne Dateien komprimieren

Zum Komprimieren von einer JavaScript- oder CSS-Datei muss man lediglich das HTML anpassen:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>Mein Titel</title>
  5.         <link rel="stylesheet" type="text/css" href="pfad/min/?f=pfad/screen.css" media="screen" />
  6.     </head>
  7.     <body>
  8.         <h1>Meine &Uuml;berschrift</h1>
  9.         <p>Mein Inhalt</p>
  10.         <script type="text/javascript" src="pfad/min/?f=pfad/jquery.js,pfad/meinscript.js"> </script>
  11.     </body>
  12. </html>

In diesem Beispiel werden eine CSS- und zwei JavaScript-Dateien angegeben. Wie man beim JavaScript sehen kann, werden mehrere Dateien einfach per Komma getrennt.

Gruppieren

Möchte man auf einer Website eine mit JavaScript unterstützte Bildergalerie nutzen oder hat mehrere CSS-Dateien, um den Überblick zu wahren, sollte man diese Dateien nach Möglichkeit als eine Datei an den Browser senden.

Mit Minify geht das einfach und schnell. Hierzu muss man lediglich die Dateien mit einem Komma getrennt angeben (s. oben) oder die groupsConfig.php anpassen.

Beispielsweise könnte die Gruppen-Datei so aussehen:

  1. <?php
  2. return array(
  3.     'mygallery' => array(
  4.         '//js/jquery.js',
  5.         '//js/jquery.gallery.js'
  6.     )
  7. );

Gruppen läd man im HTML mit dem g-Parameter. So wird dann aus dem längeren Aufruf der einzelnen JavaScript-Dateien nur noch:

  1. <script type="text/javascript" src="pfad/min/?g=mygallery"> </script>

Fazit

Die Optimierung von CSS und JavaScript ist damit natürlich noch nicht vollständig. Man denke da an verschiedenste Möglichkeiten, den Code an sich zu optimieren.

Auf jeden Fall haben mir die oben genannten Methoden schon einige Sekunden eingebracht.

von mona am 14.03.2010

Tweet this bookmark on delicious

Kommentare

von Christian am 30.06.2010 um 10:59

Was auch hilft ist zb. der Packer von Dean 
Edwars: 


http://dean.edwards.name/pack-
er/

13k JS ließen sich damit auf ca. 7kb komprimieren. Für CSS gibt\&#39;s 
ähnliche Tools, wobei diese unterschiedliche 
Ergebnisse liefern. Mein Favorit in dem Punkt ist 
http://www.csscompressor.com/

-
Allerding sollte man sich die unkomprimierten Sourcen zusätzlich 
mitspeichern.

Grüße
-
;
Christia

von Jonahex am 16.12.2010 um 03:01

I agree with the post above and I will get more 
information from google.