56

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

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

Improve this question
1
  • 1
    If there's a plugin for viewing HTTP headers, then you could just compare the document size to the Content-Length header.
    – Lèse majesté
    Oct 29, 2010 at 13:19

7 Answers 7

Reset to default
66

Updated answer for 2017: Yes.

The size column in the Network tab in Chrome Developer Tools 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

To see both, ensure you have Devtools showing large request rows. You can find the checkbox by the gear icon "Network settings" in the Networks-specific toolbar.

enter image description here

Improve this answer
5
  • 13
    Thanks. Easy to miss that. One has to click "use large request rows"
    – alds
    Oct 12, 2017 at 6:43
  • Also you can right-click the column headers and show the "Content-Encoding" Response Header. After you do this you can sort by the column to get a quick list of all gzipped responses.
    – thirdender
    Aug 8, 2019 at 15:48
  • In case you wonder, it still works for 2020.
    – cytsunny
    Mar 12, 2020 at 3:43
  • If the only column you can see is the Name column, click the X to the right of the Name column. The other columns will then appear.
    – John Pick
    Jul 14, 2020 at 20:09
  • 1
    You can also hover over the size, and it will say e.g. "2.5 kB transferred over network, resource size: 4.6 kB"
    – Brian Davis
    Aug 23, 2022 at 14:03
21

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.

Improve this answer
3
  • where is the "enable resource tracking" ?
    – Pacerier
    Sep 24, 2011 at 2:10
  • @Pacerier: it's slightly different in the latest version of Chrome; I've updated my answer with new instructions.
    – DisgruntledGoat
    Sep 25, 2011 at 23:47
  • Neat tool. I couldn't figure out why responses being sent by my Google App Engine app weren't showing the compressed size. Responses sent by the SDK (ie localhost) aren't compressed while responses coming from the cloud are. Turns out, Chrome is working perfectly.
    – Evan Plaice
    Jun 4, 2012 at 23:56
13

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.

Chrome dev tools screenshot

enter image description here

Improve this answer
1
6

Another way to accomplish this is with cURL:

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

versus

curl -i http://someurl.com | wc -c

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

Improve this answer
2

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.

Improve this answer
2

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!

Improve this answer
2
  • 1
    There is a Chrome extension version of Fiddler now, too!
    – karlbecker_com
    Sep 16, 2014 at 23:19
  • 1
    Thanks for suggesting this. Fiddler doesn't show "uncompressed size" but does let you add columns for "CompressionSavings" and "CompressionSavings%". Add them by right-clicking the columns ==> "Customize Colums" ==> "Miscellaneous" ==> The "Field Name" dropdown.
    – JasonS
    Jan 7, 2016 at 15:09
2

For anyone still arriving here from a general google search (like I did), in modern versions of Firefox it's possible to see the "raw" and gzipped size directly from its devtools by comparing the "Transferred Size" column and "Size" column. "Size" is the raw size of the response, the "Transferred size" is the actual size of the data transferred for the response, which may be lower than actual size in case of gzip, like in the image below, or even 0 in case the response has been cached in the client.

firefox devtools gzipped size

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.