Я снова пришел к вам с интересными результатами эксперимента через мой блог разработки. Поскольку мне нравится Django, я задумался о оптимизации веб-фронтенда, одной из частей которой является сжатие CSS, и решил провести собственный эксперимент, который оказался достаточно интересным, чтобы поделиться с вами. Особенно это будет полезно для разработчиков, которые, как и я, в основном используют Python.

Причина проведения эксперимента: внезапный вопрос❓

Когда я разрабатываю веб-сервисы, я обычно невольно думаю: "Оптимизация фронтенда действительно лучше всего осуществляется инструментами на базе JavaScript (Node.js)!" Это закономерное предубеждение, ведь экосистема Node.js действительно доминирует в инструментах сборки и оптимизации фронтенда. То же самое касается и сжатия CSS. webpack, gulp и другие инструменты сборки с плагинами на основе css-minimizer-webpack-plugin или библиотеками на базе clean-css кажутся стандартом.

Даже если вы попросите AI, такой как ChatGPT или Gemini, рекомендовать css minifier, почти всегда первым делом он предлагает clean-css-cli от npm с комментарием: "Этот инструмент самый быстрый и мощный."

Но у меня возникли следующие вопросы.

"На самом деле, настолько ли инструменты на базе Node.js, как css minification, значительно быстрее или эффективнее, чем инструменты на базе Python? Нужно ли мне устанавливать среду Node.js только для оптимизации фронтенда?"

Чтобы ответить на этот вопрос, я решил начать небольшой эксперимент.

Содержание и процесс эксперимента

Эксперимент был простым. Я взял один из основных CSS файлов моего блога, style.css (около 67KB) и использовал два инструмента: clean-css-cli на базе Node.js и csscompressor на базе Python, чтобы сжать его, а затем сравнить размер и содержание результатов.

1. Проверка оригинального файла

jesse@laptop:~/my/path/to/css$ ll style.css
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css

Оригинальный файл style.css весил 67,325 байт. (Для удобства чтения включены пробелы, переносы строк и комментарии.)

2. Сжатие с использованием Node.js clean-css-cli

Я установил clean-css-cli глобально через npm и сжал style.css в style.min.css.

jesse@laptop:~/my/path/to/css$ npm install -g clean-css-cli
jesse@laptop:~/my/path/to/css$ cleancss -o ./style.min.css ./style.css

3. Сжатие с использованием Python csscompressor

В среде Python я использовал модуль csscompressor, чтобы сжать style.css в python_style.min.css.

(venv)jesse@laptop:~/my/path/to/css$ python -m csscompressor style.css > python_style.min.css

4. Сравнение размера файлов результатов

Я сравнил размеры созданных файлов с помощью команды ll.

jesse@laptop:~/my/path/to/css$ ll style*
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css         # оригинал
-rw-rw-r-- 1 jesse jesse 46740  6月 23 22:39 style.min.css     # результат npm clean-css
-rw-rw-r-- 1 jesse jesse 46828  6月 23 23:47 python_style.min.css # результат Python csscompressor

5. Визуальное сравнение содержимого сжатых файлов

Скриншот результатов сжатия CSS

Я открыл два сжатых файла в nvim и визуально сравнил их содержимое. (Смотрите скриншот выше)

Анализ результатов эксперимента

  • Оригинальный style.css (67,325 байт)
  • clean-css-cli (style.min.css) (46,740 байт): уменьшение на около 30.58%!
  • csscompressor (python_style.min.css) (46,828 байт): уменьшение на около 30.45%!

Увидев результаты, я был сильно удивлён.

  1. Значительное сокращение размера: оба инструмента уменьшили размер оригинального CSS файла на более чем 30%. Это явно показывает, что все ненужные символы, такие как пробелы, переносы строк и комментарии, которые мы добавляли для удобства чтения, действительно занимают байты, и их удаление приводит к значительному уменьшению размера файла. Это прямо способствует увеличению скорости загрузки веб-сервиса. Пожалуйста, не пренебрегайте минимизацией при развертывании вашего приложения. Эффект оказывается больше, чем вы ожидаете.
  2. Почти одинаковая эффективность сжатия: разница в размере между clean-css-cli и csscompressor составляет всего 88 байтов, и с точки зрения эффективности сжатия они показывают фактически одинаковый уровень производительности.
  3. Содержание результатов совпадает: при сравнении в nvim, содержание обоих сжатых файлов оказалось почти совершенно идентично. Этот различие в 88 байтов не поддается объяснению, и это означает, что алгоритмы или методы оптимизации, которые использует каждый инструмент, имели небольшие различия, которые несущественны, и конечная цель удаления ненужных элементов была достигнута.

Значение эксперимента и его уроки: сломаем предвзятости!

Главное сообщение, которое я извлек из результатов моего эксперимента, это "предвзятое мнение, что оптимизация фронтенда должна обязательно осуществляться с помощью инструментов на базе JavaScript (Node.js), следует отбросить".

Многие разработчики бэкэнда на Python, как и я, вероятно, чувствовали бремя, думали: "Ах, мне нужно установить среду Node.js? Что мне нужно установить через npm?" Но этот эксперимент показывает, что производительность в текстово-обработке оптимизации, такой как сжатие CSS, может практически не различаться в зависимости от языка или среды выполнения.

Это имеет ясное значение.

  • Свобода выбора технологического стека: Разработчики, использующие Python в качестве основного языка, могут эффективно оптимизировать CSS фронтенда, используя такие библиотеки, как csscompressor, без необходимости создания отдельной среды Node.js.

  • Упрощение рабочего процесса разработки: Избегая сложных настроек webpack или скриптов npm, можно легко интегрировать этапы оптимизации CSS в пайплайн сборки и развертывания с помощью Python-скриптов или простых команд оболочки. Это особенно полезно для небольших проектов или для команд, которые ценят эффективность.

  • Сосредоточенность на сути: Важно не то, какой инструмент используется, а то, насколько эффективно он был оптимизирован. В этом эксперименте мне удалось уменьшить размер файла CSS на около 30%, что означает достижение основного целевого показателя по улучшению пользовательского опыта и производительности веб-сервиса.

Конечно, функциональность инструментов фронтенда, предоставляемая экосистемой JavaScript (сборка, транспиляция, tree-shaking и т. д.), значительно более обширна и мощна. Но для определенных задач оптимизации, таких как сжатие CSS, использование знакомой среды разработки может оказаться более эффективным, как показал этот эксперимент.

В будущем я собираюсь активно использовать инструменты Python для сжатия CSS в своих веб-сервисах на базе Python, избегая ненужных зависимостей от Node.js.

А что насчет вас? Были ли у вас подобные предвзятости, и что вы думаете о результатах этого эксперимента? Поделитесь в комментариях!