ブラウザ上のウェブページのサイズがハードドライブ上の半分なのはなぜですか?

ブラウザ上のウェブページのサイズがハードドライブ上の半分なのはなぜですか?

私のウェブページとそのすべてのアセットはディスク上で 1.7 MB です。Chrome 開発ツール (ネットワーク タブ) ではわずか 700 KB です。たとえば、Google によると、140 KB の CSS は現在わずか 26 KB です。JS バンドルも同様で、330 KB から 90 KB に増えています。また、プライベート セッションでテストしていたため、ブラウザー キャッシュは使用していません。

Chrome で確認できるレスポンス ヘッダー:

Connection:Keep-Alive
Date:Wed, 30 Sep 2015 14:25:35 GMT
ETag:"e621f4-42c5-520f72d888210"
Keep-Alive:timeout=3, max=100
Server:Apache/2.2.16 (Debian)
Vary:Accept-Encoding

ネットワークタイムライン

実物大

gzip の問題

答え1

開発ツールですべてが表示されていないようです。

小さなリクエスト行を使用しないでください。そうしないと、Web ファイルの gzip 圧縮されたサイズのみが表示されます。

  1. サーバーから送信されたgzip圧縮ファイルのサイズ
  2. ブラウザがgzipファイルを解凍し、このKB数が含まれています

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


画像の圧縮サイズが大きく表示されるのは、PNG と JPG が圧縮形式であるため、Web サーバーが再圧縮を試みることで不要なオーバーヘッドが発生し、その余分なオーバーヘッドが CPU 時間の浪費と追加の KB に変換されるためです。

Apache を実行していて、アクセスできる場合は、httpd.conf次のような行を追加することをお勧めします。

# これらの画像を圧縮しないでください
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) gzip なし 変化しない

これは、すでに高度に最適化され圧縮された画像にも当てはまります。

私のスクリーンショットでは、1+2 はより大きく最適化されていない画像ですが、3.jpg はすでに必要最低限​​のサイズに縮小されているため、圧縮は #3 には役立ちませんでしたが、1+2 には役立ちました。

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

関連情報