12 советов — Как оптимизировать CSS код. Оптимизация css кода сайта


уменьшение объема кода, CSS и HTML оптимизаторы, валидация

Содержание статьи

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

Оптимизация CSS и HTML-кода сайта

Оптимизация CSS и HTML-кода сайта

Оптимизация HTML-кода

Для того чтобы HTML-код способствовал быстрой загрузке сайта, он должен соответствовать нескольким условиям:

  • Быть простым и информативным. Проверив его на валидность, нужно исправить ошибки, чтобы ботам было легче анализировать его. Код должен четко представлять структуру страницы.
  • Основные составляющие страниц, такие как заголовки, указатели, блоки информации должны быть легко и быстро определяемы.
  • Освобождение кода от лишних сведений, вынесение их в отдельные файлы (например, можно вынести CSS и JS), повысит скорость загрузки, что также упрощает работу ботов.

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

Уменьшение объема кода и оптимизация CSS

Сделать код сайта проще можно, уменьшив его объем. Для этого нужно выполнить несколько операций.

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

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

Оптимизация CSS и HTML-кода сайта

Оптимизация CSS и HTML-кода сайта

Некоторые способы улучшить структуру CSS в ручном режиме:

  • Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;
  • Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;
  • Использовать лаконичные, понятные описания в комментариях;
  • Необычные шрифты прописывать при помощи стилей, а не изображений;
  • Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;
  • Применять к заголовкам инструменты h2 – и далее, чтобы они корректно распознавались при индексации;
  • Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;
  • Использовать разнообразные и краткие мета-теги.

CSS и HTML оптимизаторы

Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:

  • CleanCSS.com;
  • CSS Optimizer;
  • CSS Compressor;
  • CY-PR.com;
  • плагин Autoptimize.

Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.

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

Оптимизация CSS и HTML-кода сайта

Оптимизация CSS и HTML-кода сайта

На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.

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

После оптимизации следует проверить работоспособность сайта, корректное отображение дизайна, скорость загрузки. Нормальной считается ситуация, когда страницы и пользовательские опции сайта загружаются не более 3-5 секунд.

Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:

  • optimization.com;
  • Портал seo-чеклист;
  • плагин Firebug.

Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.

Оптимизация CSS и HTML-кода сайта

Оптимизация CSS и HTML-кода сайта

Валидация

Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org

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

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

znet.ru

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

онлайн оптимизация цсс кода Доброе утро, дорогие друзья! Получилось так, что неделя посвящена, в большей степени, оптимизации и ускорению загрузки лендинг пейдж. Сегодня продолжим “маньячить” в этой области. На очереди оптимизация css кода. Я расскажу вам про онлайн сервис для оптимизации таблиц стилей.

Эти сервисы довольно просты и работают по принципу:

“Вставил неоптимизированный код. Подождал несколько секунд. Скопировал оптимизированный код”

Как видите – это довольно просто и не затратно, но не все находят время, чтобы заняться этим. А зря!

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

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

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

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

Поэтому оптимизируем, но не сходим с ума — это первое.

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

Например, цвета. Обычно, мы задаем их в стандарте RGB. Белый фон для элемента задается следующим образом

background: #ffffff;

Но не все знают, что если первые 3 значения повторяются, то можно оставить только их. Например, так:

background: #fff; background: #000; color: #123;

Следующее, что приходит на ум – это отступы (padding и margin)

padding: 10px 20px 10px 20px; /*вместо*/ padding: 10px 20px; margin: 15px 20px 15px 20px;  /*вместо*/ margin: 15px 20px;

Также, оптимизировать css код можно за счет сокращенного задания шрифтов:

font: bold 18px Verdana, Arial, sans-serif;

Вместо:

font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;

Как видите – одна строчка против трех. И таким образом, иногда, удается уменьшить вес таблицы стилей на 20 – 30%.

Третье, о чем стоит помнить, —  это то, что всегда перед любой оптимизацией, будь то картинки или css, нужно делать резервную копию (на случай непредвиденной ошибки или еще чего). Просто возьмите себе за правило всегда делать копию перед редактированием.

