Themewrapper in papaya CMS benutzen

Mit dem Themewrapper von papaya CMS ist es möglich, mehrere CSS-Dateien aus dem Theme in eine Datei zusammenzulegen und dadurch die Anzahl der HTTP-Requests für CSS-Dateien auf eins zu reduzieren. In gleicher Weise kann man JavaScript-Dateien zu einer JavaScript-Datei zusammenlegen. Im folgenden Artikel möchte ich beschreiben, wie das ganze mit papaya CMS zu realisieren ist.

Grundlegende Überlegungen

Die Performance einer Website kann dadurch verbessert werden, dass CSS-Dateien zu einer Datei kombiniert werden. Ebenso können verschiedene JavaScript-Dateien zu einer Master-Datei kombiniert werden. Dadurch wird die Anzahl an HTTP-Requests gesenkt, die ansonsten für verschiedene CSS- und JavaScript-Dateien notwendig wären. Werden HTTP-Requests reduziert, fällt auch der Overhead weg, der durch jede HTTP-Anfrage entsteht. Dies ist besonders im Falle von JavaScript-Dateien augenfällig, da ein Browser ja nur eine JavaScript-Datei gleichzeitig herunterladen kann.

CSS in den HTML-Header, JavaScript ans Seitenende

Eine weitere große Rolle für einen beschleunigten Seitenaufbau im Browser spielt die Art und Weise, wie CSS-Dateien und JavaScript-Dateien eingebunden werden. Wenn man die Performance einer Website mit Tools wie yslow misst, werden häufig folgende Schritte empfohlen:

• JavaScript-Dateien sollten immer am Ende der Seite eingebunden werden
• CSS-Dateien sollen immer im HTML-Header eingebunden werden

JavaScript-Dateien gehören an das Ende der Webseite, da JavaScript-Dateien den parallelen Download weiterer Dateien verhindern. Laut HTTP-Spezifikation 1.1 (RFC 2616, S. 46) darf (oder sollte) ein Browser bis zu zwei gleichzeitige Verbindungen (und also auch Downloads) pro Hostnamen öffnen. Wenn Ressourcen auf mehreren Hosts liegen, sind sogar noch mehr gleichzeitige Downloads erlaubt.

Bei JavaScript-Dateien gibt es jedoch eine Besonderheit. Wenn ein Script heruntergeladen wird, öffnet der Browser keinen weiteren Download-Request, unabhängig davon, auf welcher Domain die andere Datei liegt. Um den Seitenaufbau nicht zu verzögern, sollten JavaScript-Dateien also erst ganz an das Ende der Webseite eingebunden werden.

Der Grund dafür, dass CSS-Dateien bevorzugt im Header eingebunden werden sollen, ergibt sich aus der Art und Weise, wie HTML durch den Browser verarbeitet wird. CSS-Angaben werden zur Formatierung der Webseite genutzt. Wenn alle notwendigen CSS-Informationen bereits im Header der Seite eingebunden werden, kann der Browser die Seite viel schneller rendern. Teilweise geschieht dies, noch während das HTML der Seite sowie weitere Ressourcen wie Bilder heruntergeladen werden.

Kompression aktivieren

Wenn CSS- und JavaScript-Dateien komprimiert an den Browser gesendet werden, wird die Download-Größe der entsprechenden Dateien zum Teil sehr stark reduziert. Wenn die Download-Größe einer umfangreichen JavaScript-Datei etwa um die Hälfte reduziert wird, kann sie auch sehr viel schneller heruntergeladen werden, wodurch sich wiederum der Seitenaufbau beschleunigt.

Dateien mit dem Themewrapper kombinieren

papaya CMS enthält die Klasse papaya_themewrapper. Die Aufgabe des Themewrappers ist es, CSS-Dateien sowie JavaScript-Dateien zu jeweils einer CSS- und einer JavaScript-Datei zu kombinieren. Um diese Aufgabe zu erfüllen, kann der Themewrapper direkt über einen Request aus der Webseite angesprochen werden. Zu diesem Zweck werden die Namen der CSS-Dateien an das Script css.php übergeben. In analoger Weise werden die Namen der zu kombinierenden JavaScript-Dateien an das Script js.php übergeben.

Wer jetzt im Theme-Verzeichnis nach diesen Dateien sucht, wird nichts finden. Diese Dateien existieren nämlich nicht. Statttdessen überprüft papaya CMS bei jedem Request, ob ein Script mit dem Namen js.php oder css.php aus dem aktuellen Theme-Verzeichnis angefordert wird. Ist dies der Fall, wird eine Instanz der Klasse papaya_themewrapper erzeugt. Wenn der Aufruf durch die css.php erfolgt, wird der Themewrapper im Modus "css" gestartet, andernfalls im Modus "js". Damit kann der Themewrapper mit jedem beliebigen Theme zusammenarbeiten, ohne dass jedes Theme spezielle Dateien für den Themewrapper-Aufruf enthalten müsste.

Um dem Themewrapper die Namen der zu kombinierenden Dateien mitzuteilen, werden die virtuellen Scripte css.php und js.php immer mit dem GET-Parameter files angefordert. Der Parameter erhält als Wert immer eine Komma separierte Liste von Dateinamen, wobei die Endung der Dateinamen weggelassen wird. Im Modus "css" überprüft der Themewrapper, ob die entsprechenden CSS-Dateien im Theme-Verzeichnis enthalten sind. Wenn dies der Fall ist, werden die CSS-Dateien ausgelesen und als eine Datei an den Client ausgeliefert. In analoger Weise werden alle JavaScript-Dateien aus dem Theme-Verzeichnis kombiniert und an den Client gesendet.

