Оптимизируем CSS. Уменьшаем размер файла стилей.

Существует множество способов оптимизации веб-страниц. Вдобавок к уменьшению числа HTTP запросов или загрузке сжатых файлов, мы также можем уменьшить размер кода. Простейший способ минимизировать Ваши каскадные таблицы – это прогнать их через онлайновый оптимизатор кода, который автоматически удалит лишние свойства, позволяя уменьшить размер. Сокращение позволяет значительно сжать объем, примерно на 30% или более (зависит от загружаемого файла). Это сокращение не что иное, как результат использования ряда техник микро-оптимизации, применяемых к вашей таблице стилей. Изучая эти техники и практикуя их в процессе кодирования, вы создадите значительно лучше оптимизированный CSS. Острее навыки, чище код, быстрее загрузка – в выигрыше останутся все.

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

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

Я сомневаюсь, что кто-то из вас будет применять все техники микро-оптимизации, представленные в этой статье. Тогда ваш код будет выглядеть так, будто его отполировали в автоматическом оптимизаторе, то есть следующим образом:

#comments ol{margin:10px 0 20px 25px}
#comments ol li{margin:7px 0 7px 25px;width:90%}
#comments .comment ol,#comments .comment ul{margin:3px 0 10px 5px}
#comments .comment ol li,#comments .comment ul li{margin:5px 0 5px 25px}
#comments #comments-closed{margin:5px 0 15px 15px}
#comment-policy{margin:5px 10px 0 0;width:300px;float:right;clear:both}
#comment-policy span{font-family:Monaco,"Panic Sans","Lucida Console","Courier New",Courier,monospace,sans-serif}
#comment-form{padding-top:10px;margin-top:15px}
#comment-form fieldset{border:0 none}
#respond #comment-form p{margin:0 0 0 20px}
#comment-form div.input,#comment-form div.textarea{border:1px solid #CF7400;float:left;clear:both;margin:0 0 10px 20px}
#comment-form div.textarea{height:221px;width:470px}
#comment-form textarea{height:211px;width:460px}
#comment-form input,#comment-form textarea,#comment-form #submit{font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #A6945E;background:#291F16;font-size:11px;color:#A6945E;padding:4px;margin:0}
#comment-form #submit{background:#3B2E22}
#comment-form input:focus,#comment-form input:active,#comment-form textarea:focus,#comment-form textarea:active,#comment-form #submit:hover,#comment-form #submit:focus,#comment-form #submit:active{border:1px solid #FFC;background:#3B2E22;color:#cc9}
#comment-form #comment-info{padding:0 0 15px}

Примерно так он выглядит после оптимизации, но вы вряд ли захотите работать с этим набором букв и цифр. К счастью, возможны и другие варианты кроме “все-или-ничего”. Представим микро-оптимизацию в виде отрезка, на одном конце которого абсолютно сжатый код, а на другом - абсолютно “не сжатый”. Все мы как дизайнеры, занимаем определенное положение на это отрезке, что отражает способность каждого создавать грамотный чистый код. Все это, конечно, субъективно – и от вас как от дизайнера зависит, будете ли вы улучшать свой стиль кодирования, используя столь много (или столь мало) этих техник, сколько пожелаете.

Цель этой статьи – представить вашему вниманию максимум способов микро-оптимизации стилевых таблиц, позволяя писать более чистый, компактный CSS. Хотя все эти техники эффективны, не все могут быть применены на практике в процессе оптимизации. Используйте то, что будет работать. Даже если вы проигнорируете эти методы и будете продолжать пользоваться специальными скриптами, эта статья позволит вам понять возможности микро-оптимизации и то, как происходит процесс уменьшения кода.

Совет #1: Используйте самые краткие значения цветов.

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

. Можно записать так:

article { background-color: rgb(255,255,255); }

