БЕСПЛАТНЫЙ минификатор CSS — оптимизация скорости

Что такое css простыми словами

Заходя на сайт пользователь видит на нём контент, который расположен в определённом порядке. Это и текст, и таблицы, и изображения. На странице они находятся не хаотично, а занимают свои ниши и имеют свою последовательность. То, что человек воспринимает как данность, на самом деле является чётко выстроенной каскадной таблицей.

Всё это и есть код CSS. Местом его хранения является файл «stile.css» в котором расположено огромное количество данных. Все они ответственны за воспроизведение страницы и её внешний вид.

Сканируя сайт посредством PageSpeed Insights, зачастую можно получить рекомендацию сократить код CSS. Это имеет свою причину. Некоторые строки или сегменты кода не используются для передачи данных, следовательно не несут смысловой нагрузки. При этом, в таблице CSS они хранятся.

Декомпрессор css

Если вам трудно редактировать стили CSS на сайте, вы можете воспользоваться декомпрессором кода. Для декомпрессоризации используйте «Стандартный» и «Низкий» уровень настроек.

Зачем нужен компрессор css

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

Сжатие CSS стилей поможет значительно увеличить скорость загрузки сайта, особенно если у вас несколько подключаемых файлов стилей. Мы рекоменжуем использовать «Высокий» уровень сжатия кода, так как он удобен для редактирования и быстрее загружается, чем «Стандартный» и «Низкий».

Инструкция

Чтобы получить сжатые CSS стили с помощью данного компрессора, достаточно ввести исходный код и выбрать 1 из 4 степеней сжатия. Далее нажать на кнопку «Сжать» и инструмент быстро выдаст итоговый результат (без обновления страницы).

Как минификация выглядит на примере

Чтобы знать как сделать, необходимо для начала прояснить, что именно необходимо сделать. Для этого необходимо сравнить CSS коды, которые несут в себе одну и ту же информацию. В таком формате он будет до минификации:

1. .entry-content p {

2. font-size: 14px !important;

3. }

4. entry-content ul li {

5. font-size: 14px !important;

6. }