Die Einbindung für CSS-Dateien sieht wie folgt aus:

<link rel="stylesheet" type="text/css" href="/papaya-themes/default/css.php" />

Die Einbindung für JavaScript-Dateien im HTML-Quellcode hat in etwa die folgende Form:

<script type="text/javascript"
src="/papaya-themes/default/js.php?files=papaya/popup,papaya/swfobject/swfobject" />

Kombinierte CSS-Datei und JavaScript-Datei in die Webseite einbinden

Im Template für die Webseitenausgabe kann der Themewrapperaufruf nun an die richtige Stelle eingebunden werden. Am einfachsten lässt sich dies in einem Template von papaya CMS demonstrieren. Die Stylesheet-Datei, in der der HTML-Header erzeugt wird, könnte beispielsweise folgendes Template enthalten:

<xsl:template name="papaya-styles">
<link rel="stylesheet" type="text/css"
href="{$PAGE_THEME_PATH}css.php?files=basic,main,colors"
media="screen, projection" />
</xsl:template>

Die Variable $PAGE_THEME_PATH enthält den Pfad zum papaya-theme-Verzeichnis und wird durch die Template-Engine von papaya CMS gesetzt.

In ähnlicher Weise wird das Template implementiert, mit dem die JavaScript-Dateien zusammengelegt werden:

<xsl:template name="papaya-script">
<script type="text/javascript"
src="{$PAGE_THEME_PATH}js.php?files=papaya/popup,papaya/swfobject/swfobject">
<xsl:comment><xsl:text> </xsl:text>//</xsl:comment>
</script>
</xsl:template>

Die Dateien werden jeweils ohne die Dateiendung (css respektive js) angegeben. Außerdem wird immer vom Theme-Verzeichnis ausgegangen. Das bedeutet, dass alle Dateien, die in Unterverzeichnissen des Theme-Verzeichnisses liegen, mit diesem Unterverzeichnis aufgerufen werden müssen. So liegt die Datei popup.js im Unterverzeichnis papaya des Theme-Verzeichnisses. Dementsprechend erfolgt der Aufruf als papaya/popup.

Cachen der zusammengelegten Dateien

Damit nicht bei jedem Request die kombinierten Dateien neu zusammengelegt werden müssen, können Sie die kombinierten Dateien cachen.Dazu müssen in der Systemkonfiguration von papaya CMS folgende Optionen eingestellt werden:

Um die Optionen einzustellen, gehen Sie wie folgt vor:

1. Klicken Sie in der Menügruppe Administration auf Einstellungen. In der linken Spalte des Content-Bereichs wird der Abschnitt "Optionen" dargestellt.
2. Öffnen Sie die Optionengruppe "Cache". Die Optionengruppe enthält die relevanten Optionen PAPAYA_CACHE_THEMES und PAPAYA_CACHE_TIME_THEMES:
3. Klicken Sie auf die Option PAPAYA_CACHE_THEMES. Aktivieren Sie diese Option, indem Sie im Abschnitt "Option" in der rechten Spalte des Content-Bereichs den Optionswert "On" auswählen.
4. Klicken Sie anschließend auf Speichern.
5. Optional: Klicken Sie auf die Option PAPAYA_CACHE_TIME_THEMES. Stellen Sie eine andere Cache-Zeit ein, wenn Sie eine kürzere Vorhaltezeit für die gecachten CSS- und JavaScript-Dateien wünschen.
6. Klicken Sie anschließend auf Speichern.

Kompression für CSS- und JavaScript-Dateien aktivieren

Zusätzlich zum Cachen können Sie die CSS- und die JavaScript-Datei komprimieren. Dazu müssen Sie in der Systemeinstellung von papaya CMS die Option PAPAYA_COMPRESS_CACHE_OUTPUT aktiviert werden. Diese Option wirkt sich auf alle gecachten Objekte aus. Gecachte Seiten werden beispelsweise komprimiert ausgeliefert.

Einige Anmerkungen zum Schluss

Durch die Einbindung des Themewrappers konte ich die Anzalhl der JavaScript-Requests reduzieren. Anstatt dreier Requests gibt es jetzt nur noch einen. Für die CSS-Datei ergibt sich durch den Themewrapper keine direkte Ersparnis. Da ich jedoch die Kompression aktiviert habe, wird die einzelne CSS-Datei durch den Themewrapper komprimiert ausgegeben.

Ich muss jedoch auch deutlich machen, dass diese Änderungen nicht notwendig waren. Da es sich um meine Website um einen Blog handelt, der nicht so häufig aufgerufen wird, bringen die Optimierungen keine direkten Änderungen mit sich. Die Last auf dem Server ist dazu einfach viel zu gering, als dass sich also der Aufwand prinzipiell lohnen würde.

Seine Stärke spielt der Themewrapper vor allem auf Websites aus, die sehr stark besucht werden. Durch die Reduktion der Requests pro Seitenaufruf und das Caching der Theme-Dateien kann in diesem Fall ein spürbarer Performancegewinn erzielt werden.