Для чего используется сжатие css файла

Обновлено: 06.07.2024

Стоит ли сжимать файлы css или js, если сервер все равно сжимает их gzip’ом и отдает их на обработку браузерам, которые их разжимают и кэшируют?

Заранее спасибо за ответы!

А зачем тратить ресурсы сервера? Если файлы не изменяются, сожмите один раз. У вас ведь фрондом nginx стоит?

ctit:
А зачем тратить ресурсы сервера? Если файлы не изменяются, сожмите один раз. У вас ведь фрондом nginx стоит?

И еще хотел спросить, когда происходит gzip сжатие на стороне сервера, в принципе этот механизм он делает при сжатии еще и так же как эти онлайн сервисы, которые удаляют все лишнее или нет.

Если используется какой-нибудь сборщик фронта (gulp, grunt, webpack, . ), то там обычно минификация добавляется как часть тулчейна, и вопрос как бы отпадает сам собой.

Если же после каждой правки нужно минифицировать файл вручную, то не вижу в этом смысла. Лишние 1-2кб погоды не сделают.

NothingMatters:
Если используется какой-нибудь сборщик фронта (gulp, grunt, webpack, . ), то там обычно минификация добавляется как часть тулчейна, и вопрос как бы отпадает сам собой.
Если же после каждой правки нужно минифицировать файл вручную, то не вижу в этом смысла. Лишние 1-2кб погоды не сделают.

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

Ничего не надо сжимать, это глупости. Gzip это делает лучше и налету. Сжатие. да какое сжатие, удаление пробелов и перенос строк? Пережиток прошлого века, когда сервера были слабыми и gzip на лету, было роскошью, да и скорость в 56,6-128 килобит было пределом мечтаний.

Сейчас это просто не нужно.

LEOnidUKG:
Ничего не надо сжимать, это глупости. Gzip это делает лучше и налету. Сжатие. да какое сжатие, удаление пробелов и перенос строк? Пережиток прошлого века, когда сервера были слабыми и gzip на лету, было роскошью, да и скорость в 56,6-128 килобит было пределом мечтаний.
Сейчас это просто не нужно.

Вот я примерно об этом и думал и соглашусь с вами. Да, а скорости вы правы изменились и не по-детски.

Вообще нет. Например при сборке проекта, итоговый CSS/JS зачастую весит до 3-4мб. После минификации он ужимается до 200-300кб, и затем gzip его сжимает еще сильнее.

Просто нужно исходить из потребностей. Если итоговый css до мегабайта, то можно в принципе не минифицировать.

NothingMatters:
Вообще нет. Например при сборке проекта, итоговый CSS/JS зачастую весит до 3-4мб. После минификации он ужимается до 200-300кб, и затем gzip его сжимает еще сильнее.
Просто нужно исходить из потребностей. Если итоговый css до мегабайта, то можно в принципе не минифицировать.

Вы серьёзно сейчас? Вы возьмите этот CSS файл и сожмите даже обычным zip и увидите результат. Ваша минификация нафиг не сдалась, архиваторы сами всё делают.

LEOnidUKG:
да и скорость в 56,6-128 килобит было пределом мечтаний.
Сейчас это просто не нужно.

Были скорости и похуже :-)

Был у меня когда-то ZOOM MODEM на 14.400 не помню точно, через него ли я выходил в интернет первый раз, но тогда это было чем-то нереальным, и не смотря на плохое подключение, низкую скорость с прерываниями и отключениями я об этом не думал это было круто, зайти на какую ни будь страничку как в потустороннее измерение. А вообще он, по-моему, для игр по телефонной линии покупался во временя MS-DOS и коннектам к различным BBS с которых можно было даже что-то скачать.

LEOnidUKG:
Вы серьёзно сейчас? Вы возьмите этот CSS файл и сожмите даже обычным zip и увидите результат. Ваша минификация нафиг не сдалась, архиваторы сами всё делают.

Как раз минификация и вырезает все коментарии\пробелы\переводы строк, которые не нужны в итоговом проекте.

Мы же говорим про сборку с помощью тулчейна, а не подключением отдельных CSS/JS?

В процессе создания веб-страниц файлы стилей с расширением *.css используются для задания шаблонов отображения графических и текстовых блоков. Данный объект при посещении сайта подхватывается системой сразу же после прочтения текста. Соответственно скорость загрузки страницы зависит от оптимизации кода. Онлайн компрессор CSS – это сервис, который сжимает подобные файлы для более быстрой прогрузки элементов на сайте.

В каких случаях сокращение необходимо?

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

Каскадные таблицы стили CSS (англ. Cascading Style Sheets) — стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних. CSS – это язык, содержащий набор свойств для определения внешнего вида документа.

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

Действия программы сжатия относительно файла стилей

Процесс внесения изменений охватывает сразу несколько уровней кода, в зависимости от настроек пользователя. Исходя из наполнения страницы стили сайта учитывают наличие объектов верстки и расшифровки значений их параметров. Чтобы убрать из файла лишнее приложению понадобится проанализировать текст на присутствие лишних пробелов, и ненужных знаков препинания. Многие значения, включая значение цвета, можно сократить на несколько символов.