Естественно, это сработает, но можно сделать лучше:
article { background-color: #ffffff; }

И еще короче:
article { background-color: #fff; }

Но посмотрите на свойство background – нет необходимости записывать его целиком:
article { background: #fff; }

Итак, давайте сравним “до” и “после”:

article { background-color: #ffffff; }
article { background: #fff; }

Также замечу, что некоторые названия цветов короче, чем их шестнадцатеричная запись. Например, записать “red” эффективнее, чем “#cc0000”.

Совет #2: Объединяйте повторяющиеся свойства.

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

#wrap p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.22em;
}
             .
             .
             .
p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.33em;
}

Согласно правилу, нижние значения будут использоваться, а верхние игнорироваться, так что можно смело объединить эти свойства и сэкономить пару байт:

p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.33em;
}

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

Совет #3: Используйте сокращенный синтаксис

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

Основной смысл сокращенного синтаксиса CSS в том, чтобы объединить определенные свойства в одну декларацию. Вспомним предыдущий пример:

p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.33em;
}

Здесь очень много кода, и если описывать так все остальные селекторы, наш файл очень быстро разбухнет до невероятных размеров. Так выглядит набор свойств после объединения:

p {
             font-family: normal 1.33em/1.33 Georgia, serif;
}

Разница огромна. Существует несколько конкретных свойств, которые можно объединить, используя сокращенный синтаксис. Вот еще несколько примеров:

/* эти 4 значения */
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;

/* можно записать как */
background: #fff url(i/dope.png) repeat-x 0 0;


/* эти 4 значения */
margin-top:    10px;
margin-right:  20px;
margin-bottom: 10px;
margin-left:   20px;

/* можно записать в виде */
margin: 10px 20px 10px 20px;

/* эти 3 значения */
border-width: 1px;
border-style: solid;
border-color: red;

/* записываем в виде */
border: 1px solid red;

Совет #4: Объеденяйте схожие значения

margin: 10px 20px 10px 20px;

Можно немного сэкономить места, если предстваить это в таком виде:
margin: 10px 20px;

Совет #5: Опускайте лишние нули

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

padding: 0.1em;
margin: 10.0em;

Давайте выкинем нули:

padding: .1em;
margin: 10em;

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

Совет 6: Опускайте единицы измерения для нулевых значений

Ничего сложного, но мне понадобился год, чтобы привыкнуть и начать использовать эту технику. Посмотрите:
padding: 0px;

Выглядит безобидно, но здесь два совершенно лишних символа. Когда дело касается нулевых значений, единицы измерения указывать не обязательно. Ноль всегда ноль, ничто, пусто. Просто используйте ноль и забудьте об остальном:

padding: 0;

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

Совет #7: Опускайте последнюю точку с запятой

Вы знали, что последнюю точку с запятой в любом наборе свойств можно опустить? Это правда. Вернемся к нашему примеру с абзацем:

p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.33em;
}

Последняя строка в любом наборе свойств не требует закрывающей точки с запятой. Так давайте удалим ее:

p {
             font-family: Georgia, serif;
             font-weight: normal;
             line-height: 1.33em;
             font-size: 1.33em
}

..и затем запишем все в сокращенной форме:

p { font-family: normal 1.33em/1.33 Georgia, serif }

Мне все еще немного непривычно не ставить последнюю ;, большинство дизайнеров, которых я обучаю, все еще ставят ее в каждом наборе правил. Хотелось бы услышать ваше мнение по этому поводу.

Совет #8: Удаляйте комментарии из рабочих файлов

Да, комментарии в CSS естественны для создания чистой и хорошо структурированной таблицы, но они на 100% бесполезны для браузеров. Так зачем включать их в рабочие файлы? Браузером все эти аккуратно расставленные надписи полностью игнорируются, но тем не менее они продолжают съедать ресурсы сервера, грузить канал, и увеличивать время загрузки. Так избавляйтесь же от них!!!

Если для вас это звучит как богохульство, расслабьтесь. Самое интересное вас ждет в конце этой статьи.

Совет #9: Удаляйте ненужные пробелы

Удаляйте столько пробелов, сколько сможете. Кроме случаев сокращенной записи, они, в общем-то, не нужны и раздувают код примерно на 50% и более. Взглянем на пример. Имеется стандартно оформленный селектор body:

body {
             font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
             background-color: #333;
             text-align: center;
             margin: 0px auto;
             font-size: 62.5%;
             color: #FFF;
}

Удаляя ненужные пробелы, получаем:

body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

13 пробелов и 8 переносов мы удалили из набора свойств. Неубедительно? Подумайте: если у нас есть 50 (в среднем) селекторов в стилевой таблице, в каждом примерно 10 пробелов, получается, что мы избавляемся более чем от 500 символов. А это более 500 байт загружаемого файла, что просто мега внушительно при любом объеме трафика.

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

p {font-family:normal 1.33em/1.33 Georgia,serif;}

Видите, как пробелы используются для отделения различных значений? Пробел можно удалить между названием свойства и первым его значением, но между значениями он необходим. Так бы код выглядел, удали мы все пробелы:

