Caching is one of the most important things to keep in mind when you are developing a website which is expected to get large amount of visitors. Most web developers neglect caching, some even don’t know correct ways to implement it.
In this tutorial, I’ll show you how to enable browser cache of static files simply using htaccess file. Basically server adds the Expires header to file-type you specify. Expires header will make sure the browser stores the file locally and use the same file until the time mentioned in expires header has passed.
Before we move ahead, please make sure apache’s mod_expires is loaded. You can check it using phpinfo() under ‘Loaded Modules’ section. If you don’t find it there, you can see this tutorial to enable mod_expires.
Copy the following code and paste it into .htaccess file in your website’s root directory.
# Turn on the Expires engine ExpiresActive On # Expires after a month client accesses the file ExpiresByType image/jpeg A2592000 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/x-icon A2592000 ExpiresByType text/plain A2592000 # Good for one week ExpiresByType application/x-javascript M604800 ExpiresByType text/css M604800 ExpiresByType text/html M604800 |
Explanation:
ExpiresActive On turns on the expires engine. ExpiresByType image/jpeg tells server to check if MIME-type of file is image/jpeg. If yes, set the expires header.
‘A’ in A2592000 stands for ‘Access’ and it means set the expires header for 2592000 seconds (1 month) after the user has accessed the file. ‘M’ stands for ‘Modified’. M2592000 would mean ‘set expire date to one month after the file has been modified’.
Images are not likely to change even in years. Hence, you can set several months of expiry time in that. Whereas, css and javascript are likely to be modified. Therefore, we put a week’s expire header in css, javascript and html files.
Check out the official documentation to read more about the mod_expires module.
Some people would argue that explicitly setting ‘expires’ header is not a good idea as it would override the default caching mechanism of the browser. But the fact is that browsers use ‘ETag’ header to cache the data. They would still request the server to see if the content has changed by matching the ETag of the local cached copy of the data and server’s copy. If the Etags are different, it would know the data has been changed and would download the new data. But this mechanism still requires the browser to send request for each object to check if a newer one is available adding fractions of second of lag for each request. Server has to still serve the response. This makes this method comparitively inefficient.
On the other hand, explicitly setting expire would make the browser not to send request until expire date has passed which means very few requests are made. Hence, very fast page loading.
Thus, using this file is advisable as it would make your website load faster on the viewers computer and would ease the burden on your server too.
Comments and suggestions are more than welcome.
Cheers!