Chrome Devtool do not show Content-Encoding in response headers

gzip header
transfer-encoding vs content-encoding
text-based resources should be served with compression
http compression
gzip compression
angular gzip
how gzip works

I´m enabling gzip compression to increase the speed in Google PageSpeed Insights:

If compressed mantaspersonalizadas.com/fonts/Cocktail-Shaker.svg, would save 144.1 KB (65% reduction). If compressed mantaspersonalizadas.com/fonts/Cocktail-Shaker.ttf, would save 62.6 KB (49% reduction). If compressed mantaspersonalizadas.com/fonts/Cocktail-Shaker.woff, would save 2.6 KB (5% reduction).

I use an Apache Server, I add this code to .htacess:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/opentype

# For Olders Browsers Which Can't Handle Compression
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

How to check if deflate is enabled in my local server?

Chrome DevTools don´t show Content-Enconding:

Let's put it to the test.

Chrome request to example.com (contains gzip):

GET / HTTP/1.1
Host: www.example.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.75 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
If-None-Match: "359670651"
If-Modified-Since: Fri, 09 Aug 2013 23:54:35 GMT

Chrome response from example.com (does not contain gzip):

HTTP/1.1 304 Not Modified
Accept-Ranges: bytes
Cache-Control: max-age=604800
Date: Thu, 08 Dec 2016 14:06:04 GMT
Etag: "359670651"
Expires: Thu, 15 Dec 2016 14:06:04 GMT
Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT
Server: ECS (iad/182A)
Vary: Accept-Encoding
X-Cache: HIT

Curl request (clone of Chrome request, contains gzip):

curl -I
    -H "GET / HTTP/1.1"
    -H "Host: www.example.com"
    -H "Connection: keep-alive"
    -H "Cache-Control: max-age=0"
    -H "Upgrade-Insecure-Requests: 1"
    -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.75 Safari/537.36"
    -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8"
    -H "Accept-Encoding: gzip, deflate, sdch"
    -H "Accept-Language: en-US,en;q=0.8"
    -H "If-None-Match: "359670651""
    -H "If-Modified-Since: Fri, 09 Aug 2013 23:54:35 GMT"
    example.com

Curl response (contains gzip):

HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Cache-Control: max-age=604800
Content-Type: text/html
Date: Thu, 08 Dec 2016 14:18:34 GMT
Etag: "359670651"
Expires: Thu, 15 Dec 2016 14:18:34 GMT
Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT
Server: ECS (iad/182A)
X-Cache: HIT
x-ec-custom-error: 1
Content-Length: 606

Conclusion

Chrome does currently not show the content-encoding. Neither does Firefox. I don't know why.

Now that I know they're not showing me everything, I'm never trusting either with response header information ever again.

Curl all the way.

Show content encoding in Chrome devtools network panel, Enable text compression, Check if a response was compressed in Chrome DevTools. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools. Click the Network tab. Click the request that caused the response you're interested in. Even if the headers show in Chrome devtools they're not necessarily included in a CORS response. I explicitly exposed the Content-Disposition header server side and all worked. Cheers cheers!

It seems a problem Chrome browser, I had same problem I though that deflate is not working at the server, but then I tried Firefox and used firebug which correctly showed Content-Encoding in the headers.

Also the downloaded file size in Chrome didnt showed the uncompressed file size, while Firefox showed the correct compressed files size.

Is there an easy way to see amount of compression in Chrome , I knew showing more details about the response was possible but the trick is to right-click Duration: 0:33 Posted: May 1, 2014 To view the request or response HTTP headers in Google Chrome, take the following steps : In Chrome, visit a URL, right click, select Inspect to open the developer tools. Select Network tab. Reload the page, select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.

As @Jay stated

Chrome does currently not show the content-encoding. Neither does Firefox. I don't know why.

As of december 2018, same behavior in both Chrome and Firefox, and Firebug is gone.

The Firefox Developer Edition does the trick for me, showing the correct content encoding within the response headers section ([F12] -> Network Tab -> select a ressource -> Headers Tab).

Screenshot: content encoding shows up in Firefox Developer Tools

How to know if a site is gzipped?, Under "Response Headers" you should see "Content-Encoding: gzip" followed by a When using large icons, the chrome dev tools show a before and after  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.

Enable text compression, If you're using Chrome or Firefox, you can open the developer tools and see it. entry in the list and select Headers on the right side, it'll list all the response headers for the page. If you find Content-Encoding: gzip in the list, then the page is gzip-compressed. If you dont have Chrome installed here are some alternatives:. Right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have checkmarks next to them. Figure 17. Adding a column to the Requests table. Add

How to view HTTP Headers in Google Chrome?, Learn about how enabling text compression can improve your webpage load performance. Do not include a content-encoding header set to br , gzip , or deflate . is less than 10% of the original size, then Lighthouse does not flag that response in the results. See Browser compatibility for updates. It gets down here, and it requests bundle.js, and you can see these showing up here in that same order. Just like our request had a bunch of headers that contained metadata for contextualizing that request, the response also had a bunch of headers. In this case we see that here's how many bytes this response took up.

Measure Resource Loading Times, 1- View the Http Headers in Chrome Tools and you can see Http Headers ​​​​​​​​information. Accept-Encoding: gzip, deflate. The Search pane lists all instances of Cache-Control that it finds in resource headers or content. Figure 20. Search results for Cache-Control. Click a result to view it. If the query was found in a header, the Headers tab opens. If the query was found in content, the Response tab opens. Figure 21. A search result highlighted in the Headers tab

Comments
  • I stumbled upon this after messing with my production server for 2hrs! I can confirm that, as of october 2017, Chrome+Firefox don't even display the compression hreader for the main page in DevTools, but they does for every other resource (such as CSS, JS and even Ajax-loaded page). See here: s1.postimg.org/2rv29kk73j/z_Shot_1507239352.png The proposed curl trick works reliably for me.