CSSResizer — профессиональное сжатие CSS

YUI Компрессор всегда сохранять эксплуатационные качества кода при одновременном снижении ее общую площадь байт (как в исходных условиях и после сжатия, так как большинство Java-CSS и подается с производственными веб-серверов с gzip'нутыми как часть протокола HTTP). YUI Компрессор Minifier JavaScript разработан, чтобы быть 100% гарантией безопасности и дают более высокую степень сжатия, чем большинство других инструментов. Испытания на YUI библиотеке показали экономию более 20% по сравнению с JSMin (став 10% после сжатия HTTP). YUI Компрессор также может сжимать CSS файлы с помощью порт Isaac Schlueter 'ы регулярных выражений на основе CSS Minifier.

YUI Компрессор написано в Java (требуется Java> = 1,4) и полагается на Rhino приступить к разбивке источник JavaScript файл. Она начинается с анализа источник JavaScript файл, чтобы понять, как он структурирован. Затем он выводит маркер потока, опуская столько пробельных символов, сколько возможно, и заменить все локальные символы на 1 (или 2, или 3) символ буквы там, где такая замена подходит (в лице злых функций, таких как eval или with , YUI Компрессор занимает оборонительную подхода не обфускации любой из областей, содержащих злого о) Алгоритм сжатия CSS использует набор точно настроенными регулярных выражений, чтобы сжать исходный файл CSS.

Сжатие CSS для уменьшения времени загрузки

Если на сайте используется CSS, сервер должен передавать их браузеру каждый раз при запросе ресурса.

Сжатие CSS для уменьшения времени загрузки

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

Возможности оптимизации CSS

Время загрузки становится проблемой, когда речь идет о передаче данных на мобильные устройства. Это привело к расширению диапазона задач, которые решаются с помощью CSS. В результате, язык каскадных таблиц стилей перенимает все больше и больше функций, за которые ранее отвечал JavaScript. Шаблоны CMS часто используют раздутые файлы CSS, которые снижают производительность сайта.

В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS.

  1. Избегайте чрезмерного использования встроенных стилей CSS (размещенных в HTML), если это не относится к началу страницы. То же самое касается тегов стилей (отдельных CSS-свойств, отклоняющихся от установленных стандартов);
  2. Объединяйте нескольких файлов CSS в PHP-скрипте. Таким образом, клиент должен вызвать только файл PHP вместо отправки HTTP-запроса для каждого файла стилей;
  3. Сжатие CSS подразумевает использование сокращенных форм свойств, если это возможно:
body { margin: 20px 10px 5px 10px }

вместо полной формы:

body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }
  1. Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге (например, в списке), то элемент не должен упоминаться дважды;
  2. Используйте для установки цвета значения HEX, а не RGB;
  3. Универсальный селектор «*» следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
  4. Минимизируйте файлы CSS, удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
  5. Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.

Сжатие CSS: онлайн и оффлайн инструменты

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

К таким приложениям относятся:

CSS Minifier

Скопируйте код CSS в поле «Input CSS» и нажмите на кнопку «Minify«, чтобы начать процесс. В поле «Minified Output» вы увидите результат, который можно скопировать вручную или скачать. CSS Minifier сокращает код, удаляя разрывы строк и пробелы, последнюю в списке точку с запятой. Инструмент может легко преобразовывать код RGB в сжатый вариант HEX.

CSS Compressor

Этот сервис для сжатия CSS онлайн немного отличается от предыдущего, поскольку поддерживает больше возможностей для сжатия кода. Вставьте CSS-код в поле «CSS Source Code Input«. Затем выберите степень сжатия. В разделе «Show advanced options» можно установить флажок для параметров минимизации. Например, сжатие цветов цвета, удаление последнюю точку с запятой и т.д. Нажмите «Compress«, чтобы начать процесс сжатия CSS. Также инструмент предоставляет информацию о размере входного и выходного файла, а также процент минимизации.

Free CSS Toolbox

Бесплатная программа для веб-разработчиков. Она включает в себя целый ряд инструментов и может выполнять форматирование и проверку CSS-кода. На вкладке меню «CSS Formatting Options» выберите параметры CSS, которые нужно оптимизировать и запустите сжатие, нажав «Re-format now«. Free CSS Toolbox без проблем удаляет пробелы и конечные точки с запятой, минимизирует коды цветов. Эта программа работает во всех операционных системах, начиная с Windows от XP и выше.

Уменьшение времени загрузки благодаря оптимизации CSS

Нагрузка на сервер возрастает по мере того, как увеличивается размер CSS-файлов. Если сайт открывается с помощью клиента (браузера), все CSS-данные должны быть запрошены и переданы. Поэтому настоятельно рекомендуется осуществлять сжатие CSS и JS онлайн. Перечисленные выше инструме
нты помогут вам в этом. Но полная оптимизация не может быть выполнена с помощью сервисов и приложений. Эту задачу нужно выполнять самостоятельно.

Перевод статьи «CSS compression for consistent loading times» был подготовлен дружной командой проекта Сайтостроение от А до Я.

.

Нужно ли вообще сжимать CSS код?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адрес: www.cleancss.com

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

Результат:

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

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

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

Адрес: www.lonniebest.com/FormatCSS

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

Результат:

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

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

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

Адрес: iceyboard.no-ip.org/projects/css_compressor

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

24 онлайн-сервиса для сжатия и оптимизации CSS кода

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

Результат:

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

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

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

Адрес: tools.arantius.com/tabifier

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

Результат:

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

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

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

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

<?php header(‘Content-type: text/css’); ob_start(«compress»); function compress($buffer) { /* удалить комментарии */ $buffer = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, », $buffer); /* удалить табуляции, пробелы, символы новой строки и т.д. */ $buffer = str_replace(array(«\r\n», «\r», «\n», «\t», ‘ ‘, ‘ ‘, ‘ ‘), », $buffer); return $buffer; } /* css файлы */ include(‘master.css’); include(‘typography.css’); include(‘grid.css’); include(‘print.css’); include(‘handheld.css’); ob_end_flush(); ?>

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

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

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

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

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

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

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

document.write(‘<style type=»text/css»>/*ваш стиль */</style>’);

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

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

Как видите, теперь вы имеете js файл, который вы сжимаете с помощью сервиса Packer — http://dean.edwards.name/packer/

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

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

P.S.

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

Дальше: PHP glob – листинг папок

Дискуссия по теме     5 Комментариев

Добавить комментарий

Вика 31.10.2017 ? 11:04

Из онлайн компрессоров лучше использовать https://cssresizer.com Он и сжимает хорошо, и стили потом после сжатия не портятся. На хабре даже где-то статья на эту тему есть.

Константин 11.12.2012 в 16:26

У Вас в скрпте str_replace 2 пробела, 4 пробела и еще раз 4 пробела — так и должно быть?

Тарас12.12.2012 в 01:05

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

Тарас 10.10.2011 в 13:44

topy, спасибо за указанную ошибку. Исправил.

topy 07.10.2011 в 17:11

>>Примечания: статическое сжатие, сжымает до — 80%-90% Жи-Ши, пиши с буквой «И»

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *