Jump to content

Apache Browser Caching mit htaccess

From Parasol

Mit der .htaccess Datei konfigurieren wir einfach das Browser Caching bei Apache Webservern (bsp. bei Host Europe). Die beiden nötigen Module sind quasi immer installiert. Der Effekt ist in im Google Page Speed Analyser sofort sichtbar und bringt eine hohe Steigrung der Punktzahl. Die wesentlichen Zeilen erklärt:

 <filesMatch ".(css|jpg|jpeg|png|gif|js)$">

Welche Dateien/Endungen werden mit "Cache-Control" Header ausgeliefert. Dies sollten generell alle (ausser .php) sein. Um zu vermeiden, dass Dateien gecacht werden, ein ?rad=<?php echo rand(0, 99); ?> an den Dateinamen hängen. Um bsp. CSS oder JS Dateien immer in der richtigen Version auszuliefern, diese im Build mit einer Version versehen (main.js?v={Version}). "max-age=86400" ist die Cache Dauer in Sekunden (je länger, desto besser... 31536000 = 1 Jahr; 86400 = 24h; 2592000 = 1 Monat)

mod_gzip_item_include file .(html?|txt|css|js|php|pl|svg)$

Welche Dateien/Endungen, die ge gziped ausgeliefert werden. Hier gibt es kein Caching, lediglich die Dateien werden komprimiert übertragen. Das Deflaten nicht vergessen.

Beispiel .htaccess

[edit]
<filesMatch ".(css|jpg|jpeg|png|gif|js)$">
Header set Cache-Control "max-age=86400, public"
</filesMatch>

<filesMatch ".(ico|svg|woff)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl|svg)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>