Теперь – все. Переходим к сервису.

Обзор сервиса для онлайн оптимизации css кода.

Большинство людей пользуются такими популярными сайтами для оптимизации css кода:

alexvaleev.ru/cssoptimizer

css-school.ru/optimise

Функционал фактически одинаковый, простой и понятный. Но, проанализировав их, я нашел как плюсы, так и недостатки. Давайте посмотрим на один из них — css-school.ru/optimiser

Слева окно для вставки css кода, а справа настройки параметров оптимизации. Разберем подробнее окно.

оптимизация css кода онлайн

Степень сжатия.

Для того, чтобы текст оставался удобочитаемым, необходимо поставить стандартную степень сжатия, в таком случае каждое новое свойство будет писаться с новой строки. Если выставить «высокую» или «максимальную», то размер файла будет меньше, но все будет записано в одну строчку. Это не очень удобно для дальнейших правок, но если их не будет, то смело можете ставить «максимальную».

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

Далее идет вкладка, позволяющая выбрать, объединять селекторы с одинаковыми свойствами. Здесь все зависит от проекта и задач. Если вы писали css код строго в определенной последовательности и у вас все строго друг за дружкой, то не следует выбирать объединение селекторов. Так вам легче будет ориентироваться в коде.

Оптимизация стилей. Оставляем – “безопасная”

Сжатие цветов и свойств шрифтов – это то, о чем я вам говорил. Хотя и со сжатием свойств шрифтов — проблема. Он не оптимизирует код, как я вам рассказывал выше.

Остальные настройки не вызывают вопросов. В общем я заметил, что все русскоязычные сервисы для онлайн оптимизации css кода, страдают “болезнью”. Они не оптимизируют css3 код. Что заставило меня полностью отказаться от подобных оптимизаторов.

Для примера, я ввел следующий код :

оптимизация css кода

Специально написал с пропусками строк, все подробно и т.д. И ожидал увидеть нечто подобное:

h2 { color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif }

Но к сожалению получилось всего лишь так:

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

 

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

А некоторый функционал сервисов мне показался лишним, ну или псевдофункционалом. Для того, чтобы создать видимость “навороченности” ресурса. Ну зачем мне галочка напротив «сокращать цвета». Конечно, если я пришел оптимизировать свой код, то мне нужно более короткое описание всего, что возможно! (Мое мнение)

Итак, я продолжил поиск и нашел тот самый ресурс, который удовлетворил мои потребности в оптимизации css кода. Это — devilo.us

Действительно потрясающий сервис, который я смело могу рекомендовать вам. Функционал такой же, как и у прошлых сайтов. Но этот справился с задачей на 100%. Смотрите:

оптимизация css кода для сайта

 

Как вы могли заметить, процент сжатия 43.3%, а на прошлом сайте было 25%. В байтах – это вышло 58 > 37. Вот такой я зануда. Но когда css файл имеет 3000 строк, то такая оптимизация может сократить вес документа вдвое.

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

А на сегодня – все. До скорых встреч.

smartlanding.biz

12 советов - Как оптимизировать CSS код

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

Чаще всего, несоблюдение требований при написании кода приводят к двум последствиям:

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

Избавиться от обоих недугов очень просто, достаточно соблюдать некоторые правила, вот они:

1. Не используйте глобальный сброс.

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

Плохо

*{ margin:0; padding:0; }

*{ margin:0; padding:0; }

Лучше

html, body, div, ul, h2, h3, h4, pre, form, label, input, p, blockquote, th, td { margin:0; padding:0 } img { border:0 } ul { list-style:none }

html, body, div, ul,

h2, h3, h4,  pre, form, label, input, p,

blockquote, th, td { margin:0; padding:0 }

img { border:0 }

ul { list-style:none }

2. Не используйте хаки для IE

