Клуб анонимной клиентской оптимизации

Некоторые мои коллеги не верят в клиентскую оптимизацию, а верят только в оптимизацию серверной части сайта. Сервер, конечно, должен быстро генерировать страницы, но это только часть времени в процессе "клик по ссылке - отображенная страница".
Плюс ко всему в тренд входит открывать сайты с мобильных устройств, а там часто достаточно низкая скорость соединения с интернетом.
 
Есть уже неновая технология - оптимизация CSS/JS. Реализацией являются такие продукты как  Google Closure Compiler UglifyJS CSSO YUI Compressor  и другие.

С другой стороны приблизительно год назад 1С-Битрикс анаонсировал 3 новые настройки в своем продукте "Управление сайтом":
  • Объединять CSS файлы
  • Объединять JS файлы
  • Создавать сжатую копию объединенных CSS и JS файлов

Первые две настройки делают именно то, что на них написано. А вот из названия последней вы можете подумать, что она делает оптимизацию и сжимает текст соответствующих файлов, а вот нет. 

Если установить этот флажок, то рядом с объединенными файлами CSS/JS битрикс положит их gzip копию, которая естественно будет скачиваться намного быстрее. Назовем это именно сжатием .

 
Как перфекциониста меня задело за живое, что битрикс не оптимизирует эти файлы: если их открыть и посмотреть вы можете увидеть кучу комментариев, пустых строк, лишних пробелов и т.д. Но еще как вы помните я люблю целесообразность. Поэтому предлагаю разобраться в целесообразности дополнительной минификации этих файлов перед их сжатием в gzip.


Проведем эксперимент

Возьмем тиражный магазин Битрикса и поколдуем в header.php шаблона: заменим все прямые включения скриптов и стилей на AddHeadScript и SetAdditionalCSS соответственно (чтобы битрикс мог объединять эти файлы). После этого включим объединение и сжатие CSS/JS.
Если все сделали правильно - при загрузке главной страницы (не из-под админа) должно грузиться ровно 2 скрипта и 2 стиля.
Скачаем их и выполним оптимизацию: Google Closure Compiller для JS, YUI Compressor для CSS. Полученные файлы (и оптимизированные и исходные) загрузим куда-нибудь на сайт (я положил их в корень).

После этого скачаем их то указывая поддержку gzip, то нет. Делается это вот такими командами:
curl http://example.com/template.min.js --silent --write-out "%{size_download}\n" --output /dev/null
curl http://example.com/template.min.js --silent -H "Accept-Encoding: gzip,deflate" --write-out "%{size_download}\n" --output /dev/null

В результате выполнения каждой команды будет выведено число байт при скачивании данного файла. Результаты можно увидеть в следующих таблицах:

kernel.css
-min +min
-gzip 161740 145920 (-10%)
+gzip 20387 (-87%) 16533 (-89%)

template.css

-min +min
-gzip 83535 73114 (-12%)
+gzip 15172 (-82%) 13057 (-84%)


kernel.js

-min +min
-gzip 825335 540309 (-35%)
+gzip 182416 (-78%) 131318 (-84%)

template.js

-min +min
-gzip 188966 160771 (-15%)
+gzip 60210 (-68%) 55213 (-71%)


Итого, можно сэкномить от объема стилей и скриптов:
  • используя только gzip (настройка в битриксе) - около 78%.
  • используя только оптимизацию - около 15%.
  • используя и то и другое - около 82%.

Выводы

А вывод довольно прост - включив в настройках главного модуля сжатие объединенных CSS/JS файлов можно добиться такого сжатия объема этих файлов, которого нельзя добиться используя оптимизацию.
Использовать оптимизацию в дополнение к сжатию особого смысла не имеет.

Комментарии (1)

...
  • Владислав
  • 13.04.2014 10:14:28
Подскажите по теме.
Не совсем понял, куда класть оптимизированные файлы (после сжатия Google Closure Compiller для JS, YUI Compressor для CSS) ? В ту же папку откуда их скачали?