p { font-family:normal1.33em/1.33Georgia,serif;}

Очевидно, что браузер всю эту белиберду не поймет, и правило будет проигнорировано (хотя IE может что-нибудь с этим и сотворить).

Все это, определенно, подводит нас к следующему совету.

Совет #10: Никаких махинаций с оформлением!

Что я больше всего люблю в кодировании – так это создавать файлы, приятные глазу. Не пытайтесь уместить весь код в одну строку. Разворачивайте, форматируйте, делайте таблицы красивыми и удобочитаемыми. Вот пример того, как я обычно оформляю код:

hr {
             margin: 25px 0 25px 0;
             background: #CF7400;
             text-align: left;
             padding: 15px 0;
             display: block;
             border: 0 none;
             color: #CF7400;
             height: 1px;
             clear: both;
             width: 96%;
}

acronym, abbr {
             border-bottom: 1px dotted #514031;
             cursor: help;
}
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
             font-size: 10px;
             line-height: 0;
             color: #cccc99;
}
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
             background: #CF7400;
             padding-left: 25px;
}

code, kbd, samp, tt, var {
             font-family: "Courier New", Courier, monospace, sans-serif;
             color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
             font-size: 11px;
}
h3 code { font-size: 13px; }
pre {
             border-left: 1px solid #CF7400;
             padding: 10px 0 12px 10px;
             background: #3B2E22;
             overflow: auto;
             margin: 25px 0;
             width: 525px; /* 95% of 555px = 525px */
}

pre:hover {
             border-left: 1px solid #FFFFCC;
             background: #3B2E22;
}

Гораздо более эффективно, если ваш css выглядит так:

hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Видите, никаких ухищрений. Аккуратно, скучновато, но очень эффективно. Впервые я начал использовать эту технику, поработав совместно с гуру CSS Крисом Койером над сайтом «Вгрызаясь в вордпресс». Он пишет все в формате «в одну строку», я тоже попробовал – и мне понравилось. Есть какая-то практическая элегантность в однострочных наборах свойств, и таблицы не требуют бесконечного пролистывания, что само по себе прекрасный способ оптимизировать не столько работу сайта, сколько вашу собственную.

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

Совет #11: Не забывайте про валидацию!

После приведения своего творения в порядок, не забудьте воспользоваться валидатором. Это не займет много времени и совершенно бесплатно, но является отличным способом проверить – не упустили ли вы чего. Я всегда удивляюсь, когда вижу, какие ошибки допустил: некоторые ни за что бы сам не заметил, другие до смешного очевидны.

Бонусные советы.

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

a:link, a:visited {}

..можно записать таким образом:

a:link,a:visited{}
Эти лишние пробелы для браузера совершенно бесполезны.

Второй момент – убирать переносы между наборами свойств. Допустим, имеется следующий код:

h1{color:#111}
h2{color:#333}
h3{color:#777}

Примерно так выглядит большинство сайтов после оптимизации, но мы можем пойти дальше:

h1{color:#111}h2{color:#333}h3{color:#777}

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

Подводя итоги.

Сжатие в CMS

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

В отдельности, каждая из этих техник малозначима. Но, применяя поочередно все 10, 20 или более раз в одном файле, мы значительно прибавляем в быстродействии. Затем умножаем сэкономленный нами объем на количество загрузок файла. Путем нехитрых математических вычислений видим, как эти «микротехники» помогают нам экономить огромное количество ресурсов сервера. Трудно сразу начать создавать хорошо оптимизированные файлы, но постепенно внедряя в свою работы эти советы, со временем вы научитесь писать на высокопродуктивном CSS.

Старайтесь создавать оптимизированные таблицы стилей. Всегда бывают случаи, когда хочется оставить код в красивом и понятном человеку виде, но для 99% сайтов лучше, когда выше их производительность. Машинам все равно, насколько аккуратен ваш код.

Написание аккуратных и структурированных каскадных таблиц стилей часто идет вразрез со всем, что мы здесь обсуждали. Но необязательно должно. Я подвожу к тому, что в конечном счете вы обнаружите, как впервые создали хорошо отформатированный, аккуратный код, в котором не нужно будет ничего оптимизировать. Представьте, как легко вы сможете создавать оптимизированные файлы прямо в Notepad’е.

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

Перевод выполнил Александр Лазарев по заказу веб студии Алоха!.