С помощью CSS хаков можно добиться правильного отображения сайта в старых браузерах, таких как IE6, но они же могут вызвать проблемы с более новыми версиями IE, например IE8, который довольно неплохо поддерживает стандарты CSS и использование хаков может привести к порче макета. Следует использовать условные операторы для определенных версий Internet Explorer.

Например, следующий код, если его разместить в теге <head> заставит iestyles.css загружаться только для Internet Explorer версий 6 и меньше.

<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="styles/ie-styles.css" /> <![endif]-->

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />

<![endif]-->

Об условных комментариях можно почитать подробнее в статье на quirksmode — CSS Conditional Comments (на английском)

3. Используйте значимые имена для Классов и ID

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

4. Используйте наследование правил CSS

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

Плохо

#sidebar li{ font-family:"Lucida Grande", serif; } #sidebar a{ font-family:"Lucida Grande", serif; } #sidebar h4{font-family:"Lucida Grande", serif; }

#sidebar li{ font-family:"Lucida Grande", serif; }

#sidebar a{ font-family:"Lucida Grande", serif; }

#sidebar h4{font-family:"Lucida Grande", serif; }

Лучше

#sidebar{ font-family:"Lucida Grande", serif; }

#sidebar{ font-family:"Lucida Grande", serif; }

5. Объединяйте несколько селекторов

Вы можете объединять CSS селекторы в одном правиле если у них одинаковые свойства. Это сохранит вам и время и размер файла.

Плохо

h2{ font-family: "Lucida Grande"; } h3{ font-family: "Lucida Grande"; } h4{ font-family: "Lucida Grande"; }

h2{ font-family: "Lucida Grande"; }

h3{ font-family: "Lucida Grande"; }

h4{ font-family: "Lucida Grande"; }

Лучше

h2, h3, h4{ font-family: "Lucida Grande"; }

h2, h3, h4{ font-family: "Lucida Grande"; }

6. Используйте сокращенную запись

Возможность использования сокращенной записи поможет быстро писать CSS код и уменьшит размер файла. Сокращенная запись доступна для свойств margin, padding, border, font, background, а также для значений цвета.

Плохо

li{ font-family:"Lucida Grande", sans-serif; font-size: 1.3em; line-height: 1.5em; padding-top:3px; padding-bottom:8px; padding-left:7px; }

li{

    font-family:"Lucida Grande", sans-serif;

    font-size: 1.3em;

    line-height: 1.5em;

    padding-top:3px;

    padding-bottom:8px;

    padding-left:7px;

}

Лучше

li{ font: 1.3em/1.5em "Lucida Grande", sans-serif; padding:3px 0 8px 7px; }

li{

    font: 1.3em/1.5em "Lucida Grande", sans-serif;

    padding:3px 0 8px 7px;

}

7. Организуйте CSS код

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

Вот пример организации кода:

/*------------------------- CSS Reset -------------------------*/ /*------------------------- Layout styles -------------------------*/ /*------------------------- Typography -------------------------*/ /*------------------------- Section specific styles -------------------------*/

/*-------------------------

    CSS Reset

-------------------------*/

/*-------------------------

    Layout styles

-------------------------*/

/*-------------------------

    Typography

-------------------------*/

/*-------------------------

    Section specific styles

-------------------------*/

8. Делайте CSS читаемым

Написание читаемого CSS облегчит поиск и редактирование стилевых правил. Можно группировать стили селектора в одну строку или выделять для селектора отдельную строку. Конечно можно и комбинировать эти техники.