7. .product_item p a {

8. color: #000;

9. padding: 10px 0px 0px 0;

Как сократить css код

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

Одним из простых и быстрых способов является использование специализированных инструментов. Одним из таковых является CssCompressor. Для работы с ним необходимо просто вставить файл «style.css» в специальное поле и выбрать ту степень сжатия, которая вам необходима.

Если выбрана степень сжатия Highest, то вместо большой таблицы код будет трансформирован в одну строчку. Такую информацию сервер прочтёт значительно быстрее и отобразит страницу в нужном виде. Единственная проблем может состоять в том, что при необходимости редакта, отыскать именно тот элемент будет достаточно проблематично.

CssCompressor оставит разделение между классами, при этом удалит все ненужные пробелы, строки и прочие элементы, которые не несут смысловой нагрузки. Таким образом, код можно сократить в полтора или даже два раза. Вся информация на странице останется неизменной.

Существуют и другие инструменты, позволяющие провести минимизацию. Среди таковых:

Минификация css онлайн

Чтобы качественно сократить CSS-код рекомендуем применять специализированный онлайн-сервис CSS Resizer, который позволяет:

Минификация html онлайн

Как указывалось выше, предварительная минификация HTML-кода на динамических сайтах не применяется, т. к. он формируется на сервере (например, посредством ссылкам «Validate Original Code» и «Validate Compressed Code» соответственно.

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

Минификация js онлайн

Сократить JavaScript онлайн можно с помощью рассмотренного на примере минификации HTML-кода сервиса HTML Compressor, который минифицирует JS-код не хуже прочих.

Для разнообразия предлагаем к рассмотрению другой узконаправленный онлайн-сервис JSCompress:

К плюсам сервиса можно отнести возможность отправлять код для минификации в файле, к минусам — отсутствие возможности редактировать сокращенный сервисом код в окне вывода.

Популярные вопросы

Что делает Минификатор JS и CSS?

Пример сокращения css-кода

Удобочитаемый фрагмент CSS-кода размером 123 Б:

/* Ссылки */
a { background-color: transparent;
}
a:active,
a:hover { outline: 0;
}
a { text-decoration: underline;
}

Сокращённый вариант указанного фрагмента составляет 84 Б:

a{background-color:transparent;text-decoration:underline}a:active,a:hover{outline:0}

Размер уменьшился за счет:

1. удаления комментария (/* */),
2. удаления лишних пробелов,
3. удаления всех переносов строк,
4. удаления символов ; перед закрывающей фигурной скобкой },
5. объединения свойств для одного селектора (a).

Пример сокращения html-кода

Удобочитаемый фрагмент HTML-кода размером 313 Б:

Пример сокращения js-кода

Удобочитаемый фрагмент JS-кода объёмом 328 B:

// ALERT PLUGIN DEFINITION function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.alert') if (!data) $this.data('bs.alert', (data = new Alert(this))) if (typeof option == 'string') data[option].call($this) }) }

Сокращенный вариант фрагмента весит 172 B:

function Plugin(t){return this.each(function(){var a=$(this),n=a.data("bs.alert");n||a.data("bs.alert",n=new Alert(this)),"string"==typeof t&&n[t].call(a)})}

Как и в случае с HTML и CSS, уменьшение объёма происходит за счет удаления лишних элементов кода, не влияющих на его работоспособность.

Принципы сокращения кода

Минификация (минимизация, сокращение) кода подразумевает его оптимизацию в пользу уменьшения объёма памяти, при этом в жертву приносится удобочитаемость.

Минифицированный код является полностью рабочим, но лишенным всех символов и участков, не влияющих на его работоспособность, к которым относятся:

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

Сокращение css-кода

Объём CSS-кода, как правило, составляет куда большую часть веса веб-страницы, чем HTML, поэтому не следует игнорировать замечание сервиса PageSpeed Insights «Сократите CSS» и пренебрегать возможностью использовать сокращенный код в CSS-файлах для ускорения загрузки веб-страниц сайта.

/* Ссылки */
a { background-color: transparent;
}
a:active,
a:hover { outline: 0;
}
a { text-decoration: underline;
}

a{background-color:transparent;text-decoration:underline}a:active,a:hover{outline:0}

Сокращение html-кода

Минификация HTML-кода не столь эффективна по отношению к сокращению CSS и JavaScript по двум причинам:

1. HTML-код, как правило, составляет незначительную часть от общего объёма кода веб-страницы.
2. HTML-код динамических сайтов формируется на сервере и отдаётся браузеру при запросах.

Поэтому предварительно минифицированные HTML-файлы могут применяться только на статичных веб-страницах. Но ведь PageSpeed Insights при наличии несокращенного кода на проверенной странице синим по белому пишет «Сократите код HTML». И действительно, есть выход даже для динамических сайтов: это расширения для CMS. Об этом читайте ниже.

Сокращение js-кода

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

// ALERT PLUGIN DEFINITION function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.alert') if (!data) $this.data('bs.alert', (data = new Alert(this))) if (typeof option == 'string') data[option].call($this) }) }

function Plugin(t){return this.each(function(){var a=$(this),n=a.data("bs.alert");n||a.data("bs.alert",n=new Alert(this)),"string"==typeof t&&n[t].call(a)})}

Сокращение кода сайтов на cms

Для популярных CMS, таких как WordPress или Joomla, существует масса расширений, автоматически минифицирующих код HTML, CSS и JS. Иначе говоря, достаточно установить и настроить определённый плагин, и «танцы с бубном» вокруг несокращенного кода отпадают сами собой: расширение обеспечит минификацию кода перед отправкой клиенту, после чего этот код будет хранится в кэше сервера и отдаваться при запросах определённое в настройках время.

В частности для Joomla и WordPress применятся превосходный плагин JCH Optimize, способный не только автоматически сокращать весь код веб-страниц, но и оптимизировать его согласно всем рекомендациям сервиса от Google.

Сокращенные файлы фреймворков

Все популярные JS-библиотеки и CSS-фреймворки предоставляют необходимые файлы в нормальном (удобочитаемом) и сокращенном формате с префиксом .min в названии. Например:

bootstrap.js

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

bootstrap.min.js

Сокращенная версия для применения на сайте.

По данным таблицы не сложно заметить существенную разницу в размере обычных и сокращенных файлов: применение минифицированных версий определённо сделает веб-страницы легче, что благоприятно отразится на скорости загрузки сайта. Именно поэтому сервис PageSpeed Insights обращает внимание на объём кода (HTML, CSS и JS) и возможности по его сокращению для улучшения производительности:

Выводы и заключение

• применение сокращенного HTML-, CSS- и JS-кода сделает веб-страницы заметно легче,
• используйте специальные плагины для минификации кода сайтов на CMS,
• если подходящих плагинов, автоматически сокращающих код веб-страниц, для вашего сайта не существует, то применяйте предварительно сокращенные версии файлов,
• используйте предварительно минифицированные файлы фремворков,
• для сокращения отдельных файлов используйте онлайн-сервисы: