web-dev-qa-db-ja.com

Chromeで圧縮量を確認する簡単な方法はありますか?

ウェブサーバーがgzipを実行している方法を確認するのに忙しいです。 chromeがcontent-encoding:gzipヘッダーを示しているため、gzipがオンになっていると確信しています。

Chrome開発者ツールでファイルがどれだけ圧縮されているかを確認する簡単な方法はありますか?

32
Peter Smit

2017年の更新された回答はい。

Chrome Developer Toolsの[ネットワーク]タブの[サイズ]列には、gzip、brotliなど、今後の圧縮サイズと非圧縮サイズの両方があります。例えば:

ここでは、圧縮サイズは242 KB、非圧縮サイズは1.1 MBです

両方を表示するには、Devtoolsに 大きなリクエスト行 が表示されていることを確認してください。これは、ネットワーク固有のツールバーの「表示」オプションの最初のアイコンです。

29
mikemaccana

一番簡単な方法は、オンラインツールを使用することです。 GIDZipTest は、元のサイズ、圧縮サイズ、圧縮率などの詳細を表示します。


ただし、Chromeでは少し手間をかけることができます。 (最新のChrome用に更新、2011年9月。)

開発者ツールで、「ネットワーク」タブに移動し、ページをリロードします。取得したすべてのファイルのリストが左側の列に表示されます。左側の適切なページ/ファイルをクリックしてから、右側のペインの「ヘッダー」タブをクリックします。

「応答ヘッダー」の下に「Content-Encoding:gzip」と「Content-Length」ヘッダーが表示されます。これは、圧縮されたコンテンツのサイズです。

非圧縮サイズを見つけることはより困難です。静的ファイルを提供する場合は、サイズを確認するだけです。動的コンテンツの場合、HTMLをコピーしてテキストエディターに貼り付け、保存して正確なサイズを確認する必要があります。

18
DisgruntledGoat

2017年の更新

大きなアイコンを使用する場合、chrome devツールは、ネットワークタブに圧縮前後のサイズを表示します。

ウェブサーバーでgzipのオンとオフを切り替えて確認しました。

Chrome dev tools screenshot

enter image description here

9
CodeMonkey

これを実現する別の方法は、cURLを使用することです。

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

versus

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

各コマンドの後に表示される数字は、回線を通過したバイト数です。

4
Stephen

chromeにあるものは、ウェブキットのバグが原因で欠陥があると聞きました。

Firefoxの Y Slow Plugin は素晴らしい仕事をします。実行するときは、[コンポーネント]タブに移動し、値が必要なコンポーネントのタイプを展開します。元のサイズとgzipサイズが表示されます。

2
XOPJ

これはChrome専用のツールではありませんが、HTTPトラフィック/ヘッダー情報をチェックするときに Fiddler を使用します。これは素晴らしいツールであり、どのブラウザでも動作し、無料です!

2
BradB

まだ一般的なグーグル検索からここに到着した人は誰でも(私がやったように)、Firefoxの最新バージョンでは、「Transferred Size」列と「Size」列を比較することで、開発ツールから直接「未加工」サイズとgzip圧縮されたサイズを見ることができます。 「サイズ」は応答の生のサイズ、「転送サイズ」は応答のために転送されるデータの実際のサイズです。これは、下の画像のようにgzipの場合は実際のサイズよりも小さい場合があり、応答がクライアントにキャッシュされている場合。

firefox devtools gzipped size

0
LeartS