Что следует сокращать, для увеличения скорости загрузки:

лишние пробелы;
переходы на новую строчку;
параметр PX у стилей с 0 значением;
комментарии к стилям.

Сортировка свойств в порядке алфавита и объединение селекторов по типу объектов HTML помогут понять разработчику, что где в коде расположено. Запись текстовых обозначений в числовом варианте также уменьшает вес исходного файла. Экономия пространства колеблется в диапазоне 10-20%, что ускоряет отображение элементов на страничке.

Удобный и простой инструмент для веб-разработчиков

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

Доступно четыре различных уровня сжатия кода.
Возможность декомпрессии кода при выборе наименьшего уровня.
Минимальное время отклика инструмента.
Сервис работает бесплатно 24/7.
После компресии стилей они не теряют своей работоспособности.

По окончанию компрессии будет выведена статистика, отображающая насколько уменьшился вес файла. Для дальнейшего использования текста достаточно выделить получившийся вариант целиком и скопировать в стили сайта. Специалисты рекомендуют пройти валидацию, чтобы удостовериться в работоспособности CSS.

После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.

Инструменты

Источники CSS-кода

В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier'а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).

Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.

Результаты

Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.

Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip'а.

CSSMin:

Minify:

YUI-compressor:

Minifier 0.5:

CSS Tidy 1.3:

Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier'а.

При архивировании, однако, все минимизаторы ведут себя примерно одинаково.

Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.

Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).

Выводы

Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.

Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).

В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.

В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.

Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).

В качестве послесловия

В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier'а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.

Прежде всего, давайте определимся, зачем нам сжимать css код? Если наши css файлы имеют небольшой размер, то и понтоваться нечем то, но если вы разрабатываете солидный проект, то это совсем другой разговор. Итак, вы здесь чтобы узнать, как организовать сжатие CSS. Ближе к делу… CSS сжатие можно реализовать несколькими способами. Ниже список всех известных мне способов сжатия CSS.

Способы сжатия CSS

Примечания: статическое сжатие, сжимает до - 80%-90%

Примечания: динамическое сжатие, сжимает до -75%-95% (зависит от вас)

Примечания: статическое сжатие, сжимает до - 50%

Просто выберите понравившийся способ сжатия css и кликните по нему, или прочтите все способы и сделайте собственные выводы, что я настоятельно вам рекомендую.

Сжатие CSS с помощью онлайн компрессоров

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

первый – 7 372 байт

второй – 62 609 байт

Первый css написан коротко и читабельно, поэтому сжиматься он будет хуже.

Онлайн компрессор CleanCSS

Довольно таки солидный сервис, давайте посмотрим результаты его сжатия css.

первый – сжат до 7 075 байт (96 %)

второй – сжат до 52 797 байт (84,3 %)

Онлайн компрессор FormatCSS

Этот сервис предназначен более для форматирования css файлов, нежели для их сжатия. Текст css вводится с помощью скопировать/вставить.

первый – сжат до 8 105 байт (109,9 %)

второй – сжат до 61 715 байт (98,5 %)

Онлайн компрессор Robson CSS Compressor

Сервис гибкий в плане загрузки исходного кода css. В него можно загрузить css из локального каталога, из интернета или копировать/вставить. Давайте посмотрим на результаты сжатия css файлов.

первый – сжат до 6 326 байт (86,3 %)

второй – сжат до 48 985 байт (78,2 %)

Онлайн css html компрессор Tabifier

Позволяет сжимать не только css, но и html код. Но результат не очень впечатляет, делайте выводы сами.

первый – сжат до 7 876 байт (106,8 %)

второй – сжат до 60 706 байт (96,9 %)

Сжатие CSS средствами PHP

Сжатие css с помощью PHP доступно несколькими способами, но я приведу только один, самый интересный для моего понимания. Преимущество css сжатия на php это динамичность и гибкость в плане настроек сжатия, так как вы их сами задаете, с помощью своего php сценария. Мой сценарий выглядит так:

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

Сжатие CSS алгоритмом Base 62

Способ довольно интересный и эффективный, но он статический, то есть, каждый раз изменяя ваш css файл, необходимо пройти процедуру сжатия css файла. Ниже поэтапно описана эта процедура.

1. Сжатие css с помощью компрессора

Необходимо воспользоваться одним из css компрессоров, чтобы убрать все пробельные символы и выровнять css код в одну строку.

2. Создание js файла

Необходимо создать js файл и поместить в него следующий код:

Вместо /*ваш стиль */ вставляете полученную строку в первом пункте процедуры сжатия.

3. Сжатие алгоритмом Base 62

Вставьте код вашего js файла в верхнее поле и выберите галочку Base62 encode , после чего получите результат в нижнем поле.

Данный способ позволяет сжать css файл размером от 15кб до 8кб, то есть почти на 50%. Плюс такой замысловатой процедуры в том, что полученный код вы вставляете в js файл в котором находятся остальные ваши js сценарии и это все подгружается вместе.

P.S.

Я выложил все свои знания по поводу сжатия css. Если имеете какие-то соображения по поводу более эффективных способов сжатия css, пожалуйста, отпишитесь в комментариях. Спасибо за ваше внимание!

Читайте также: