Mobile app version of vmapp.org
Login or Join
BetL925

: Is there an easy way to see amount of compression in Chrome? 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

@BetL925

Posted in: #Compression #GoogleChrome #Gzip

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?

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @BetL925

6 Comments

Sorted by latest first Latest Oldest Best

 

@Tiffany637

Update for 2017

When using large icons, the chrome dev tools show a before and after compression size in the network tabs.

I confirmed by switching gzip off and on on my webserver.

10% popularity Vote Up Vote Down


 

@Megan663

Updated answer for 2017: Yes.

The size tab in Chrome has both the compressed and uncompressed size, for gzip, brotli and whatever comes in future. Eg:



Here the compressed size is 242 KB, the uncompressed size is 1.1 MB

10% popularity Vote Up Vote Down


 

@Cofer257

Another way to accomplish this is with cURL:

curl -i -H "Accept-Encoding: gzip" someurl.com | wc -c


versus

curl -i someurl.com | wc -c


The number shown after each command is the number of bytes that crossed the wire.

10% popularity Vote Up Vote Down


 

@Jamie184

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!

10% popularity Vote Up Vote Down


 

@Cofer257

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.

10% popularity Vote Up Vote Down


 

@Smith883

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme