Оптимизация CSS: методы и онлайн сервисы

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

Оптимизировать (сжать) CSS

Сразу возникает вопрос — а зачем это нужно? Ответ прост: оптимизируя таблицы стилей снижается загружаемый объем кода, вес файла style.css. В итоге страница станет меньше весить, а это экономия трафика и увеличение скорости загрузки сайта.

Ко всему прочему, Google признает скорость загрузки интернет-страницы как один из факторов ранжирования в поисковой выдаче.

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

Как оптимизировать CSS и уменьшить размер файла

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

Какие мероприятия можно провести при оптимизации CSS:

  • Удалить неиспользуемые селекторы.
  • Удалить неиспользуемые закомментированные строки.
  • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания. Например, вместо
    1
    
    /* Здесь начинается описание стилей подвала */

    использовать лаконичное и всем понятное

    1
    
    /* Footer */
  • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
  • Объединить элементы с одинаковыми свойствами.
  • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
  • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
    1
    2
    
    #ffffff заменить на #fff
    #112233 заменить на #123
  • Оптимизировать отступы. Опять же на примерах:
    1
    2
    3
    
    padding:10px 20px 10px 20px; заменить на padding:10px 20px;
    padding:10px 0px 0px 0px; заменить на padding:10px 0 0;
    padding:10px 10px 10px 10px; заменить на padding:10px;

Конечно можно найти и другие пути оптимизации, но на этом я пожалуй остановлюсь и продолжу свой рассказ про онлайн инструменты оптимизации CSS.

Оптимизация CSS с помощью онлайн сервисов

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

Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

Подробнее остановлюсь на том, которым чаще всего пользуюсь. Это CSS оптимизатор на портале для вебмастеров CY-PR.com.

Оптимизация CSS онлайн

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

  • максимальное (код не читаем, наименьший размер);
  • высокое (сносная читаемость, маленький размер);
  • стандартное (баланс между читаемостью и размером);
  • низкое (читаемый код);
  • выбрать самому (ввести параметры ниже).

Для безопасной оптимизации рекомендуется использовать стандартное сжатие. Ради интереса воспользуйтесь другими быстрыми настройками, но помните о резервной копии. После того как параметры сжатия CSS заданы можно приступать к непосредственной работе скрипта, нажатием кнопки Оптимизировать CSS.

Результаты выводятся ниже с указанием исходного и оптимизированного размера кода, а также коэффициент сжатия в процентном соотношении:

Сжатие CSS

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

  1. Денис

    Я уже раньше задумывался о оптимизации своего сайта, и даже применял некоторые способы на практике. И как-то про css совсем забыл что ли, а благодаря данной статье смогу улучшить качество и скорость загрузки своего сайта. Спасибо.

    Ответить

  2. Александр

    Сжал стили темы, но что-то мне подсказывает, что скорость загрузки сайта если и увеличилась, то на 0,000001%

    Как я не замерял скорость загрузки онлайн сервисами до и после сжатия — разницы нет вообще)

    Ответить

  3. Василий

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

    Ответить

  4. Сергей

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

    Ответить

  5. Webliberty

    Александр, а сколько процентов выиграли на сжатии файла? Быть может слили были изначально хорошо оптимизированы и эффект мало заметен. Знаете пословицу «Копейка рубль бережет» — так в здесь, даже самый мало-мальский результат пойдет на пользу.

    Василий, до перехода все было в порядке? Могу предположить что при переносе была повреждена база данных или что-то еще повлияло. Если есть бэкап состояния до переезда, по потестируйте на локальном сервере или откатите изменения до исходного состояния.

    Денис, Сергей, обязательно попробуйте! Даже если ускорение будет не ощутимо, то по крайней мере наведете порядок в CSS 🙂

    Ответить

  6. Александр

    Webliberty, я уже не помню, но там большой процент где-то 40%. А сами то проверяли до и после?

    Ответить

  7. BYsolo

    Хотелось бы отметить, что CSS сами по себе очень легкие, но за информацию спасибо есть над чем задуматься…

    Ответить

  8. Webliberty

    Александр, я сначала все вручную оптимизировал, поэтому выхлоп небольшой, порядка 10-15%

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

    Ответить

  9. Nikolaos

    А как обратно его разжать, для редактирования допустим, а то ведь в таком виде неудобно совсем 🙂

    Ответить

  10. Webliberty

    Nikolaos, в таком случае Вам больше подойдет специальный плагин для сжатия или библиотека Minify.

    Ответить

  11. Marplan

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

    Ответить

  12. Webliberty

    Marplan, при максимальном сжатии происходит объединение некоторых селекторов, меняется их последовательность. И, например, случается так, что в css несколько раз прописаны разные стили для одного и того же класса, но применяется только одно, в итоге верста «съезжает». Это лишь один пример из возможных.

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

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, Вы соглашаетесь с Политикой конфиденциальности.