私のウェブページとそのすべてのアセットはディスク上で 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
答え1
開発ツールですべてが表示されていないようです。
小さなリクエスト行を使用しないでください。そうしないと、Web ファイルの gzip 圧縮されたサイズのみが表示されます。
- サーバーから送信されたgzip圧縮ファイルのサイズ
- ブラウザが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 には役立ちました。