Ganz abgesehen von Optimierungen in den Datenbank-Abfragen, einsetzen von File- und Ram-Caches ging es auch um das setzen von Cache-Direktiven für statische Dateien sowie eine Subdomain zur Auslieferung dieser und der damit verbundenen Erhöhung der parallelen Anfragen durch den Browser.

Wir haben zur Analyse Tools wie YSlow! von Yahoo oder Page Speed von Google genommen (wir berichteten), um damit Dinge zu finden, die es zu verbessern gab.

Schritt 1: Fasse zusammen und komprimiere

Als ersten Schritt haben wurden dazu die Stylesheets und Javascript-Dateien zusammengefasst und anschließend komprimiert (Entfernen von Kommentaren, Zeilenumbrüchen, doppelten Leerzeichen etc.). Dieser Vorgang geschieht komplett automatisiert, die dadurch erzeugten Dateien werden gecached und mit einer versionierten URL ausgegeben (z.B. http://becks.de/media/201104/js/…). Diese URL ändert sich, je nachdem wann eine der eingebundenen Dateien das letzte mal verändert wurden ist, selbstständig.

Schritt 2: Komprimiere erneut. Bitte was? Ja, nochmal!

Ein weiterer Schritt war die erneute Kompression der Inhalte. Das mag jetzt erstmal verwirrend sein, hat aber seinen Grund. Zwar haben wir im vorhergehenden Schritt bereits die Dateien komprimiert, wir haben die jedoch nur von unnötigen Zeichen entfernt. In diesem Schritt jedoch komprimieren wir Dateien selbst mittels dem gzip-Verfahren. Dadurch können wir die Dateigrößen teils bis zu 80% verkleinern, was dazu führt, dass der Server (Traffic) und der Browser (Ladezeiten) weniger Daten übertragen müssen. Jedoch ist dabei zu beachten, dass nicht alle Daten komprimiert übertragen werden dürfen. PDF’s, Filme, Flashdateien – um nur mal drei zu nennen – dürfen beispielsweise nicht komprimiert werden, da die Datei ansonsten nicht mehr korrekt gelesen werden können. Unproblematisch ist das Komprimieren hingegen bei der Ausgabe von HTML, bei Bildern, Stylesheets, Javascript, XML, JSON und und und. Kurzum, bei eigentlich allen Dokumenten die als Textform übertragen werden. Diese komprimierten Daten werden vom Browser anschließend wieder dekomprimiert und verwendet.

Schritt 3: Ablauf-Datum in Zukunft und Vergangenheit

Dieser Schritt befasst sich mit den Expires- und Last-Modified-Headern von statischen Dateien. Diese werden verwendet um den Browser zu sagen, wann eine Datei verändert wurde oder abläuft. Anders formuliert, wann eine Datei vom Browser neu geladen muss. Diese Header-Angaben kann man sich zu nutze machen um den Browser somit Direktiven zu vermitteln, damit dieser statische Inhalte länger im Cache behält und die Seite beim erneuten Besuch um ein vielfachen schneller lädt. Beispielsweise wurden auf der Startseite von becks.de, mit leerem Browser-Cache, Daten in der Größe von 1.3 MB geladen. Mit gefüllten Cache, also bei erneutem Besuch, wurden nur noch Daten von 43 KB geladen. Diese 43 KB waren lediglich das HTML selbst, dem wir als Ablaufs-Datum ein Datum aus der Vergangenheit gegeben haben. Damit suggerieren wir dem Browser, dass diese Datei längst überfällig ist und er sie erneut laden soll und gehen damit auf Nummer sicher, dass alle Änderungen auf der (dynamischen) Startseite auch so beim User dargestellt werden.

Schritt 4: die Andere

Zu guter Letzt haben wir unser Ausgabe-System so angepasst, dass alle Bilder von einer Subdomain (http://static.becks.de) ausgegeben werden. Damit ermöglichen wir dem Browser, mehr parallel ablaufende Anfragen durchzuführen als er es bei nur einer Domain könnte und können somit den Seitenaufbau beim User nochmal etwas beschleunigen.

Damit dieser Artikel nicht arg so theoretisch ist, haben wir euch hier unsere .htaccess als Beispiel eingefügt.

# rewrites
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteCond %{HTTP_HOST} !www.becks.de [NC]
    RewriteCond %{HTTP_HOST} !static.becks.de [NC]
    RewriteRule ^(.*)$ http://www.becks.de/$1 [L,R=301]

    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    RewriteRule ^media/([0-9]+)/(.*)$ /application/cache/$2 [L]

    RewriteRule ^sitemap_becks.xml$ /searches/sitemap [L]

    RewriteRule ^index.php/(.*)$ /$1 [R=301,L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

# media caching
# +++++++++++++++++++++++++++++++++++++++++++++++++

Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
    Header set Last-Modified "Fri, 11 Mar 2022 10:10:36 GMT"
    Header set Cache-Control "public, no-transform"
</FilesMatch>

# expires header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_expires.c>
    # turn on the module for this directory
    ExpiresActive on

    # set default - not active due caching of pages
    #ExpiresDefault "access plus 24 hours"

    # cache common graphics
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"

    # cache CSS
    ExpiresByType text/css "access plus 1 months"

    # cache other filetypes
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType application/x-shockwave-flash "access plus 1 months"
</IfModule>

# compressing header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_deflate.c>

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml

</IfModule>

Wer mehr zu diesem Thema wissen möchte dem sei die Seite askapache.com empfohlen, welche sehr ausführliche Artikel, Anleitungen und Beispiele enthält und auch uns als Hilfe diente.

Um dieses Problem zu beheben und euch an der Lösung teilhaben zu lassen, beschreiben wir, wir ihr das Layout selt in wenigen Schritten ändern könnt.

Schritt 1:
Als erstes öffnet bitte die index.php im Order typo3conf/ext/templavoila/mod1.

Schritt 2:
Geht dann zu Zeile 1408. Dort ersetzt ihr folgenden Inhalt:

foreach ($cells as $cell) {
	$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
}

$output = '
<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
	<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
	<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
</table>
';

durch diesen hier:

foreach ($cells as $cell) {
	//$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	//$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
	$contentCells[] = '<tr>' . vsprintf('<td width="100%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell) . '</tr>'; // header cell
	$contentCells[] = '<tr>' . vsprintf('<td %2$s width="100%%" class="tpm-content-cell">%5$s</td>', $cell) . '</tr>'; // content cell
}

//$output = '
//	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
//		<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
//		<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
//	</table>
//';

$output = '
	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
		' . (count($contentCells) ? implode('', $contentCells) : '<tr><td>&nbsp;</td></tr>') . '
	</table>
';

Schritt 3:
Fertig! Nun braucht ihr nur noch die entsprechende Seite im Backend anschauen und euch davon zu überzeugen