This post elaborates on a previous general client side caching, please read:
speed-up-your-site-with-client-side-caching
PLEASE READ THE URL ABOVE – MOST USERS SHOULD USE THE ABOVE INFORMATION
The following information is for advanced users only and are presented as examples only. All sites are different, all needs are different. This is not a copy and paste configuration. Please use the examples as understanding the cache control features.
Remember, cache control is for all clients, web browsers and CDN proxy servers alike.
Setting long cache times results in less load on your server/site and less bandwidth. Better caching results in faster page load times and better google page scores.
If you don’t set your cache control, you basically let the brower/proxy/cdn determine these values for you. The following is an example of setting up cache controls for various file types. Please understand these are examples only. They are not intended to illustrate the best optimizations for your site. Research first and get a better understanding before applying these very useful tools and how your site can benefit.
This code is to be placed in your .htaccess file. If you do not know what you are doing, you could cause your site to 500 page error by simple typos. Please refer this page to your site’s developer or programmer.
WARNING. Improper use of htaccess or simple typo can render your site broken / inoperable. Don’t scream at your neighbor if you forget to make a backup of your file. Then, if things go wrong, you can just upload your original .htaccess file to the server. Backups are important, you have been politely warned.
NOTICE: Please note that the max-age values are not optimized and are simply used here as examples. Google recommends 7 days or even longer for static objects. The longer the browser holds content for your site, the more bandwidth and server resources are saved.
ExpiresActive On
# Expires after 2 hours example for developers who may be updating their files
# frequently. Once complete, you should set the times for 1 week or longer.
<filesMatch ".(gif|png|jpg|jpeg|ico|pdf|flv|swf)$">
Header set Cache-Control "max-age=7200"
# Expires after 300 seconds
<filesMatch ".(css|htm|html)$">
Header set Cache-Control "max-age=300"
Header append Vary: Accept-Encoding
# No caching
<filesMatch ".(php|html)$">
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header append Vary: Accept-Encoding
# Set a short cache time for a rapidly updated file or file in development
ExpiresDefault "access plus 20 seconds"
# Header append Vary: Accept-Encoding
# Only use the above for JavaScript and CSS files, else, poor caching rates will result.
Remember, setting the times for as long as possible results in resource consumption on your server. However, if you are editing common files frequently, you may wish to have a lower time for those files. If your files rarely change, setting the max age to a week or a month is advisable.
Cache times are up to the site owner’s discretion. For more understanding, please reference Google’s documentation for detailed explanation and other site performance and optimization tips: