Из этой статьи Вы узнаете, каким образом можно быстро и без проблем сжать файл CSS, что позволит ускорить работу сайта вследствие сокращения объема внешних файлов.
Как уже не раз упоминалось в статьях нашего блога, гарантированный способ ускорения работы Вашего веб-ресурса заключается в уменьшении вес внешних файлов. Это можно осуществить несколькими способами: максимально уменьшить размер картинок, использующихся на сайте, использовать js-библиотеки в сжатом режиме и сжать таблицу внешних стилей. Сегодня речь пойдет именно о последнем способе.
Суть процесса сжатия
Мы будем рассматривать особый метод сжатия, который не предусматривает введение новой кодировки, а только удаление лишних символов, которые не участвуют при отображении сайта в браузере. Стоит отметить, что в нашем случае сохранится даже возможность корректировки файла CSS, хотя не стоит скрывать, что она слегка усложнится. Также сохранение исходной кодировки позволит не затрачивать время на роскодировку браузером.
Правильное сокращение содержимого таблицы стилей позволит эффективно сэкономить на объеме файла. Но несмотря на это в нем будет предостаточно знаков, которые оптимизируют работу кодера, но не участвуют при выводе внешнего вида ресурса через браузер. К таким знакам можно отнести отступы в файле, переносы, пустые строки и комментарии.
На финальном этапе работы над проектом можно вручную поудалять все лишнее. Единственное, что стоит при этом сделать — это сохранить исходный файл, так как работать с сокращенным видом CSS очень неудобно.
CSS компрессор
Понятное дело, что сокращение кода вручную — это рабский труд. Поэтому бравые умельцы разработали специальное приложение, которое все сделает вместо Вас.
CSS Copmressor — специальный сервис, который осуществляет сокращение объема файла CSS за счет удаления не нужных элементов. Параметры удаления контролируются с помощью специального функционала.
Сервиса до неприличности прост в эксплуатации. Все, что нужно сделать — скопировать код, вставить его в рабочее поле компрессора, установить необходимые настройки сжатия и нажать на кнопку запуска.
В настройки входят параметры сжатия с тремя значениями:
- Light — в ходе обработки сервис реагирует только на пробелы, точки с запятой и табуляцию. Переносы строк в этом режиме игнорируются.
- Normal — удаляются лишние переходы на новую строку таким образом, чтобы каждое правило начиналось с новой строки. Также сжатию подвергается кодировка цветов.
- Super compact — сносит абсолютно все пробелы и переходы на новые строки.
Следующий момент, который можно контролировать с помощью настроек — комментарии:
- Don't strip any comments — кто знает английский — догадался, комментарии пропускаются и не удаляются.
- Strip ALL comments — удаление полностью всех комментариев.
- Strip comments at least X chars long — устанавливается лимит комментария по количеству символов, остальное — удаляется.
В результате обработки кода в компрессоре можно сокращать объем CSS файла на целых 25%.
Для справки
Существует противоположный по действию сервис - CSS Uncompressor, который разжимает сокращенные файлы. При использовании этого сервиса стоит знать о том, что он сносит корректную форму записи data:url.
