TYPO3: HTTP-Requests reduzieren

In der Standardinstallation von TYPO3 werden viele Bilder, CSS und JavaScript-Dateien einzeln eingebunden, was Einfluss auf die Ladezeit der Webseite hat. Die Anfragen an den Webserver sollten deswegen analysiert und minimiert werden.

Vor einiger Zeit hat Google bekanntgegeben, dass auch die  Ladegeschwindigkeit als Rankingfaktor mit einbezogen wird. Aber auch aus Sicht des Seitenbesuchers ist es sinnvoll sich mit diesem Thema zu beschäftigen. Für jedes Bild und jede CSS/JS-Datei muss der Browser eine neue Verbindung zum Server öffnen. Bei Firefox sind dies maximal 15 gleichzeitige Verbindungen pro Server die parallel abgearbeitet werden – darüber wird der Seitenaufbau minimal verzögert. Ein Besucher könnte vielleicht frustriert die Seite wieder verlassen, wenn es ihm zu lange dauert mit dem Seitenaufbau. Darum sollten Entwickler dies gleich bei der Erstellung der Seite beachten.

Ergebnisse überwachen

Um die aktuelle Ladegeschwindigkeit zu analysieren ist das Firefox-Plugin Firebug sehr nützlich.

Plugin installieren -> F12 drücken -> Reiter Netzwerk auswählen -> Seite neu laden.

Eine Bewertung der Seite kann mit den Erweiterungen YSlow von Yahoo und Page Speed von Google erfolgen. Bei YSlow kann aus drei Profilen gewählt werden um die Webseite zu bewerten, dabei auch ein Profil für kleine Seiten – die Note A steht für das beste Ergebnis. Bei Page Speed wird die Seite anhand von 100 erreichbaren Punkten bewertet.

Dateigröße reduzieren

Durch die Verwendung von Image Arrays / Image Matrix lassen sich viele Bilder in einer Datei zusammenfassen, was z.B. für Navigationsleisten und Symbole Sinn macht. Was sich an der Dateigröße noch optimieren lässt, ohne das die Qualität spürbar abnimmt, kann mit jedem guten Grafikprogramm getestet werden oder mit PunyPNG.

TYPO3 Scriptmerger

Bei TYPO3 bindet jede Extension gerne ihre eigenen CSS und JavaScript-Dateien ein. Oder der Entwickler möchte nicht auf getrennte Dateien je nach Einsatzzweck und Extension verzichten? Hier hilft es die Erweiterung Scriptmerger zu installieren, welche die Dateien zusammenfasst und mit GZip komprimiert. Damit das Zusammenfügen der Dateien funktioniert, wird die Erweiterung über ein Statisches Templates eingebunden. So können die Ergebnisse auch an einer Unterseite probiert werden ohne den Auftritt insgesamt zu gefährden. Der Media-Typ wird beachtet und möchte man wirklich nur eine einzige CSS-Datei erhalten wird dieser überall auf “all” gesetzt:

page.includeCSS {
file1.media = all
file1 = fileadmin/main.css
file2.media = all
file2 = fileadmin/tt_news.css
}

Die originalen CSS-Dateien bleiben erhalten und können ständig angepasst werden. Erst beim Löschen des Caches (Blitz-Symbol) werden die Dateien zusammengefasst, die dann unter typo3temp/scriptmerger/compressed/ abgespeichert werden und automatisch verwendet werden.

Ergebnisse Testen

Wie oben beschrieben, lässt sich über Firebug sowie die Plugins YSlow und Page Speed der Erfolg der Änderungen ablesen. Zum Schluss nicht vergessen die Seite auch in verschiedenen Browsern zu testen, dies kann mit BrowserShots und etwas Geduld (Auftrag alle 30 Minuten erneuern) erfolgen.

Google: Using site speed in web search ranking

Author: admirableadmin

Hello World! Ich bin Andreas Peichert und entwickle und programmiere Software seit 2000. Zurzeit arbeite ich als Senior Solution Architect.

Leave a Reply

Your email address will not be published. Required fields are marked *