YUI Compressor zur Komprimierung von CSS und Javascript (in W3 Total Cache, Ubuntu root-Server)

Alles ordentlich zusammenquetschen

Das Plugin W3 Total Cache bietet schon in der Grundinstallation vielfältige Einstellmöglichkeiten zur Optimierung des Caching-Verhaltens einer WordPress Installation. Die positive Benutzererfahrung – inbesondere bei Nutzung von mobilen Seiten – und der erwünschte “Schwuppdizitäts”-Faktor hängen von kurzen Ladezeiten ebenso ab, wie eine gute Bewertung von Google und anderen Suchmaschinen.

Wenn es notwendig ist, jeder Millisekunde noch etwas Aufmerksamkeit zu schenken, sollte man auf jeden Fall den Minifier einschalten. Der Minifier komprimiert serverseitig alle CSS und JS (Styles und Javascript) und überträgt sowol nur gerade notwendige Informationen, als auch diese komprimiert. Dabei kommt es auch auf die Kompressionsrate als auch auf die Kompressionsgeschwindigkeit des verwendeten Algorithmus.

Unter den Kompressoren hat sich YUI-Compressor (in JAVA) geschrieben einen besonderen Ruf erarbeitet. Die Kompression wird nicht in PHP oder Javascript vorgenommen, sondern komplett an  JAVA übergeben, welchen in einem Java Runtime Environment (einer Art Virtuellen Maschine zur Ausführung von JAVA) gekapselt ist. Vorteil ist unter anderem, dass die Kompression zur Ausführungzeit des Websservers (meist wohl Apache2) parallelisiert wird. Der Webbrowser kann also schon mal weiter Daten zur Verfügung stellen und wartet nicht die Kompression des CSS und des JS ab.

Zuerst schaltet man also in den allgemeinen Einstellungen von W3 Total Cache im Reiter

https://www.domain.com/wp-admin/admin.php?page=w3tc_general

Minifiy ein (Häkchen setzen) und wählt den manuellen Modus.Für HTML kann man den Default Minifier benutzen, für CSS und JS wählt man den YUI Compressor. Nach dem Speichern schmeißt W3 total Cache sofort einen Fehler. Den Darf man jetzt erst einmal irgnorien. In einem Produktivsystem sollte man temporär aber schon mal auf JSMin, bzw, default zurückschalten (und speichern).

Jetzt erstmal ‘nen Kaffee

Vergleichen wir den Vorgang Java zu aktivieren und den YUI Compressor auszuführen im Folgenden mit dem Kochen einer Tasse Kaffee. Bevor man mit seinem Server den YUI Compressor (hier jetzt der Kaffee) benutzen kann, muss man erstmal eine Kaffeemaschine (die Java Laufzeitumgebung, JRE) aufstellen, Kaffee besorgen und dem W3 Total Cache (Kaffeetinker) sagen, wo die Kaffeemaschine und der Kaffee stehen (Pfade zur JRE und YUI Compressor .jar-File anpassen). Ich verzcihte hier auf sudo, wer mit eingeschränkten Rechten arbeitet (was sicher sinnvoll ist), muss sudo vor jeden Befehl voranstellen.

Fangen wir mit der Kaffeemaschine an. Mit Ubuntu geht das recht komfortabel auf der Kommandozeile:

apt-cache search jre

zeigt eine kleine Liste für die eigene Distribution verfügbarer JRE an.

apt-get install openjdk-7-jre

installiert die Java-Laufzeitumgebung.

Die Befehle

whereis java

which java

und

java --version

geben Auskunft darüber, wo Java anschließend liegt, über welchen Pfad man zum aktiven Java findet und natürlich welche “Java-Version” installiert ist – gemeint ist eben die Laufzeitumgebung.

wir sollten als Standardpfad unter Ubuntu

/usr/bin/java

erhalten. Die Kaffeemaschine steht, jetzt besorgen wir erstmal Kaffee.

Bei neueren Versionen von Ubuntu ist der YUI Compressor schon in den Qellen verfügbar. Mit

apt-get install yui-compressor

installiert man die passende Version.

Wer selber Hand anlegen will, erstellt einen Ordner im Ordner /usr/share (das ist ein guter Platz dafür).

mkdir /usr/share/yui-compressor

cd /usr/share/yui-compressor

wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

Wer will kann schon mal probieren:

java -jar yuicompressor-2.4.8.jar

ergibt die Ausgabe auf der Konsole:

YUICompressor Version: 2.4.8

Usage: java -jar yuicompressor-2.4.8.jar [options] [input file]

Global Options
-V, --version Print version information
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset Read the input file using
--line-break Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o Place the output into . Defaults to stdout.
Multiple files can be processed using the following syntax:
java -jar yuicompressor.jar -o '.css$:-min.css' *.css
java -jar yuicompressor.jar -o '.js$:-min.js' *.js

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

Jetzt ist alles bereit, die Kaffeemaschine steht, Kaffee haben wir auch, nun muss man dem W3 Total Cache nur noch mitteilen, wo beides zu finden ist. Der W3 Total Cache ist schon ein großer Junge und weiß als ausgereiftes Caching-Instrument, mit welchen Optionen, der YUI Compressor aufzurufen ist. Wer dennoch Interesse an ein paar Beispielen hat, findet die einfach im Netz.

Nach der Aktivierung des YUI Compressors als Minifier für CSS und JS, findet man im Backend unter:

https://www.jdomain.com/wp-admin/admin.php?page=w3tc_minify

im Bereich JS und CSS die Möglichkeit Pfade zur Java Laufzeitumgebung (JRE) und zum Compressor selbst anzugeben.

Wir kennen die Option, die wir angeben müssen bereits:

/usr/bin/java

/usr/share/yui-compressor/yui-compressor.jar

Nach dem Klick auf den Test-Button das Speichern nicht vergessen! 🙂