Почему моя веб-страница в браузере вдвое меньше, чем на жестком диске?

Question

Моя веб-страница со всеми ее ресурсами составляет 1,7 МБ на диске. И только 700 КБ в Chrome Dev Tool (вкладка сеть). Например, мой 140-килобайтный css теперь, согласно Google, весит всего 26kb. То же самое для моего пакета JS, он идет от 330 кб до 90. Кроме того, я тестировал на закрытой сессии, поэтому браузер не кэшировался.

Заголовки ответа, которые я вижу в 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

Answer 1

Похоже, вы не видите все в ваших инструментах разработки.

Не используйте небольшие строки запроса, иначе вы увидите ТОЛЬКО размер gzipped ваших веб-файлов.

1. Размер сжатого файла, отправляемого с сервера
2. Ваш браузер распаковал GZIP-файл, и он содержит много КБ

---

Причина, по которой ваши изображения показывают больший размер сжатия, заключается в том, что PNG и JPG являются сжатым форматом, поэтому ваш веб-сервер фактически создает ненужные служебные данные, пытаясь повторно сжать его, и что дополнительные служебные данные переводятся как на потраченное время ЦП, так и на дополнительное. KB.

Если вы используете Apache и имеете доступ к httpd.conf я бы предложил добавить в него строку, которая выглядит следующим образом:

# Don't compress these images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) no-gzip dont-vary

Это относится и к изображениям, которые уже сильно оптимизированы и сжаты.

На моем скриншоте вы можете видеть, что 1+2 - большие и неоптимизированные изображения, но 3.jpg уже дошел до скелета, поэтому сжатие не помогло # 3, но помогло 1+2: