Каждый веб-мастер в один прекрасный момент встречается с нуждой оптимизации своего сайта под современные требования поисковых систем. Делается это с целью увеличения его позиций в выдаче, и, следовательно, увеличения притока целевого трафика. Среди разнообразия факторов, имеющих влияние на релевантность сайта, особо выделяется внутренняя оптимизация, которой почему-то очень часто пренебрегают.
На эту тему уже размещено не малое количество информационного «мусора» в блогах, школьнегами создано кучу топиков на форумах и даже в социальных сетях ведутся разговоры про поисковую оптимизацию сайтов. Поэтому я не буду рассказывать о том, какие теги необходимо использовать на странице, с какой частотой следует прописывать ключевые фразы в прямых и непрямых вхождениях. Все это давно «заезженно» и даже новички в курсе всех этих тонкостей. Сегодняшняя тема – это оптимизация HTML-кода страниц.
Да-да, именно эта куча непонятного и в большей своей части ненужного кода, отвечающего за форматирование контента и удобство его восприятия, играет важную роль в SEO-продвижении сайтов. Каким образом? В первую очередь оптимизация HTML-кода может положительно повлиять на скорость загрузки сайта, которая является одним из поведенческих факторов ранжирования, набирающих все больший авторитет в глазах поисковых систем.
Думаю, не открою вам секрет, если скажу, что поисковые боты видят страницы не так, как мы. Они не видят дизайнерских «наворотов», они просто читают HTML-код страницы, слева-направо и сверху-вниз. Так что все самые важные элементы страницы должны располагаться в самом верху, но зачастую там размещается куча ненужного и непонятно за что отвечающего кода, который препятствует работе поисковых роботов. В итоге, в выдаче получаем позиции далеко за ТОП-10 и практически нулевой трафик.
Оптимизация HTML-кода: основные рекомендации:
1. Title и мета-теги Keywords, Description
Эти теги должны располагаться сразу же после тега head. Часто можно увидеть наплевательское пренебрежение, когда после head идет все, что угодно, особенно во многих популярных бесплатных CMS.
2. Основной контент должен находиться как можно выше
С точки зрения индексации поисковыми роботами разницы между табличной и блочной версткой нет никакой. Но с другой стороны, позиционирование блоков при блочной верстке гораздо удобнее. К примеру, блок визуально расположенный около футера в коде можно поднять под head. Таким образом, без принесения в «жертву» дизайна сайта можно добиться большей дружелюбности от поисковых систем.
3. Java-скрипты и CSS-стили подключаются через внешние файлы
Оптимизация HTML-кода главным образом заключается в этом правиле, в случае его не соблюдения, значительную часть кода будут занимать java-скрипты и стили оформления элементов. Поэтому для ускорения загрузки сайта прячем их в отдельные файлы .js и .css.
4. Закрытие ненужных элементов от индексации
Элементы страниц, которые не несут в себе никакой смысловой загрузки, необходимо закрывать от индексации, что увеличивает релевантность сайта. Поисковые системы читают код, включенный в тег noindex, но не учитывают его при ранжировании сайтов. К таким элементам можно отнести формы опросов и голосований, строка поиска, панель авторизации и прочие.
Такая оптимизация HTML-кода позволит увеличить общий приток трафика примерно на 10-20%, что очень неплохо, учитывая отсутствие финансовых затрат. С этого можно сделать вывод, что оптимизация HTML-кода не является мелочью, так как в искусстве SEO мелочей нет.
Оптимизация CSS кода:
1. Сокращайте значения цветов
Существует несколько вариантов указания цвета, используйте короткие значения. Я буду приводить сначала самые длинные варианты, ну а конечные – самые короткие.
Самый длинный вариант, указания цвета в RGB:
body { background-color: RGB (0 0 255);}
//Теперь сократим указав в шестнадцатеричной системе:
body { background-color: #0000FF;}
//Сокращаем, удалив лишние нули и буквы:
body { background-color: #00F;}
//Окончательно сокращенный вариант:
body { background: #00F;}Как видим конечный вариант самый короткий, однако бывают случаи когда название цвета, короче чем его шестнадцатеричная интерпретация. Например: короче написать Gold, чем #FFD700.
2. Используйте сокращенный синтаксис
Например:
.element { margin-top: 10px;
margin-left: 10px;
margin-bottom: 5px;
margin-right: 2px;
}
//Сократим:
.element { margin: 10px 2px 5px 10px;}3. Одинаковые свойства – объединяйте воедино.
Пример:
body { font-family: Tahoma, Verdana; }
p { font-family: Tahoma, Verdana; }
//Сокращаем:
body, p { font-family: Tahoma, Verdana; }
4. Удаляйте лишние записи и нули.
//Пример №1:
element { margin: 0px 5px 7px 8px; }
//Сокращаем:
element { margin: 0 5px 7px 8px; }
//Пример №2:
element {padding: 0.5em; }
//Сокращаем:
element { padding: .5em; }
//Пример №3:
element {padding: 7px; }
//Сокращаем:
element { padding: 7px }В последнем варианте я убрал “;” перед закрывающейся фигурной скобкой, можно принебречь данным элементом, ну хотя каждый решает сам, можно и не убирать wink .
6. Удаляйте строки комментариев.
Если вы закончили править свой файл стилей, то не следует оставлять закомментированные строки. Удаляйте комментарии, так-как кроме как вам, они больше никому не нужны, а браузерам так тем более LOL .
7. Удаление пробелов.
Некоторые кодеры весь код CSS пишут в одну строку, таким образом cводя количество пробелов к минимуму. В итоге конечный файл получается намного меньше, чем если бы всё расписывать отдельными строками.
Пример (неоптимизированный код):
body {line-height: 1;}
ol, ul {list-style: none outside none;}
/*Оптимизируем:*/
body{line-height:1px;}ol,ul{list-style:none outside none;}8. Валидность кода.
Бывает когда даже профессионал не замечает ошибки, а новичек тем более. Поэтому советую проверять свой код на валидность. Проверить можно на сайтеW3C Validator.
Начну обзор с менее популярных и проработанных сервисов переходя к более пиаристым.
1. http://www.cssoptimiser.com – простенький онлайн оптимизатор, который обрабатывает ваш CSS код и на выходе вы получаете сжатую версию. Есть возможность загрузить как готовый файл CSS, так и вставить код вручную. В принципе достаточно простой инструмент, никаких настроек, занес код и получил на выходе конечный результат, единственное что можно отметить: “Не убирать пробелы между строками”. Загнал код своего сайта и получил оптимизацию в 35,21%, уменьшение размера файла стилей с 16,33 kB до 10,58 kB.
Оптимизация и уменьшение CSS кода с помощью Online-CSS-Optimiser
2. http://www.cssdrive.com – на данном сервисе представлено на выбор 3 способа компресии: легкий, нормальный, супер компактный. Так-же можно выбрать – как поступать с комментариями в коде, удалять их или нет. Уровень компресии составил 37% с 16,33 kB до 10,52 kB.
Оптимизация и уменьшение CSS кода с помощью CSS-Drive
3. http://www.refresh-sf.com – онлайн инструмент компрессии Javascript/CSS файлов. В своей основе использует Yui компрессор от Yahoo. Можно загрузить файл стилей, указать путь к сайту или вставить в редактор вручную. На выходе получил два файла один с компрессией в 36% (до 16,33 kB после 10,425 kB), так-же файлик с gzip компрессией в 85%.
Оптимизация и уменьшение CSS кода с помощью Online-YUI-Compressor
4. http://iceyboard.no-ip.org – сервис с небольшим набором настроек. На входе можно указать URL сайта, загрузить или вставить код. На выходе я получил файл с компрессией в 39,24% (было 16,33 kB стало 9,93 kB).
Оптимизация и уменьшение CSS кода с помощью Robson-CSS-Compressor
5. http://www.lonniebest.com – онлайн инструмент работы с CSS кодом. Можно выставить параметры и варианты сжатия кода, так и произвести обратную операцию.
Оптимизация и уменьшение CSS кода с помощью Format-CSS-Online
6. http://www.cleancss.com – хороший инструмент для манипуляций с CSS кодом, однако удручает то что он базируется на устаревшей версии парсера CSSTidy v.1 .1, но им тоже неплохо можно сжать наш код.
Оптимизация и уменьшение CSS кода с помощью Clean-CSS
7. http://cdburnerxp.se – мощный инструмент для оптимизации CSS кода, использует в своей основе парсер и оптимизатор CSSTidy версии 1.3. Богатый набор настроек. На выбор 4 предустановки компрессии. Окно вывода изменений совершенных программой. Советую 😎 !
Оптимизация и уменьшение CSS кода с помощью CSS-Formatter-and-Optimiser-Optimizer-(based-on-CSSTidy-1.3dev)
Декомпрессия и стилизация CSS кода.
Представьте что вам нужно разобраться в чужом CSS коде, а он мало того что огромных размеров, так еще и записан в одну строку. Я подобрал список онлайн сервисов на которых вы сможете обратно “разжать” CSS код.
1. http://www.styleneat.com – этот стандартизирует и стилизирует код, что дает возможность быстро разобраться в связях между селекторами, классами и прочей чепухе. Минимум настроек и прекрасный вывод качественно отформатированного кода CSS.
Улучшаем CSS c помощью Styleneat—CSS-Organize
2. http://www.prettyprinter.de – как и первый сервис, этот выполняет тоже функции улучшения вида кода, однако здесь уже есть настройки. Можно указать где ставить пробелы и добавлять отступы и т.д.
Декомпрессия улучшение CSS кода prettyprinter.de
3. http://tools.arantius.com – этот инструмент расставляет пробелы, согласно предпочтениям разработчика онлайн утилиты. Протабить на нем можно HTML, CSS, C++, JSON.
Таббирование и улучшение CSS кода с помощью Arantius.com
Пользуйтесь, оптимизируйте, улучшайте, однако помните что прежде чем изменять свой код CSS – сделайте бэкап!
http://cleancss.com/ – удалит лишние пробелы, мусор, правильно настроит цвет.
