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


33

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

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


1
HTTPヘッダーを表示するためのプラグインがある場合は、ドキュメントサイズとContent-Lengthヘッダーを比較するだけで済みます。
Lèseはmajesté

回答:


32

2017年の回答を更新はい。

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

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

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


7
ありがとう。見逃すのは簡単です。一つは、「大規模な要求行の使用」をクリックする必要があります
ALDS

また、列ヘッダーを右クリックして、「Content-Encoding」応答ヘッダーを表示できます。これを行った後、列でソートして、すべてのgzip圧縮された応答のクイックリストを取得できます。
3

18

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


ただし、Chromeでは少し手間がかかります。(2011年9月、最新のChrome用に更新されました。)

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

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

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


「リソース追跡を有効にする」はどこですか?
Pacerier

@Pacerier:最新バージョンのChromeでは若干異なります。新しい手順で回答を更新しました。
不機嫌なヤギ

きちんとしたツール。Google App Engineアプリから送信された応答に圧縮サイズが表示されなかった理由がわかりませんでした。SDK(つまりlocalhost)によって送信される応答は圧縮されませんが、クラウドから送信される応答は圧縮されます。結局のところ、Chromeは完璧に機能しています。
エヴァンプライス

9

2017年の更新

大きなアイコンを使用すると、Chrome開発ツールのネットワークタブに圧縮前と圧縮後のサイズが表示されます。

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

Chrome開発ツールのスクリーンショット

ここに画像の説明を入力してください


5

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

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

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

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


2

Webkitのバグが原因でchromeに欠陥があると聞きました。

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


2

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



これを提案してくれてありがとう。Fiddlerは「非圧縮サイズ」を表示しませんが、「CompressionSavings」および「CompressionSavings%」の列を追加できます。列を右クリックして、列を追加します==> "列のカスタマイズ" ==> "その他" ==> [フィールド名]ドロップダウン。
ジェイソンズ

0

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

firefox devtools gzipされたサイズ

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.