Я уже рассказывал про ускорение загрузки страницы с помощью оптимизации картинок. Пришла пора двигаться дальше и заняться оптимизацией всех остальных файлов. Я расскажу, что такое zopfli, и поделюсь программкой, которая поможет легче оптимизировать статические данные. Честно говоря, я внедрил всё это в блог несколько месяцев назад, но всё как-то не доходили руки поделиться.

Сервера и браузеры уже давно используют gzip для сжатия передаваемых данных. Были попытки внедрить более прогрессивные алгоритмы сжатия вроде bzip или lzma, но все благополучно провалились. Есть ещё SDCH (Shared Dictionary Compression for HTTP), который поддерживается Google Chrome уже кучу лет, но его, вероятно, скоро уберут, так как заметной поддержки среди сайтов и серверов нет. В общем, всё работает — и то хорошо.

Но и тут есть место для оптимизации, иногда даже довольно значительной. Раз нельзя добавить во все браузеры новые алгоритмы декодирования, то можно доработать алгоритм кодирования. Что и предприняли программисты из Google, создав Zopfli — программу, которая сжимает gzip ещё сильнее за счёт более сложных алгоритмов, значительного увеличения потребления памяти и времени.

Следующая картинка показывает сравнение скорости и степени сжатия на стандартном файле enwik8, представляющем собой 100 миллионов байт текстов из Википедии. Утащена отсюда.

Для статических сайтов время сжатия не так важно, так как можно подготовить результат заранее, а потом просто его отдавать. В nginx есть даже специальный модуль gzip_static, предназначенный именно для такого сценария.

Осталось дело за малым: написать (взять) программу, которая будет проходить по всем файлам и генерировать сжатые файлы. Готовой, удовлетворяющей всем моим требованиям, я не нашёл, написал свою. Она делает для моего блога все необходимые изменения: конвертирует картинки в WebP, текстовые файлы сжимает с помощью zopfli. Программа смотрит, что поменялось со времени последнего запуска, и сжимает только изменённые или добавленные файлы.

Итак, чтобы воспользоваться программой самому, нужно установить Dart и где-то взять cwebp и zopfli. Для Mac OS я установил cwebp, используя MacPorts, а zopfli скомпилировал из исходников. Если знаете, где взять данные утилиты для других операционных систем, поделитесь, я добавлю.

Дальше просто: устанавливаем мою программу, используя pub — менеджер пакетов для dart, идущий в комплекте.

pub global activate static_compress

Запускаем оптимизацию:

pub global run static_compress --dir <имя папки>

И всё! В итоге рядом со всеми .html, .css и .js появится .gz версия, а рядом с картинками - .webp.

Остаётся только правильно настроить сервер. В случае с nginx нужно добавить в конфиг строчку gzip_static on;. Также не забываем настройки для WebP, о котором я писал в соответствующем посте.

Очень надеюсь, что вам программка тоже пригодится. Задавать вопросы и рассказывать о проблемах можно тут или на странице проекта на GitHub.