precom BLOG

Die Performance von Webseiten wird in den letzten Jahren ein immer stärkeres Thema.  Sind Webseiten zu langsam, bzw. laden gewissen Teile einfach nicht oder nur zäh, sind auf der einen Seite die User schnell verschwunden und auf der anderen Seite ist Google enttäuscht. Das kann dazu führen, dass die Seite in den SERP’s (Suchergebnissen Anm.) einige Plätze zurückgereiht wird. Denn Google will nur optimale Informationsseiten an seine Suchenden weitergeben.

Um heraus zu finden, was an der Seite zu optimieren ist, bieten sich diverse Tools an. Zwei wichtige sind dabei das Page Speed Tool des Google Chrome sowie das YSlow-Tool des Firefox Firebugs. Mit diesen beiden Tools kann auch bei jeder TYPO3-Seite die Performance getestet (und verbessert) werden.

Da TYPO3-Seiten immer aus einer Vielzahl an Dateien besteht, bietet sich eine Geschwindigkeitsoptimierung statischer Inhalte sehr gut an. CSS-Dateien, statische Bilder für das Design oder auch Javascript-Dateien brauchen zusammen lange zum laden, müssen aber nicht immer exakt auf dem Webserver liegen, wo die eigentliche TYPO3-Seite läuft. Moderne Browser können gleichzeitig auf mehreren Hosts nach Dateien anfragen. Eine typische TYPO3-Internetseite mit einem herkömmlichen CSS-Design hat im Schnitt 40 Anfragen (getestet an unseren eigenen Webseiten). D.h. der Browser holt sich nach und nach jede der 40 benötigen Dateien (CSS, Bilder, Javascript) und stellt die fertige Webseite zusammen. Wenn man jedoch diese statischen Dateien (die sich in der Regel selten ändern) auf einem anderen Server einlagert, kann der Browser während dem Laden einer Seite gleichzeitig die Bilder vom anderen Host holen. Dank Sven Wolferman (Maddesigns) und dem Blog der Marit AG bin ich auf die wirklich einfache und spannende Lösung gekommen!

Die Umsetzung

Zuerst eine Subdomain beim Provider anlegen (z.B. “images” oder “static”.meine-domain) um damit unseren zweiten Host zu erzeugen. Dort einfach die Dateien hinkopieren, die man auslagern will. Ich persönlich würde den ganzen fileadmin Ordner auslagern, dort befinden sich alle Template-Dateien (CSS, Bilder, HTML-Vorlagen). Danach die Extension “ja_replacer” (Link zum TER) im TYPO3 installieren, denn diese kann uns spezielle Anfragen an andere Hosts ersetzen. Die Extension ermöglicht es zum Beispiel, den kompletten fileadmin Ordner (und damit die Template-Dateien, Bilder, CSS, etc.) auszulagern und auf einem anderen Host anzusprechen!

Wir können aber nicht nur Dateien aus dem Fileadmin-Ordner auslagern. Auch manche Java-Dateien bzw. CSS-Dateien von Extensions (zum Beispiel von der perfectlightbox) können extern gelagert und von dort abgerufen werden. ja_replacer ermöglicht es, viele Ordner einzelne anzusprechen und deren Lagerplatz auf einem externen Host anzugeben.

Das ganze funktioniert mit einfachem Typoscript. Im Setup des Root-Templates einfach folgendes eingeben:

Mit der ersten Anweisung legen wir fest, welche Ordner, die von TYPO3 verwendet werden, an einem anderen Ort platziert sind. Wichtig ist hier, die Ordner immer MIT und OHNE vorangestelltes Anführungszeichen anzugeben. In der zweiten Anweisung (replace) sagen wir TYPO3, wo sich der selbe Ordner auf einem anderen Host befindet! Bei der Ausgabe wird dann einfach der Pfad ersetzt und der Browser kann somit parallel beim zweiten Host nach diesen Dateien anfragen.

Tags: Anleitung, einsteiger, extension, Tipps, Tricks, typo3