Throughout my experience working with web sites, one of the ways that I’ve found to improve performance and page load time is to leverage the browser cache to cache static resources.
By leveraging the browser cache and saving infrequently changed files to the local browser you are able to reduce the number of HTTP requests necessary to retrieve required resources and you are able to reduce the total payload size of the responses. In addition you’ll find that you significantly reduce the bandwidth demands of your web site. Keep in mind that the resources required to display a page have to be downloaded at least once to be cached, so this optimization is truly experienced when visitors visit more than one page on your web site, or frequently visit your web site.
What resources should you be caching? Good question, typically the resources that will be cached are: JS and CSS files, image files (JPG, PNG, GIF, ICO), binary object files (video files, PDF files, SWF files) and many, many more; however, HTML files and those generated by your web application should not be considered static files.
It is recommended that you configure your web server to set explicit caching headers and apply them to every possible static resource that can be cached. To accomplish that it is recommended that you set the ‘Expires’ header and the ‘Cache-Control: max-age’ header for all static resources. These headers set a cache lifetime of the resource and the browser upon caching the resource will not make an additional request until the expiry date or maximum age is reached.
You can specify different cache lengths for different resources and can break them out as you see fit. I find its great to be quite aggressive on some resources, and less aggressive on others. Some frequent caching directives that I include on my web site are shown in the source below. You’ll find that I’m setting the cache headers according the a FileMatch directive and these can be changed as you see fit for your particular needs. I’ve added these directives into an .htaccess file placed at the root of my application, and find that they provide the benefits they are advertised as doing. They can also be added to your httpd.conf file for implementation.
# 1 YEAR CACHE LENGTH (AGRESSIVE)
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK CACHE LENGTH (MODERATE)
<FilesMatch "\.(jpg|jpeg|png|gif|swf|xml|txt|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
