Die Direktive von Google für das Jahr 2010 ist einfach, plakativ und leicht verständlich. Das Zauberwort heißt Performance.

Wie schon seit längerem bekannt ist will Google die Webentwickler und Webdesigner dazu erziehen performante Seiten zu entwickeln, welche schnell vom Webserver an den Client ausliefert werden. Der User ist halt nicht gewillt ewig lange auf eine Seite zu warten Usability steht an oberster Stelle. Denjenigen unter euch, die auch die Webmaster-Tools von Google benutzen, wird ja schon aufgefallen sein, dass Google unter dem Punkt Google-Labs den Menüpunkt Website-Leistung bereitgestellt hat. Hier könnt Ihr überwachen wie schnell Eure Seite geladen wird und wie dieser Wert im Schnitt zum gesamten Internet aussieht.

Der Performance-Gedanke hat trotz Highspeed-DSL-Breitbandverbindungen, welche immer mehr zur Selbstverständlichkeit werden, durchaus seine Berechtigung. Denken wir nur einmal an langsame Handy-Verbindungen mittels GPRS oder an die noch immer am weitesten verbreitete 2 Mbit-Leitung.

Der Download jeder einzelnen Komponente einer Webseite wie Bilder, Stylesheets oder JS-Skripte benötigt Zeit. Diese Zeit kann durch entsprechende Maßnahmen reduziert und im besten Falle optimiert werden. Zu den Maßnahmen gehören einmal die Reduzierung der Anzahl aller Komponenten und die Komprimierung der einzelnen Komponenten.

Um nun seine Seite –Google- und Anwender-Freundlich zu gestalten und zu planen gibt es mehrere Optionen, welche nur in Kombination die perfekte Lösung bieten:

- HTTP Requests minimieren

Hier geht es um die Reduzierung der Anzahl aller benötigten Komponenten.

  • Kombinieren von externem JavaScript
    Anstatt z.B. 3 verschiedene externe JavaScript-Dateien zu laden wird nur ein HTTP-Request benötigt um eine JavaScript-Datei zu holen.
  • CSS-Sprites
    Möglichst viele Hintergrund-Bilder werden in einem einzigen Bild zusammengefasst. Per CSS wird dann mittels background-image und background-position der gewünschte Ausschnitt gewählt.  Diese Technik hat auch noch den Vorteil, dass bei Hover-Effekten der, durch Nachladen von Bildern zustande kommende, unschöne “Flicker”-Effekt entfällt.

- Komprimierung von CSS und JavaScript

Das ist der Punkt auf den ich unten auch näher eingehen möchte. JavaScript ist dank dem Schlagwort Web 2.0 und den bestehenden unzähligen Frameworks wie jQuery oder Ext JS in aller Munde und wird viel und leider auch verschwenderisch benutzt.

Natürlich sollte man sich als ersten überlegen, ob man wirklich ein komplettes Framework wie jQuery einsetzen möchte, obwohl vielleicht nur ein Element per JavaScript auf Klick ausgeblendet werden soll.

Hat man aber doch seine JavaScript-Orgie beendet und möchte die Funktionalität online stellen, sollte man den entstandenen JavaScript-Code auf jeden Fall noch komprimieren und ggf. optimieren. Hierzu gibt es 2 sehr bekannte und weit verbreitete Möglichkeiten. Einmal der von Yahoo entwickelte YUI Compressor und den von Google veröffentlichten Closure Compiler. Ich möchte hier nur auf den Closure Compiler eingehen, da er laut Tests im Internet und meinen eigenen Erfahrungen noch einmal 10-15% besser komprimiert und optimiert als der YUI Compressor.

 

Closure-Compiler per Webinterface

Unter http://closure-compiler.appspot.com/home ist das Webinterface des Closure Compilers erreichbar, hier könnt Ihr manuell eure CSS- und JS-Dateien komprimieren lassen. Ich möchte jetzt hier nicht auf die einzelnen Optionen und Möglichkeiten eingehen, da diese in der Anleitung von Google umfangreich beschrieben ist. In diesem Artikel soll es hauptsächlich um die Einbindung und Nutzung des Closure Compilers mittels PHP 5 gehen.


Closure-Compiler mit PHP 5 nutzen

Wie schon beschrieben kann man den Closure Compiler per Webinterface aufrufen und dort manuell sein JavaScript hochladen. Auf der rechten Seite der UI erscheint dann der optimierte JS-Code. Was aber, wenn man nun diese Funktionalität dynamisch per PHP nutzen möchte.

Hieran hat Google natürlich auch gedacht und eine API für PHP5 bereitgestellt. Die Nutzung der API ist denkbar einfach. Zuerst einmal sei gesagt, dass hierfür nichts zusätzliches installiert werden muss. Die API ist unter http://closure-compiler.appspot.com/compile erreichbar und wird einfach per curl_init eingebunden und damit steht uns die gesamte Funktionalität zur Verfügung.

Die Genaue Erklärung der API kann auf der Manual-Seite von Google nachgelesen werden. An dieser Stelle seien nur kurz die 4 benötigten Parameter erklärt.

  • compilation_level:
    die möglichen Werte sind hier WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS und ADVANCED_OPTIMIZATIONS. Ich persönlich nutze immer den Wert SIMPLE_OPTIMIZATIONS. Er arbeitet natürlich um einiges effektiver als WHITESPACE_ONLY und benötigt keine zusätzlichen Konfigurations-Werte wie ADVANCED_OPTIMIZATIONS.
  • output_format:
    da wir ja JavaScript compillieren möchtenmuss hier “text” stehen.
  • output_info:
    hier muss “compiled_code” stehen wenn wie bei uns eine JavaScript-Kompliereung gewünscht ist
  • js_code:
    hier muss der JavaScript-Code übergeben werden. Dieser muss vorher für die Übermittlung per URL mittels urlencode kodiert werden.

Beispiel (ausführen):

$js_script = file_get_contents('http://www.news-und-tests.de/wp-includes/js/prototype.js');
$cc = curl_init('http://closure-compiler.appspot.com/compile');

$js_code = urlencode($js_script);

curl_setopt($cc, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($cc, CURLOPT_POST, 1);
curl_setopt($cc, CURLOPT_POSTFIELDS, 'output_info=compiled_code&output_format=text&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=' . $js_code);
$js_code_opt = curl_exec($cc);
curl_close($cc);

echo($js_code_opt);


Closure-Compiler für WordPress

Das wäre mein Wunsch für die Zukunft. WordPress würde hier bei der Installation von Plugins eine Schnittstelle bieten, so dass Plugin-Entwickler nur noch die gewünschten JS-Dateien einmalig in der Installations-Routine angeben müssen. Diese würden dann mittels dem Closure Compiler kompiliert und neu abgespeichert werden.

Ähnliche Artikel: