htaccess – caching of files in the browser

  htaccess, Web hosting

Here is described page caching sites into the browser cache on file storage – mostly on the local hard drive of the computer. Then there is no loading of resources from the WWW server (images, JavaScript, CSS, etc.), but uses the browser cache. Loading the whole site can be greatly faster.

The behavior of the browser cache can be controlled with the appropriate HTTP headers either individually or by file types.

For Apache webserver (ie at our webhosting) is one of the caching options to set using of the mod_expires by adding of the relevant rules in a file .htaccess.

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
  • A31536000 is the value indicating how long the file stored in the browser cache in seconds. After this value, the files marked as Expired and when you load the page again files are downloaded from web server. 
  • ExpiresDefault the value of other non-defined files and setting up their time to load.
  • image/jpg the type of cached file, here is chosen according to php file type that you want to cache. 

As an alternative, you can still use the following version. This version does not only compression but provides additional caching files. 

 In case that this code will not work with our htaccess, so move web to directory domains/yourdomain.tld and move there. htaccess with this code and possibly other additional rules given by the site manufacturer.

Tested settings of .htaccess, which includes compression:

# BEGIN Compress text files

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

# END Compress text files

# BEGIN Expire headers

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"

# END Expire headers

# BEGIN Cache-Control Headers


Header set Cache-Control "public"


Header set Cache-Control "public"


Header set Cache-Control "private"


Header set Cache-Control "private, max-age=360, must-revalidate"


# END Cache-Control Headers

# BEGIN Turn ETags Off
Header unset Pragma
FileETag None
Header unset ETag
# END Turn ETags Off

The correct page caching, processing speed and other tests you can try by using these tools:

http://tools.pingdom.com/fpt/

a

http://www.webpagetest.org/