What is Browser Caching?
Browser Caching is a process of storing and saving some of these files locally in the user’s browser. This means that if a visitor now reloads the website or visits another inner pages, the browser won’t re-fetch some data (e.g. logo, some css files) because it already has it stored in the browser. The result is that the page loads faster than before.
Initial visit may take some time to load your website but subsequent visits to inner pages or reloading of the website will be much faster due to browser caching.
How does browser caching works?
Browser caching marks certain areas or parts of your website, which can be required to be updated at certain regular intervals. Let me explain…your site’s logo which is not going to change often. So by caching the image, we can instruct the user’s browser to download that image and re-check if we have made any change to logo after one week or one month or one year. So if you have instructed the browser to re-check after one month, then for every page load of your website, the browser will not fetch your logo and will serve it locally because it was cached during your first visit. It will only check for any change to logo after one month.
By instructing the browser to do so saves the server time to fetch images and other files which saves user’s time and server bandwidth also.
It is very vital to use browser caching because it reduces the load on your website’s server and ultimately reduces the load time for your users.
How to leverage browser caching?
If you have tested your site through any of the website testing tool mentioned in my previous post and found that you need to leverage browser caching, then here is how to do it.
It is done by putting some code in .htaccess file which is on your root folder of a website.
That means you’ll have to login to your cPanel, open file manager and open .htaccess file. This file is very important for your website and it can break your website if used improperly.
Use it with caution. In reality, it is quite simple. For this tutorial, if you can cut and paste correctly, you should be worry-free.
Important! To make use of Expires headers the way it’s explained in this blog post, your server must be Apache (and requires the module mod_expires) and you must have access to your .htaccess file. If you don’t know what this means, talk with your hosting company first.
The code below should be added to your .htaccess file.
# Enable expirations
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
# Turn on Expires and set default to 0
# Set up caching on media files for 1 year (forever?)
Header append Cache-Control "public"
# Set up caching on media files for 1 week
Header append Cache-Control "public"
# Set up 2 Hour caching on commonly updated files
Header append Cache-Control "proxy-revalidate"
# Force no caching for dynamic files
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
Save the .htaccess file and refresh your webpage.
How to identify different caching times with respect to different file types?
As you can see in the above code, we have some alpha-numeric code like A31536000 and A3600. They are time periods associated with the file types.
A31536000 corresponds to 1 year
A2592000 corresponds to 1 month
A604800 corresponds to 7 days or 1 week
A86400 corresponds to 1 day
A3600 corresponds to 1 hour
For example, the above code says that an image of .jpeg type be cached for one year. If you wanna change that to one hour, you simply change the value from A31536000 to A3600
The above mentioned values with respect to the file types are standard for most blogs and webpages, however you can change it to suit your requirement but if you are just blogging like others then it is not advisable to change anything from above code.
Did you find this tutorial useful? Do you have questions or feedback? Let me know in the comments below.
Remember to share the knowledge to your friends in your network on Facebook, Twitter, Google+ and many more.