Speed website by adding browser cache
There are some easy things that you can do to speed up a website by making use of the browser cache. Using the browser cache you can also reduce the load on your web server.
Normally the modules that we would use are mod_expires and mod_headers which are normally installed by default and just need to be enabled.
You can do this very easily using the bellow commands:
- Ubuntu/Debian based OS
1 2 3 4 |
a2enmod headers a2enmod expires # and then restart your webserver /etc/init.d/apache2 restart |
- Centos/Fedora/Redhat
For these OS’s you usually have these already installed/enabled by default. You can also use the command to check the enabled modules:
1 |
httpd -M |
These settings can be set directly inside the apache web server configuration or by setting the values inside the .htaccess file in the root of your website.
Examples off similar configuration that can be used are:
- mod_expires + mod_headers
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
# Turn on Expires and set default to 0 ExpiresActive On ExpiresDefault A0 # Set up caching on media files for 1 year (forever?) <filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresDefault A29030400 Header append Cache-Control "public" </filesmatch> # Set up caching on media files for 1 week <filesmatch "\.(gif|jpg|jpeg|png|swf)$"> ExpiresDefault A604800 Header append Cache-Control "public" </filesmatch> # Set up 2 Hour caching on commonly updated files <filesmatch "\.(xml|txt|html|js|css)$"> ExpiresDefault A7200 Header append Cache-Control "proxy-revalidate" </filesmatch> # Force no caching for dynamic files <filesmatch "\.(php|cgi|pl)$"> ExpiresActive Off Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" Header set Pragma "no-cache" </filesmatch> |
headers
You can also use just the mod_expire or mod_headers separately like in the bellow example:
- mod_headers
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 1 YEAR <filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> Header set Cache-Control "max-age=29030400, public" </filesmatch> # 1 WEEK <filesmatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=604800, public" </filesmatch> # 3 HOUR <filesmatch "\.(txt|xml|js|css)$"> Header set Cache-Control "max-age=10800" </filesmatch> # NEVER CACHE <filesmatch "\.(php|cgi|pl)$"> Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate" </filesmatch> |
- mod_expires
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# 1 YEAR ExpiresActive On ExpiresDefault A0 # 1 YEAR <filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresDefault A29030400 </filesmatch> # 1 WEEK <filesmatch "\.(jpg|jpeg|png|gif|swf)$"> ExpiresDefault A604800 </filesmatch> # 3 HOUR <filesmatch "\.(txt|xml|js|css)$"> ExpiresDefault A10800 </filesmatch> |
It is very good to rely on browser cache whenever possible. You can easily add these settings in your .htaccess file directly, although some hosting providers will use the above settings for you by default.