Is there an easy way to see amount of gzip compression in Chrome

Question

I am busy checking how my webserver is doing gzip. I'm confident now that gzip is on as chrome shows the content-encoding: gzip header.

Is there a easy way to see how much a file was compressed in the Chrome developer tools?

Answer 1

By far the easiest method is to use an online tool. GIDZipTest shows you plenty of detail: the original size, compressed size and compression percentage.

---

However, it is possible in Chrome with a bit of effort. (Updated for latest Chrome, Sept 2011.)

In the Developer Tools, go to the "Network" tab and reload the page. You will see a list of all the files fetched on the left column. Click the appropriate page/file on the left then the "Headers" tab on the right pane.

Under "Response Headers" you should see "Content-Encoding: gzip" followed by a "Content-Length" header. This is the size of the compressed content.

Finding the uncompressed size is more difficult. If you're serving up static files you can simply check its size. For dynamic content you'll have to copy-paste the HTML into a text editor and save it to check the exact size.

Answer 2

I second the answer about Yslow, if you want to see specifically how much an individual resource was reduced by gzip.

Also a great way to easily and quickly check for gzip on resource files is a new service gzipWTF . It's a lot easier than fiddling through browser plugins if you just want a good summary.

Answer 3

This isn't a tool for Chrome specifically, but I use Fiddler when checking HTTP traffic/header information. It's a great tool, works on any browser and it's free!

Answer 4

I've heard the one in chrome is flawed due to a bug in webkit.

The Y Slow Plugin for firefox does a great job. When running it go to the Components tab and expand the type of component you want the values for. It will show the original size and the gzip size.