gzip JS and CSS files?

[Slapyo]

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?

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

[Slapyo]

i took some time this morning and applied this to my javascript files and my css files.

before, it was 402k.
after, it is 97k.

that's a huge improvement and much more reasonable as well.

[moraes]

there's also a discussion about gzip here:

http://www.yui-ext.com/forum/viewtopic.php?t=1685

[kato]

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.

[trbs]

Using mod_deflate (on apache) or an alike feature in your webserver / webstack / webframework works quite well for me.

Most of the mature gzip implementations for web usage detect and handle those IE cases quite nicely.. (at least it has been tested by lots of other people and sites)

specially if u also configure server side caching of the gzipped data, so that your webserver does not have to gzip ext-all.js for every new request.

my $0.02

[kato]

Hi trbs,

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.

[trbs]

just checked this against my production server with firefox.

it's a debian linux / apache2 box with mod_deflate enabled on css, javascript and html files.

when i load it the first time firebug reports:
ext-all.js 125KB content-encoding: gzip
ext-all.css 12KB content-encoding: gzip
the total load contained 19 request totalling 163KB

* the files are respectivly 455KB and 71KB on disk.

the next time i reload the page firebug report:
ext-all.js 125KB content-encoding: gzip
ext-all.css 12KB content-encoding: gzip
the total load contained 19 request totalling 162KB (160 KB from cache)

it appears to be caching the requests just fine.

i cannot speak for Internet Explorer but i found this link: http://www.port80software.com/200ok/...01/21/272.aspx

# 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.

I dont have IE to test with, but at least it's a known problem.

[kato]

Thanks for the feedback trbs. Just curious, have Ext's examples (i.e., http://extjs.com/playpen/ext-2.0/exa...rid/grid3.html) been caching correctly for you? The js files are gzipped too, but they're not cached on either FF or IE on my end.

[trbs]

no it's not, it doesn't cache the url.

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.

[Ronaldo]

Hi all,

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....

Any news on that? Does it work well on all major browsers?

Ronald