How can I test whether or not my gzipped css file is being served?

Question

I'm using jammit to embed data-uri's in my rails app. This is not a jammit or rails specific question though.

For each css file generated, jammit creates two versions i.e.:

• style-datauri.css (75KB)
• style-datauri.css.gz (40KB)

I know that everything is working because my production app is serving data-uri's to firefox and chrome, and whilst I don't have access to IE, screenshots from browsershots suggest that all is well.

Q1: How can I test that the gzipped version of my stylesheet is the one which is being served to the browser? I care because it's a significantly smaller file.

(I guess I could change the font-size in the non-gzipped css file and see what happens but I'm hoping there's a simpler way - perhaps using curl or something)

Q2: The app is hosted on heroku and I know from their docs that they gzip everything for you, but I'm also told that jammit uses the highest compression level and that heroku don't. Will my file be gzipped twice then? Once by jammit, and then once more by nginx?

Answer 1

Q1

You can inspect the HTTP headers to guess what's happening; nginx can be told to serve gzipped version of your css or to create a zipped version on the fly, but I am not sure you can easly say what is being server from the client point of view.

Q2

Heroku sports a powerful caching / optimizing frontend system powered by nginx and Varnish; they will be happy to explain you how to make your app consuming less resources.

BONUS

Loading the home page of your web app my browser downloads over 1MB of data; to make it snappier you can lazy load images via Javascript.