Моя веб-страница со всеми ее активами занимает 1,7 МБ на диске. И всего 700 КБ в Chrome dev tool (вкладка «Сеть»). Например, мой css размером 140 КБ теперь, по данным Google, весит всего 26 КБ. То же самое касается моего пакета 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
решение1
Похоже, вы не видите всего в своих инструментах разработки.
Не используйте маленькие строки запроса, иначе вы увидите ТОЛЬКО сжатый размер ваших веб-файлов.
- Размер сжатого файла, отправленного с сервера
- Ваш браузер извлек сжатый файл, и он содержит столько КБ
Причина, по которой ваши изображения показывают больший размер сжатия, заключается в том, что PNG и JPG — это сжатый формат, поэтому ваш веб-сервер фактически создает ненужные накладные расходы, пытаясь повторно сжать их, и эти дополнительные накладные расходы трансформируются как в напрасную трату процессорного времени, так и в дополнительные КБ.
Если вы используете Apache и имеете к нему доступ httpd.conf, то я бы посоветовал добавить в него строку, которая выглядит примерно так:
# Не сжимайте эти изображения SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) без gzip не изменять
Это справедливо для изображений, которые уже существенно оптимизированы и сжаты.
На моем скриншоте вы можете видеть, что 1+2 — это большие и неоптимизированные изображения, но 3.jpg уже сведен к минимуму, поэтому сжатие не помогло #3, но помогло 1+2:
