how to set cache for css/js file.

Question

Hi all,

I have to use the cache for the css files and js file which i used in the site. my site running in a shared hosting server. nothing can be done with server.

so what could be the solution for use cache and compression for js and css files.

Answer 1

You do need an access for the server for manage the http headers that the server renders to the browser.

Answer 2

If you can use PHP5, use Minify... It will compress, obfuscate and cache your HTML/CSS without changes in the script (JS/CSS) source code.

If you cannot use PHP5 on your server, compress & obfuscate your files with YUI Compressor and cache your files using .htaccess:

<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

Answer 3

If you are using Apache, I would start here.

• http://www.askapache.com/htaccess/htaccess.html
• http://www.askapache.com/htaccess/speed-up-your-site-with-caching-and-cache-control.html#caching-with-mod_expires

Compression and caching are different things.

For compression, PHP Minify or YUI Compressor are great. If all else fails, TextMate has a nice Javascript Tools Bundle that allows your to compress your code. You could manually compress your code, then upload it, and undo the compression to get the source back to a readable state. I do not recommend this, but I have done it before.

For caching, read the askapache.com site. There are several easy ways to turn on mod_expires, mod_compress, and other modules. Since you are on shared hosting, here are caveats because the host may have turned off certain Apache modules. I have used GoDaddy, and they turn off mod_expires. For host specific information about Apache modules refer to the hosts support documentation.

If you are luck, the important ones are on and you can:

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  SetEnvIfNoCase Request_URI \
  \.(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpg "access 2 month"
  ExpiresByType image/gif "access 2 month"
  ExpiresByType image/jpg "access 2 month"
  ExpiresByType image/jpeg "access 2 month"
  ExpiresByType image/png "access 2 month"
  ExpiresByType text/css "access 2 month"
  ExpiresByType application/x-javascript "access plus 2 month"
  ExpiresByType text/javascript "access plus 2 month"
  ExpiresByType application/javascript "access plus 2 month"
  ExpiresByType image/x-icon "access plus 12 month"
  ExpiresByType image/icon "access plus 12 month"
  ExpiresByType application/x-ico "access plus 12 month"
  ExpiresByType application/ico "access plus 12 month"
</IfModule>`

Put this code in your .htaccess file, open FireFox, then Firebug, then YSlow. Run the YSlow test, it will let you know whether the caching is working.