nginx: Minify html, css, js

Jeder Page Speed geplagte Entwickler kennt das: Viele Tools = css und javascript Sammelsurium auf der Seite und schlechtes Page Speed. Die beiden Types css und js lassen sich auch wunderbar komprimieren durch den Webserver mit gzip, aber wie ist das mit Minify? Tools wie Better WordPress Minify machen viel, doch am Ende gehen gewisse Komponenten eurer Seite nicht mehr. Daher sollte der Prozess direkt auf Webserver Ebene stattfinden.

Bei nginx gibt es nun zwei Möglichkeiten: Manuelle Installation des Pagespeed Moduls von Google oder der stabilere, einfachere Kompromiss, ein Perlskript dazwischen zu schalten, das die css, javascript und html-Dateien verkleinert. An die erste Variante traue ich mich selbst noch nicht heran, da es scheinbar auch noch nicht so ganz aus dem Beta-Stadium heraus ist, daher hier die einfachere zweite Variante für Debian / Ubuntu:

Zuerst muss nginx und das Paket nginx-extras installiert werden – sofern vorher nginx-full installiert war, wird das erst entfernt und dann nginx-extras installiert. Zur Sicherheit einfach mal die Konfiguration unter /etc/nginx backupen:

cp -R /etc/nginx /var/backup
apt-get install nginx-extras 

Das eigentliche Minify wird von einem Perlskript übernommen, das als Modul in nginx importiert wird: mittels nginx -V lässt sich herausfinden, ob das perl_module bei nginx geladen ist. Das Skript und die Pakete dazu hole ich mir vom GitHub Projekt nginx-minify. Die Perlfunktionen werden mit:

apt-get install libcss-minifier-xs-perl libjavascript-minifier-xs-perl libhtml-packer-perl

installiert. Mit whereis nginx finden wir dann heraus, unter welchem Ort nginx installiert ist und müssen nun das Skript vom github Projekt dorthin platzieren. Beispiel für Debian:

whereis nginx
nginx: /usr/sbin/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz
cd /usr/share/nginx
mkdir perl
nano perl/Minify.perl

Anschließend den Code des Skripts kopieren und speichern. Im letzten Schritt müssen die nginx.conf ergänzt und die jeweiligen server eingestellt werden. In die nginx.conf wird

# minify
perl_modules perl;
perl_require Minify.pm;

eingefügt und bei jedem Server in den verfügbaren Seiten muss nun möglichst weit oben – bevor andere includes gemacht werden –

location ~ \.html$ { perl Minify::html_handler; }
location ~ \.css$ { perl Minify::css_handler; }
location ~ \.js$ { perl Minify::js_handler; }

eingefügt werden. Anschließend den Server neuladen und neustarten. Fertig.

Du hast ein besseres Minify Perlskript gefunden? Her damit!

cssjs. htmlminifynginxperlwebserver
Comments (3)
Add Comment
  • Markus

    nano perl/Minify.perl
    perl_require Minify.pm;

    Die müssen beide schon gleich heißen.

    Bei nginx-mainline einfach nginx-module-perl installieren und das Skript nach /etc/nginx/perl/

  • Adrian

    Habe es gerade probiert, aber ich bekomme bei einem Testlauf leider nur noch eine weiße seite.

  • Albert Brunsmann

    Funktioniert grundlegend wenn man den Hinweis von Markus Says beachtet. Allerdings kann ich bei einer WordPress Seite kein ´minimiertes HTML feststellen, oder nur in Teilen, CSS und JS klappen. Danke fürs Teilen!