/*------------------------ Стили с переносом на новую строку ---------------------*/ div{ background-color:#339acc; color:#6a6; font: 1.3em/1.5em "Lucida Grande", sans-serif; height:288px; margin:10px 5px; padding:3px 0 8px 7px; width:29%; z-index:9; } /*------------------------ Все стили в одну строку ---------------------*/ div{ background-color:#339acc; color:#6a6; font: 1.3em/1.5em "Lucida Grande", sans-serif; height:288px; margin:10px 5px; padding:3px 0 8px 7px; width:29%; z-index:9; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/*------------------------

    Стили с переносом на новую строку

    ---------------------*/

div{

    background-color:#339acc;  

    color:#6a6;

    font: 1.3em/1.5em "Lucida Grande", sans-serif;

    height:288px;

    margin:10px 5px;

    padding:3px 0 8px 7px;

    width:29%;

    z-index:9;

}

/*------------------------

    Все стили в одну строку

    ---------------------*/

div{ background-color:#339acc; color:#6a6; font: 1.3em/1.5em "Lucida Grande", sans-serif;  height:288px; margin:10px 5px; padding:3px 0 8px 7px; width:29%; z-index:9; }

9. Добавляйте комментарии

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

/*-------------------- Шапка -----------------*/ #header{ height:138px; position:relative; } #header h2{ width:328px; margin:45px 0 0 20px; float:left; height:69px;} /*-------------------- Контент -----------------*/ #content{ background:#faf; width:632px; float:left; min-height:588px; overflow:hidden;} #content .posts{ overflow:hidden; } /*-------------------- Подвал -----------------*/ #footer{ clear:both; padding:32px 6px 0; overflow:hidden;} #footer h5{ color:#b93d7f; font-family:"Lucida Grande", sans-serif; font-size:1.2em; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*--------------------

    Шапка

    -----------------*/

#header{ height:138px; position:relative; }

#header h2{ width:328px; margin:45px 0 0 20px; float:left;  height:69px;}

/*--------------------

    Контент

    -----------------*/

#content{ background:#faf; width:632px; float:left; min-height:588px; overflow:hidden;}

#content .posts{ overflow:hidden; }

/*--------------------

    Подвал

    -----------------*/

#footer{ clear:both; padding:32px 6px 0; overflow:hidden;}

#footer h5{ color:#b93d7f; font-family:"Lucida Grande", sans-serif; font-size:1.2em; }

10. Сортируйте CSS свойства по алфавиту

Возможно это несколько сложно писать CSS с учетом алфавита, зато это упростит поиск нужных стилей в дальнейшем.

div{ background-color:#339acc; color: #6a6; font: 1.3em/1.5em "Lucida Grande", sans-serif; height: 288px; margin: 10px 5px; padding:3px 0 8px 7px; width: 29%; z-index:9; }

div{

    background-color:#339acc;  

    color:    #6a6;

    font:     1.3em/1.5em "Lucida Grande", sans-serif;

    height:    288px;

    margin:    10px 5px;

    padding:3px 0 8px 7px;

    width:    29%;

    z-index:9;

}

11. Используйте внешние таблицы стилей

Всегда нужно стремиться отделять содержимое от представления. Размещайте весь свой CSS код во внешних таблицах стилей и затем используйте <link> для подключения их к своей странице. Размещение кода во внешних файлах позволит вам легко изменять его в одном месте, а не изменять его во всех файлах где он использовался.

Плохо

<style type="text/css" > #objekt1{ .. } #objekt2{ .. } </style> OR <liLucida Grande", sans-serif; color:#666; " >

<style type="text/css" >

    #objekt1{ .. }

    #objekt2{ .. }

</style>

OR

<liLucida Grande", sans-serif; color:#666; " >

Лучше

<link rel="stylesheet" type="text/css" href="css/styles.css" />

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Сжимайте CSS код

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

Заключение

Надеюсь эти советы вам помогут при написании и редактировании кода. Оптимизированный CSS будет легче и приятнее править в будущем. Если по теме каскадных таблиц стилей вам есть что добавить или спросить — пишите в комментариях.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(9 голосов, в среднем: 5 из 5)

biznessystem.ru

Оптимизатор Css Кода И Сжатие Кода

ускорение сайта

оптимизация сайта

Program Optimization (Project Role)

оптимизация скорости сайта

финты вордпресс

JavaScript (Programming Language)

Cascading Style Sheets (Programming Language)

видеоанекдоты

время загрузки сайта

ускорить сайт

Текстовый редактор

создание сайтов

редактор кода

HTML (Programming Language)

как ускорить загрузку сайта

CSS Оптимизатор

уроки для веб разработчиков с itdoctor

минификация css

сжатие css на сайте

как сделать загрузку сайта быстрее

как оптимизировать сайт уроки itdoctor

Сжатие css кода

ускорить загрузку сайта

Полезные инструменты для веб-разработчика

оптимизировать код CSS

Оптимизатор CSS кода и Сжатие кода

Оптимизатор CSS кода

как оптимизировать CSS код

настройка Autoptimize

сжатие стилей

сдатие скриптов

перенос js из шапки в подвал

сжатие скриптов

канал для начинающих веб-разработчиков

fitweb.me

Как Оптимизировать Css Код | Fitweb

ускорение сайта

оптимизация сайта

ускорить сайт

как ускорить загрузку сайта

создание сайта

css для начинающих

Program Optimization (Project Role)

JavaScript (Programming Language)

Cascading Style Sheets (Programming Language)

верстка сайта

Web Development (Interest)

оптимиазция сайта

ускорение загрузки сайта

HTML (Programming Language)

финты вордпресс

привести код к первоначальному виду

канал для начинающих веб-разработчиков

Канал для разработчиков itdoctor

Оптимизация CSS кода

ускорить загрузку вашего сайта

видеоуроки html и css

блочная верстка сайта с помощью css уроки

уроки html и css для начинающих

fitweb.me

Оптимизация CSS кода в программе snap{css}

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

Оптимизация CSS

Не буду вдаваться в подробности, напомню лишь, что именно CSS (в расшифровке и переводе - каскадные таблицы стилей) отвечает за форматирование страниц сайта (цвета, размеры, шрифты и многое другое). Файл имеет расширение css, входит в состав как темы сайта (style.css), так и многих плагинов.

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

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

После тестирования нескольких самых популярных я остановился на snap{css} (программу можно скачать с официального сайта по адресу http://www.improvingcode.com/). Почему именно на ней и как она работает? Об этом я подробно расскажу ниже, но не будем забегать вперед, обо всем по порядку.

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

В пункте "Сократите CSS" кликните по ссылке "Как исправить" после чего откроется список всех файлов CSS, рекомендованных к оптимизации.

PageSpeed-Insights-css

При наведении курсора мышки на любую строку из списка, откроется подсказка полного адреса искомого файла. Скачайте каждый (по ftp или через файловый менеджер в аккаунте хостинга) по очереди на жесткий диск компьютера. Обязательно сделайте их резервные копии, мало ли что.

Теперь осталось самое интересное. Кликните по файлу правой клавишей мыши, в открывшемся контекстном меню выберите "Открыть как" или "Открыть с помощью" (у кого какая операционная система) и выберите заранее установленную программу "snap{css}".

snap{css}

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

Также, стоит заметить, что программа не удаляет закомментированные строки. Эту особенность нельзя однозначно отнести к плюсу или минусу. Лишние закомментированные строки придется удалять вручную, зато нужные можно оставить. Напомню, комментарии выделяются символами /* и */.

Закомментированные строки

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

Приступим к самой оптимизации. В меню «Tools» выберите инструмент «Collapse Code». Все, файл таблиц стилей оптимизирован. Сохраните изменения в меню "File" и закачайте файл обратно туда, откуда взяли.

В оптимизации CSS есть и обратная сторона медали. После сжатия код CSS приобретает вид, очень неудобный для редактирования. Когда возникнет необходимость в правке кода, понять там что-либо будет трудновато.  В snap{css}, в связи с этим, есть еще одно большое преимущество. Выберите инструмент "Beautify Code" в меню "Tools" и код вернется к нормальному первоначальному виду, даже если вы его сжали не в этой программе.

После таких нехитрых манипуляций ваш сайт станет чуть быстрее, что безусловно оценят поисковики. Если есть замечания, предложения или просто захочется пообщаться, оставляйте комментарии :-).

wordpress-book.ru