gzip JS and CSS files?

gzip JS and CSS files?

By placing the code below at the top of the CSS file, and renaming it to .php ... is this an appropriate way to gzip CSS files and JS files? Obviously the content type would be changed to text/javascript. Is there a better way to go about doing this?

I've been playing around with gzipped js and css files and while the overall sizes were reduced significantly (i.e., 466Kb down to 125Kb for ext-all.js), caching them is another issue. I've yet to figure out how to cache gzipped content.

Also, there have been concerns about IE's somewhat buggy handling of gzipped content. Might have been fixed in IE7, but there are still quite a lot of IE6 users.

I'm able to gzip js and css files successfully and cache them on the server and the results were great - reducing overall files sizes down to as low as 20%. The dilemma, however, is that they're not cached by browsers and therefore subsequent page requests will still consume quite some bandwidth to load the gzipped files from the server. While normal (not gzipped) files are automatically cached by browsers and take up negligible time to re-access.

Is it actually possible to work out client-side/browser caching of gzipped files? Most browsers may be caching files only after deflating them locally for execution/output. I'm still hoping there's someone out there who's figured out a way.

# re: The Vary header and HTTP Compression
Internet Explorer versions 4 through 6 all have a bug in dealing with the Vary header.

For versions 5 through 6, if the Vary header is set and its value is anything other than "Vary: User Agent", it will not cache the file if the file was served uncompressed to the browser - assuming the file is served with the correct headers to allow browsers/proxies to cache the content.

For version 4.x, it's worse in that setting any Vary header whatsoever will cause the browser not to cache any content.

it seems to cache google-analytics and images but not the compressed javascript.
it seems that on my server, it does not send the "Cache-Control: must-revalidate" header like extjs.com does and it's also sending some extra headers like: etags and last-modified.

My system administrator told me they used GZip in the past, but it used to give trouble for css files and javascript files, as not every browser (IE) could handle specifically these files well when GZipped....