Browser Cache

Browser Cache

In Webdesign von Christian Arns0 Comments

Jede Webseite hat eine bestimmte Dateigröße, die im Browser Cache gespeichert wird. Das sind sämtliche Dateien, die auf deinen Server hochgeladen werden. Dabei spielt das Format keine Rolle. Egal ob Bilder, Videos, Slider oder JavaScript Dateien. Alle haben eine bestimmte Dateigröße, die unser Browser laden muss. Mit Tools wie „Google PageSpeed“ kann die Geschwindigkeit der geladenen Dateien gemessen werden.

Mit dem Browser Cache können wir dem Browser unseres Lesers helfen, die Dateien schneller zu laden. Anstatt, dass der Browser jede Datei neu von deinem Server herunterladen muss, speichert er sich diese Dateien einfach in dem Speicher des Rechners. Wenn also deine Seite neu angesehen wird, nimmt der Browser die Dateien aus dem Cache und spart sich dadurch wertvolle Ladezeit.

Anleitung

WordPress legt automatisch bei der Installation einen Datei an. Diese „.htaccess“ können wir mit einem FTP-Client herunterladen und bearbeiten. Falls du nicht mit WordPress arbeitest, solltest du diese Datei manuell anlegen. In dieser Datei sollten folgenden Zeilen stehen:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

Diese Zeilen musst du beibehalten und solltest du nicht verändern! Im Folgenden Code ist festgelegt, dass der Browser die Dateien von deiner Seite herunterladen darf und speichert. Kopiere den Code einfach und setze ihn unter den restlichen code in der .htaccess Datei.

Browser Cache Code

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES CACHING ##
<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"

Um zu testen, ob dieser Prozess funktioniert hat, kannst du einfach zweimal deine Seite mit „Google PageSpeed“ testen. Im besten Fall verändert sich dein Wert um 5-10 Punkte. Andere Punkte spielen bei diesem Ranking ebenfalls eine Rolle.

Leave a Comment