Ab diesem Jahr wird der Suchmaschinenriese Google die Ladegeschwindigkeit einer Webseite als Faktor für das Ranking in den Suchergebnissen nutzen. Textpattern ist von Haus aus bereits nicht langsam und in diesem Tutorial wird Step by Step erklärt, wie man Textpattern Seiten so richtig schnell macht.

Speed up Textpattern – Schritt für Schritt

Eine wirklich schnell ladende Webseite ist immer das Ergebnis von genauer Überlegung und dem Zusammenwirken vieler kleiner Details, die letztendlich für ein optimales Ergebnis sorgen. Fangen wir im Schritt eins mit der wichtigsten Voraussetzung an:

Schritt 1 – Einhalten der Webstandards

Semantisch korrekter HTML-Quellcode mit völliger Auslagerung des Layouts in eine externe CSS Datei ist die absolute Grundvoraussetzung. Designangaben haben im Quellcode nichts zu suchen und blähen diesen nur unnötig auf. Auch das Verhältnis von Quellcode zu wirklichem Inhalt leidet unter Designangaben im HTML Code. Nicht zu vergessen: auch das Verhältnis von Quellcode zu Inhalt ist einer der wichtigen (vermuteten) 200 Parameter des Google Algorithmus.

Schritt 2 – Optimierung von CSS und JavaScript

Textpattern legt standardmäßig das Stylesheet (CSS) in der Datenbank ab, was erhebliche Geschwindigkeitseinbußen mit sich bringt. Denn wenn eine dynamisch generierte Seite nochmals ein dynamisch generiertes Stylesheet abruft, ist das zwangsläufig langsam. Legen wir also einen Ordner CSS im Hauptverzeichnis unseres Servers an (in dem sich auch die Textpattern Installation befindet) und binden eine statische CSS Datei wieder auf althergebrachtem Wege ein.

Folgendes ist hierfür in den Seitenvorlagen von Textpattern nötig:

Wir entfernen diesen Textpattern Tag:
<txp:css format="link" />
und ersetzen ihn durch einen Link wie diesen:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.demo.de/css/screen.css" />

Die richtige Position von JavaScript im Quelltext

Die meisten Webseiten haben das JavaScript im Head Bereich oberhalb des schliessenden </head> eingebunden. Deutlich besser für die Performance ist es jedoch, das JavaScript unten in die Seite oberhalb des schliessenden </body> Tags einzubinden, da der Seitenaufbau ansonsten beim JavaScript gestoppt wird und erst dieses von Browser geladen werden würde.

CSS und JavaScript komprimieren

CSS und JavaScript sollten komprimiert werden, um die Dateigröße so gering wie möglich zu halten. JavaScript Dateien sollten zu einer einzigen Datei zusammengefasst werden. Vor dem Komprimieren der Dateien bitte unbedingt Sicherungskopien anlegen, damit man die Originaldateien immer zu Verfügung hat, falls was schiefgeht.

CSS Drive CSS-Kompressor

Dieser CSS-Kompressor hat sich als extrem zuverlässig und gut erwiesen. Ich nutze immer die Einstellungen “Super Compact” und “Strip ALL comments”, was die kleinste Dateigröße erzeugt. Sonderlich gut lesbar ist das CSS anschliessend nicht mehr, daher schön vorher eine Kopie machen, damit man im Anschluß das CSS auch noch bearbeiten kann.

Dean Edwards JavaScript Packer

Für mich eindeutig der beste JavaScript Packer, wenn die Optionen “Base62 encode” und “Shrink variables” genutzt werden, schrumpft die Dateigröße erheblich. Doch Vorsicht, nicht jedes JavaScript ist für diese extreme Art der Schrumpfung zu haben, daher auch hier Sicherungskopie anlegen und austesten.

Schritt 3 – .htaccess Datei ergänzen

Dieser Tipp kann auf jedem Apache 2 Webserver zum Einsatz kommen, der über das entsprechende Modul verfügt (ist allermeistens der Fall). Vor der Arbeit an dieser Datei unbedingt ein Backup anlegen! Mit diesem Tipp aktivieren wir das Apache Module mod_deflate und dieses sorgt anschliessend dafür, dass alle Daten an die Browser komprimiert (gzip) ausgeliefert werden. Verstehen tun das übrigens alle modernen Browser.

Wir ergänzen also unsere .htaccess Datei auf dem Server mit folgendem Code:

<FilesMatch “\\.(js|css|html|htm|php|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>

Ich habe diese Zeilen unterhalb vom schliessenden </IfModule> Tag gesetzt. Hiermit werden also alle Datei deren Endungen oben aufgeführt sind komprimiert. Dieser Tipp sorgt nicht nur für eine schnellere Ladezeit der Webseite, sondern auch für bedeutend weniger Serverlast.

Schritt 4 – Webseite cachen mit asy_jpcache

Eins der wirklich nützlichsten Plugins für Textpattern ist zweifellos asy_jpcache. Das Plugin sorgt für eine Komprimierung der einzelnen Seiten einer Textpattern Webseite, cacht diese und speichert sie in einen speziellen Ordner auf dem Server. Wird nun eine Seite angefragt, wird die gecachte Seite dekomprimiert und ausgegeben, was einen erheblichen Geschwindigkeitsvorteil bietet und die Serverlast wiederum erheblich minimiert.

asy_jpcache downloaden und installieren

Download asy_jpcache Plugin

Nach dem Download bitte entpacken, asy_jpcache.txt öffnen, kompletten Inhalt kopieren und wie gewohnt als Plugin installieren und noch nicht aktivieren.

Plugin installieren

Anschliessend müssen noch 2 Dateien überarbeitet werden. Beginnen wir mit der index.php im Hauptverzeichnis des Servers (ACHTUNG – nicht die index.php im Verzeichnis textpattern bearbeiten!). Dort muß an der in der folgenden Grafik gezeigten Stelle folgendes eingefügt werden: include './jpcache/jpcache.php';.

Code hier einfügen

Nun muß noch die Datei jpcache-config.php aus dem Ordner jpcache des Plugins konfoguriert werden, damit das Plugin wie gewünscht funktioniert.

Die Einstellungen in der jpcache-config.php

Die dort abgebildeten Einstellungen nutzt diese Seite hier. Wichtig ist bei Nutzung des Dienstes Twitterfeed, die Einstellung $JPCACHE_SKIP_FEEDS = 1; zu setzen, da ansonsten Twitterfeed nicht korrekt funktioniert.

Abschliessende Arbeiten

Die abgeänderte index.php wird nun in das Hauptverzeichnis des Servers mittels FTP geladen. Ebenso lädt man jetzt den kompletten Ordner jpcache in das Hauptverzeichnis des Servers. Im Anschluss jetzt das Plugin asy_jpcache in Textpattern aktivieren. Fertig!

Testen des Geschwindigkeitszuwachses

Selbstverständlich lässt sich genau testen, um wieviel schneller die Webseite nun geworden ist. Hierzu empfiehlt sich das Firefox-Plugin Page Speed (setzt das Plugin Firebug voraus). Eine Messung der Webseite vor den Änderungen und nach den Änderungen belegt einen erheblichen Geschwindigkeitszuwachs.

Also, viel Spaß beim Website pimpen!

Diesen Artikel als PDF Speichern

Andreas Hecht

Andreas Hecht ist freiberuflicher Webdesigner/Webentwickler und Systemadministrator mit den folgenden Microsoft Zertifizierungen: MCP, MCSA, MCSA Messaging, MCSE, MCTS und dem Cisco CCNA Zertifikat.

Website the-netbrain.de | Folge ihm auf Twitter

Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.