Как сократить CSS


Итак, мы имеем  файлы с расширением .css. Теперь на надо сократить их объем (не путать с сжатием файлов).

Технология сокращения CSS довольно простая. Надо убрать ненужные комментарии, пробелы, табуляции и пустые строки. Опять же пределы сокращения CSS могут быть разные. Все зависит от того, собираетесь ли Вы редактировать файлы .css в будущем.

Что касается меня, то я постоянно редактирую стили и уверен, что многие веб-мастера делают тоже самое. Сокращение CSS можно разделить на три вида: прогрессивное, умеренное и щадящие.

Прогрессивное сокращение CSS подразумевает размещение всех классов, идентификаторов и их селекторов в одной строке. Т,е, в файле .css, после такого сокращения, останется только одна строка, но очень длинная.

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

Для реализации прогрессивного сокращения можно воспользоваться сервисом
csscompressor.com. Копируем содержимое файла .css и вставляем в поле на странице сервиса:


Выбираем наибольшее сжатие «Highest (no readability, smallest size)» и жмем на кнопку «Compress».

 

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

 

 

Чтобы не заниматься нудной работой и вручную не удалять все пробелы табуляции и т.д, можно воспользоваться вышеописанным сервисом csscompressor.com, только перед сокращением, в настройках надо выбрать строчку «High (moderate readability, smaller size)»:

 

 

Также можно воспользоваться расширением PageSpeed для браузера Mozilla Firefox. Для этого, в результатах анализа выбираем пункт «Сократите CSS», жмем на стрелочку рядом с ним. Затем кликаем по ссылке «optimizet version»:

 

 

И  PageSpeed предоставит нам щадящее сокращении CSS кода
Останется только скопировать и вставить код в файл .css.

Умеренное сокращение CSS — это вручную доработанное щадящие сокращение. Данный способ я использую сам. Заключается он в том, что в одну строку помещаются стили, отвечающие за определенный участок сайта, при этом я помечаю каждую строчку, соответствующим комментарием:

В общей сложности у меня получилось 38 строк, но при желании можно сделать еще меньше.

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

До встречи!

 


0 комментариев / Написать комментарий

Написать комментарий

Внимание: HTML не поддерживается! Используйте обычный текст!
    Бесполезно           Полезно
Captcha

Подпишитесь

Рассылаем только значимую информацию

Теги: Как сократить CSS, Игры с попугаями (PageSpeed Insights)