Seitenladezeiten verkürzen mit minify

Trotz einer immer größeren Verbreitung von Breitband-Internetanschlüssen bleibt es weiterhin wichtig, die Ladezeiten von Webseiten zu minimieren. Zukünftig sollen die Ladezeiten von Webseiten sogar einen - wenn auch geringen - Einfluss auf das Ranking bei Google haben.

Nun gibt es zur Minimierung von Ladezeiten natürlich sehr viele Schrauben, an denen man drehen kann. Ich möchte hier nun aber keinen Rundumschlag starten, sondern lediglich auf den Teilbereich CSS- und Javascript-Einbindung eingehen.

Bei größeren Web-Projekten kommt es häufig vor, dass man eine Vielzahl an externen CSS- und JS-Dateien einbinden muss. Dies hat zwei entscheidende Nachteile:

  • Es werden eine Vielzahl von HTTP-Requests benötigt
  • Die vielen Dateien kommen in Ihrer Summe schnell auf mehrere 100 kB Datenmenge

Inzwischen gibt es diverse frei verfügbare Programmbibliotheken, die aus diesem Dilemma heraushelfen. Eine davon ist minify.

Was macht minify?

Minify fasst alle externen JS- und CSS-Dateien in jeweils eine Datei zusammen und komprimiert diese darüber hinaus noch. Die Vorteile liegen auf der Hand:

  • Statt vielen http-Requests wird nun nur noch jeweils einer für CSS- und JS-Dateien benötigt
  • Die Dateigröße schrumpft auf unter ein Viertel der ursprünglichen Dateigröße

Wie verwendet man minify?

Nach dem Download legt man den Ordner „min“, der alle benötigten Programmdateien enthält in einem Verzeichnis innerhalb des Webprojektes ab. Eventuell muss man noch die Datei config.php anpassen. Und schon kann man loslegen:

Statt wie bisher die Dateien einzeln einzubinden…

...erfolgt die Einbindung nun wie folgt:

Es wird also auf das “min”-Verzeichnis referenziert und als Wert des URL-Parameters „f“ werden kommagetrennt die Dateinamen übergeben. Hier kann man entweder den kompletten Pfad zu den Dateien angeben, oder – wenn alle Dateien im selben Verzeichnis liegen – ein Basis-Verzeichnis mit dem Parameter „b“ übergeben. Weiterhin kann man für das Caching noch eine beliebige Zahlenfolge anhängen, die nach jeder Änderung einer der Basisdateien geändert werden sollte.

Ein Nachteil verbleibt bei minify jedoch: das Debugging der zusammengefassten Dateien wird deutlich erschwert, da in der Fehlerkonsole nicht mehr auf die korrekte Zeile in der ursprünglichen Datei verwiesen wird. Zwar kann man dies mit dem Parameter debug=1 deutlich verbessern – hier wird dann innerhalb der zusammengefassten Datei vor jede Zeile die Zeilennummer der Original-Datei geschrieben – aber wirklich komfortabel ist das auch noch nicht.

Aus diesem Grund und um die Einbindung in unsere Webprojekte zu erleichtern, habe ich ein kleines Smarty-Plugin geschrieben (dotminify), welches Anhand der übergebenen Parameter das korrekte HTML-Markup für die Einbindung der CSS- und JS-Dateien per minify vornimmt, und ausserdem einen Debug-Modus enthält, in welchem alle Dateien klassisch nacheinander eingebunden werden.

Die Verwendung des Plugins ist denkbar einfach:

Die Parameter im Einzelnen:

minDir [str]
Verzeichnispfad zu minify

baseUrl [str] [Optional]
URL der Website, falls nicht gesetzt wird einfach ‘/’ verwendet

debug [int] [Optional]
Debugging-Optionen, falls nicht gesetzt ist kein debugging möglich (für Live-Betrieb)
Mögliche Werte:
=> Wert 0: Kein debugging möglich (für Live-Betrieb)
=> Wert 1: Debugging über die interne Minifiy Debugging-Funtionalität
=> Wert 2: Minify wird nicht verwendet, es werden alle CSS-/JS-Files klassisch nacheinander eingebunden

Cache [int] [Optional]
Hier kann eine beliebige Zahl eingetragen werden, nach Änderungen sollte diese geändert werden

js [str] [Optional*]
Die einzelnen Javascript-Files inkl. Pfad (falls baseDirJs nicht gesetzt), kommagetrennt, ohne Slash am Anfang

baseDirJs [str] [Optional]
Basisverzeichnis für alle JS-Dateien

css [str] [Optional*]
Die einzelnen CSS-Files inkl. Pfad (falls baseDirCss nicht gesetzt), kommagetrennt, ohne Slash am Anfang

baseDirCss [str] [Optional]
Basisverzeichnis für alle CSS-Dateien

xhtml [int] [Optional]
Falls der Wert 1 ist, wird XHTML-Markup verwendet

*Mindestens einer der beiden Parameter js und css muss gesetzt sein.

Das Smarty-Plugin dotminify kann hier kostenlos heruntergeladen und verwendet werden. Einzige Voraussetzung zur Nutzung ist der Verbleib des Copyright-Hinweises.