Zurück zur “Webseiten beschleunigen” – Übersicht
4.) Browser-Cache nutzen
4.1) Browser-Cache manuell einstellen
Falls du keinen Zugriff auf die Konfiguration von Apache hast, kannst du den Browser-Cache folgendermaßen beeinflussen. Nun wollen wir unseren JS/CSS Dateien noch einen Header mitgeben, welcher wiederum bewirkt, dass der entsprechende Browser (Client) die Datei für eine gewisse Zeit speichert und für „neu“ hält, dies spart wieder Traffic, welchen wir nicht bezahlen müssen und außerdem beschleunigt es den Seitenaufruf.
CSS in PHP umbenennen, um den php-Code in der Datei ausführen zu können.
mv test.css test.css.php
Anschließend werden wir am Anfang der Datei folgendes mit einfügen.
<?php
require_once("gzipCSS.php");
?>
Im folgenden Beispiel wird die Datei für 3 Tage (60 * 60 * 24 * 3) gespeichert.
vim gzipCSS.php
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
JS in PHP umbenennen, um den php-Code in der Datei ausführen zu können.
mv test.js test.js.php
Anschließend werden wir am Anfang der Datei folgendes mit einfügen.
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
[stextbox id=”info”]Falls man die Komprimierung jedoch bereits serverseitig aktiviert hat, hatte ich das Problem, dass die Webseite nicht zu-ende geladen werden konnte, daher würde ich empfehlen auf diese Methode zu verzichten, sofern man Zugriff auf das System hat und die Einstellungen am Webserver selber einstellen kann, zumal es relativ lange dauern dürfte, bis man alle Dateien auf diese weiße optimiert hat![/stextbox]
Link:
www.php.net/ob_gzhandler
www.php.net/zlib
4.2) Browser-Cache serverseitig einstellen
Expires – in diesen Header-Eintrag wird, für jede Server-Antwort festgelegt, wie lange diese gültig ist. Um jedoch erst-einmal zu verstehen, was in diesem Header steht folgt ein kleines Beispiel in
PHP:
function setExpires($expires) {
header(
'Expires: '.gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
}
setExpires(10);
echo ( 'This page will self destruct in 10 seconds<br />' );
echo ( 'The GMT is now '.gmdate('H:i:s').'<br />' );
echo ( '<a href="'.$_SERVER['PHP_SELF'].'">View Again</a><br />' );
nach 10 Sekunden ist diese Webseite alt und muss vom Browser erneut geladen werden.
weitere Beispiele:
www.sitepoint.com
Kommen wir nun zurück zur Konfiguration von Apache, um „expires“ zu aktivieren führen wir unter Linux Debian/Ubuntu folgendes Kommando aus.
a2enmod expires
a2enmod headers
Nun passen wir die entsprechende Konfiguration an, um bestimmte Dateien für eine gewisse Zeit clientseitig zu speichern.
vim /etc/apache2/mods-available/expires.conf
<IfModule mod_expires.c>
AddType image/vnd.microsoft.icon .ico
AddType application/javascript .js
AddType application/x-tar .tgz
AddType text/plain .c
AddType text/plain .h
ExpiresActive On
ExpiresDefault "access plus 4 houres"
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"
ExpiresByType image/ico "access plus 3 month"
ExpiresByType image/x-icon "access plus 3 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType video/x-flv "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 months"
ExpiresByType video/mp4 "access plus 1 months"
ExpiresByType video/mpeg "access plus 1 months"
ExpiresByType video/x-ms-wmv "access plus 1 months"
ExpiresByType audio/mpeg "access plus 1 months"
ExpiresByType audio/y-wav "access plus 1 months"
ExpiresByType application/pdf "access plus 2 weeks"
ExpiresByType application/zip "access plus 2 weeks"
ExpiresByType application/x-tar "access plus 2 weeks"
ExpiresByType application/x-download "access plus 2 weeks"
ExpiresByType application/ps "access plus 2 weeks"
ExpiresByType application/msword "access plus 2 weeks"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType application/xml "access plus 24 houres"
ExpiresByType application/xhtml+xml "access plus 24 houres"
ExpiresByType text/html "access plus 12 houres"
ExpiresByType text/htm "access plus 12 houres"
ExpiresByType text/plain "access plus 12 hours"
ExpiresByType text/xml "access plus 12 hours"
<IfModule mod_headers.c>
<FilesMatch "\\.(ico)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
<FilesMatch "\\.(css|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>
<FilesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</FilesMatch>
<FilesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=300, private, must-revalidate"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
ExpiresActive Off
Header unset Expires
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
</FilesMatch>
</IfModule>
FileETag none
</IfModule>
… und den Apache-Webserver neu-starten, um die neue Konfiguration zu übernehmen.
/etc/init.d/apache2 restart
Nun werden bestimmte Daten z.B. Bilder erst nach einem Monat wieder von der Webseite geholt, solange diese noch im Cache des Browsers sind und nicht manuell neu angefragt werden (F5).
ohne Expires:
mit Expires:
Die Grafik sind ebenfalls von YSlow, die Erweiterung, welche ich am Anfang des Artikels bereits beschrieben habe. Im ersten Bild siehst du die Ausgabe, wenn ein neuer Besucher (leerer Browsercache) meine Seite besucht und im zweiten, wenn z. B. ein Stammbesucher die Website aufruft, somit lässt sich gut erkennen wie viel Traffic it dieser Methode bereits bei einem Seitenaufruf eingespart werden kann, rechnet das mal für einen Monat hoch. ^^
Syntax:
ExpiresByType <TYPE> “<BASIS> [ plus ] <ANZAHL> <TYP>”
- <TYPE> hier wird der Datei-Type definiert
- <BASIS>
– modification ist das Änderungsdatum
– access oder now stehen für den Zugriffszeitpunkt
Das Schlüsselwort „plus“ ist optional. Es verdeutlicht die Tatsache, dass die nachfolgende Zeitangabe zum Basiszeitpunkt addiert wird
- <ANZAHL> ist eine beliebige positive ganze Zahl
- <TYP> können folgende Angaben sein
– year/years (Jahre)
– month/months (Monate)
– week/weeks (Wochen)
– day/days (Tage)
– hour/hours (Stunden)
– minute/minutes (Minuten)
– second/seconds (Sekunden)
Link:
www.askapache.com
