Die Ladegeschwindigkeit von Seiten können Sie mit einer Technik verbessern, die Caching genannt wird. Dabei geht es um Dateien der Website, die
im Zwischenspeicher des Browsers abgelegt werden und nicht bei jedem Besuch der Seite neu geladen werden müssen, sondern aus dem Zwischenspeicher des Browsers verwendet werden.
Anleitung zur Einrichtung der Zwischenspeicherung statischer Dateien der Website im Browser-Cache für schnelleres Laden der Seiten
Das hier beschriebene Caching von Seiten bedeutet, dass Seitendateien im Zwischenspeicher des Browsers abgelegt werden, meist auf der lokalen Festplatte des Computers. Es werden dann nicht alle Ressourcen (Bilder, JavaScript, CSS-Stile usw.) vom Webserver geladen, sondern der Browser-Cache wird genutzt. Das Laden der gesamten Seite kann dadurch deutlich schneller sein.
Das Verhalten des Browser-Caches lässt sich über die entsprechenden HTTP-Header beeinflussen, entweder einzeln oder nach Dateitypen.
1. Möglichkeit
Beim Webserver Apache (also bei uns im Webhosting) kann das Caching unter anderem mit dem Modul mod_expires eingerichtet werden, indem die entsprechenden Regeln in die Datei .htaccess geschrieben werden.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/javascript A604800
ExpiresByType application/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/x-icon A604800
ExpiresByType text/html A60
</IfModule>
- A31536000 ist ein Wert in Sekunden, der angibt, wie lange die jeweilige Datei im Zwischenspeicher des Browsers aufbewahrt werden soll. Nach Ablauf dieses Werts werden die Dateien als abgelaufen markiert und beim nächsten Laden der Seite erneut heruntergeladen.
- ExpiresDefault ist der Wert für die übrigen nicht definierten Dateien und legt deren maximale Ladedauer fest.
- image/jpg ist der Typ der zwischengespeicherten Datei. Hier wählen Sie entsprechend dem PHP-Typ die Dateien aus, die zwischengespeichert werden sollen.
2. Möglichkeit
Als alternative Lösung können Sie noch die folgende Variante verwenden. Diese Variante komprimiert nicht nur, sondern sorgt auch für das Caching weiterer Dateien.
Falls dieser Code mit unserer htaccess nicht funktioniert, legen Sie die Website im Verzeichnis domains/ihre_domain_endung ab und legen Sie dort eine .htaccess mit diesem Code und gegebenenfalls weiteren Einträgen ab, die Sie vom Ersteller der Website haben.
Bewährte .htaccess-Einstellung inklusive Komprimierung:
# BEGIN Compress text files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE \
text/html \
text/xml \
text/css \
text/plain \
image/svg+xml \
application/xhtml+xml \
application/xml \
application/rdf+xml \
application/rss+xml \
application/atom+xml \
text/javascript \
text/ecmascript \
application/javascript \
application/x-javascript \
application/ecmascript \
application/json \
application/x-font-ttf \
application/x-font-otf \
font/truetype \
font/opentype \
application/x-pointplus
</ifModule>
# END Compress text files
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 604800 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, max-age=360, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# BEGIN Turn ETags Off
Header unset Pragma
FileETag None
Header unset ETag
# END Turn ETags Off
Die korrekte Funktion und vor allem die Veränderung der Ladegeschwindigkeit der Seiten können Sie mit Tools auf einer der folgenden Websites testen: