Есть ли простой способ увидеть степень сжатия в Chrome?


Я занят проверкой того, как мой веб-сервер выполняет gzip. Теперь я уверен, что gzip включен, так как chrome показывает заголовок content-encoding: gzip.

Есть ли простой способ узнать, насколько сильно был сжат файл в инструментах разработчика Chrome?

Author: mikemaccana, 2010-10-29

7 answers

Обновленный ответ для 2017: Да.

Столбец размер на вкладке Сеть в Инструментах разработчика Chrome содержит как сжатый, так и несжатый размер для gzip, brotli и всего, что появится в будущем. Например:

Здесь сжатый размер составляет 242 КБ, несжатый размер составляет 1,1 МБ

Чтобы увидеть оба, убедитесь, что у вас есть Devtools, показывающие большие строки запросов. Вы можете найти флажок рядом со значком шестеренки "Настройки сети" в Панель инструментов для конкретных сетей.

enter image description here

 47
Author: mikemaccana, 2021-01-27 10:51:09

Безусловно, самый простой способ - это использовать онлайн-инструмент. Gidziptest показывает вам множество деталей: исходный размер, сжатый размер и процент сжатия.


Однако это возможно в Chrome с небольшими усилиями. (Обновлено для последней версии Chrome, сентябрь 2011.)

В Инструментах разработчика перейдите на вкладку "Сеть" и перезагрузите страницу. Вы увидите список всех извлеченных файлов в левом столбце. Щелкните соответствующую страницу/файл слева, затем Вкладка "Заголовки" на правой панели.

В разделе "Заголовки ответов" вы должны увидеть "Кодировка содержимого: gzip", за которым следует заголовок "Длина содержимого". Это размер сжатого содержимого.

Найти несжатый размер сложнее. Если вы обслуживаете статические файлы, вы можете просто проверить их размер. Для динамического контента вам придется скопировать и вставить HTML-код в текстовый редактор и сохранить его, чтобы проверить точный размер.

 19
Author: DisgruntledGoat, 2011-09-25 23:45:42

Обновление за 2017 год

При использовании больших значков инструменты разработки Chrome отображают размер сжатия до и после на вкладках "Сеть".

Я подтвердил, выключив и включив gzip на своем веб-сервере.

Chrome dev tools screenshot

enter image description here

 10
Author: CodeMonkey, 2018-02-05 17:43:28

Другой способ добиться этого - с помощью cURL:

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

Против

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

Число, показанное после каждой команды, - это количество байтов, которые пересекли провод.

 6
Author: Stephen, 2013-06-20 19:37:24

Я слышал, что в chrome есть ошибка из-за ошибки в webkit.

Плагин Y Slow для firefox отлично справляется с этой задачей. При запуске перейдите на вкладку Компоненты и разверните тип компонента, для которого вы хотите получить значения. Он покажет исходный размер и размер gzip.

 2
Author: XOPJ, 2010-10-29 13:21:44

Это не инструмент специально для Chrome, но я использую Fiddler при проверке информации о HTTP-трафике/заголовке. Это отличный инструмент, работает в любом браузере и он бесплатный!

 2
Author: BradB, 2010-10-29 14:51:13

Для тех, кто все еще прибывает сюда из общего поиска Google (как и я), в современных версиях Firefox можно увидеть "необработанный" и сжатый размер непосредственно из его инструментов разработки, сравнив столбец "Переданный размер" и столбец "Размер". "Размер" - это необработанный размер ответа, "Переданный размер" - это фактический размер данных, переданных для ответа, который может быть меньше фактического размера в случае gzip, как на изображении ниже, или даже 0 в случае, если ответ был кэшируется в клиенте.

firefox devtools gzipped size

 2
Author: LeartS, 2018-07-24 13:26:09