Самостоятельная раскрутка сайта uCoz
Главная » Раскрутка сайта uCoz » SEO советы


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


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

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


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

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

Для решения проблемы необходимо оптимизировать (провести чистку) HTML кода и CSS стилей.


Оптимизация объема исходного кода.

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


В управлении шаблонами модулей вы можете встретить такие записи:



<span style="font-weight:bold; font-size:15px; color:red; font-style: italic;">ЭТО МОЙ ТЕКСТ!!!</span>

Расшифровываю: для данного тега span указан определенный стиль (style=""). Текст, заключенный в этот тег будет жирным (font-weight), размером 15px (font-size), красным цветом (color), курсивным написанием (font-style).

Всего данный код занимает 97 знаков без пробелов. А теперь оптимизируем эту строчку!

В таблице стилей создаем новый класс text (название придумываете сами) и все что стоит в кавычках тега style записываете в этот класс. Вот так:

.text {font-weight:bold; font-size:15px; color:red; font-style: italic;}

Обратите внимание на точку перед названием класса text, на фигурные скобки с содержимым класса, на все двоеточия и точки с запятой – это обязательный синтаксис CSS – учите основы!

А в HTML коде к данному тегу span примеряем данный класс:

<span class="text">ЭТО МОЙ ТЕКСТ!!!</span>

Данный оптимизированный код содержит 39 знаков без пробелов. То есть мы сократили первоначальный код на 58 знаков. Если оптимизировать ВЕСЬ код подобным образом, то в итоге вы значительно укоротите его объем!

Кстати, к одинаковым стилям (то что написано в кавычках после тега style) не нужно заново создавать класс в таблице CSS, достаточно к HTML элементу прописать название этого же класса, как в оптимизированном примере.


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

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

Иногда в CSS таблице (обычно в самом начале) можно встретить записи типа:

@import url(«ссылка на файл»)

Это значит, что браузер во время чтения «родной» таблицы стилей натыкаясь на эту строчку, совершает запрос по адресу url, где «дополучает» какие-то стили. Вот эти все «какие-то» стили вы должны скопировать в основную (родную) таблицу CSS, дабы не заставлять браузер «уходить из таблицы куда-то и зачем-то».

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

Точно так же импортные стили CSS могут подключаться непосредственно в HTML коде страницы в блоке head:

<style type="text/css">@import url("style/main.css");</style>

Тут тоже нужно исключить импорт, и подключить таблицу стандартным способом:

<link rel="stylesheet" type="text/css" href="http://мой-сайт.ru/stili.css" />

Где stili.css – это простой текстовый файл в формате .css со всеми стилями из импортного файла main.css, загруженного в корень вашего сайта.

Или же как в первом случае нужно скопировать все стили из импортного файла в «родную» таблицу и на страницах шаблона подключать только ее:

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

Удаление пробелов и переносов строк в кодах HTML и CSS.

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

Если вы удалите лишние пробелы в коде, а определяющие логическую структуру HTML элементы «вытяните» в одну строчку (например, весь код формы поиска или весь код верхней части сайта определяющую логотип и слоган), то при повторном просмотре исходного кода вы заметите значительное сокращение его объема.

Тут нужно учитывать возможность удобного редактирования кода шаблона в будущем, потому что если вы весь-весь код сделаете одной строкой, то найти нужный элемент (или тег) в нем будет очень сложно и долго.

Оптимизированный файл CSS (без пробелов и пустых строк) можно получить в Page Speed.

После проведения анализа в Page Speed, вы увидите советы и рекомендации по оптимизации скорости загрузки страниц. Там будет пункт «Сократите CSS», при его раскрытии вы увидите по две ссылки для каждой используемой на сайте таблицы стилей – одна для просмотра оптимизированного CSS кода в окне браузера, вторая - на его скачивание в формате txt. Про другие рекомендации по оптимизации скорости загрузки страниц, я написал в этой статье.


Удаление лишнего кода (HTML тегов) и неиспользуемых стилей.

Очень часто в шаблонах встречаются неиспользуемые теги типа:

<b></b>, <p></p>, <div></div>, <span style="куча каких-то стилей CSS"></span>

и прочие «пустые» теги...

Они не несут никакого смысла, отвлекают при работе с HTML кодом шаблона и просто занимают место. В общем, никаких плюсов от них нет, только минусы и недостатки. Удаляйте их смело! Исключение составляют теги с указанием классов, например:

<div class="footer_line"></div>

Класс данного тега указан в таблице стилей, и он может служить для визуального отображения элементов дизайна сайта. Если вы его удалите предварительно не проверив, то можете нанести значительный вред всему дизайну сайта. Будьте внимательными – где прописаны классы (class), а где стили (style). Если вы проверили и убедились, что указанный класс недействительный (нерабочий, несуществующий) и никаким образом не влияет на визуальное представление сайта – удаляйте смело всю конструкцию (от открывающего до закрывающего тега).

Чтобы проверить работоспособность класса, достаточно скопировать его имя из HTML шаблона и в таблице стилей CSS выполнить поиск (Ctrl + F), если класс не найден, значит он лишний (если у вас несколько CSS таблиц, то проверять наличие класса нужно в каждой из них по очереди).


Исправление ошибок в HTML коде.

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

Чтобы провести быстрый анализ ошибок в HTML коде – воспользуйтесь браузером FireFox. При просмотре исходного кода вы увидите все ошибки подсвеченные красным цветом. Некоторые из них не являются значительными для поисковиков (например, замена спецсимволов специальными кодами или синтаксис в скриптах), но этот быстрый анализ позволяет выявить и более грубые ошибки, в основном это незакрытые HTML теги.

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


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

Я могу посоветовать, лишь одно - максимально сократить число ошибок на страницах, путем последовательного анализа каждого пункта выданного валидатором W3C. Все проблемные пункты обоснованы на английском языке и вам придется копировать название ошибки и самостоятельно искать решение на русскоязычных сайтах. Да, часть ошибок все равно останется, но чем их будет меньше – тем лучше!


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


Чтобы проводить оптимизацию HTML кода, нужно иметь хотя бы минимальные знания HTML верстки. Если вы «полезете» в код, не понимая «что к чему», то рискуете нанести значительный вред (вместо пользы) своему сайту и его дизайну.

Поделитесь записью в социальных сервисах!





    Аватар пользователя
    1. rdv777 (17.04.2015, 18:18)
    Уважаемый, автор!
    Оказываете ли Вы услуги по чистке HTML кода?
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    2. SEOprof (18.04.2015, 18:07)
    Какой движок вашего сайта? Юкоз?
    Аватар пользователя
    3. rdv777 (19.04.2015, 02:27)
    WordPress
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    5. SEOprof (19.04.2015, 20:06)
    Нет, к сожалению с вордпресом будет дольше. А времени нет...
    Аватар пользователя
    4. rdv777 (19.04.2015, 02:29)
    Грамотный сайт, дружище! tongue Посещаемость? Если не секрет.
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    6. SEOprof (19.04.2015, 20:07)
    Внизу есть счетчик.
    Аватар пользователя
    7. rdv777 (21.04.2015, 12:09)
    Где почитать релевантную инфу по чистке HTML кода на Вордпресс или возможно курс у кого-нибудь есть? 
    Подскажи пж.
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    8. SEOprof (22.04.2015, 08:08)
    Для этого не нужны курсы. Достаточно знаний в HTML и CSS и хороший запас времени и нервов.
    У пользователя нет аватара
    9. akula-z (04.11.2015, 21:43)
    Уважаемый автор, прочитала вашу статью, но не все до конца поняла.
    У меня такая проблема - в CSS не помещаются нужные мне стили, так как их слишком много, а их надо добавить для блока меню сайта и для табов.
    Насколько я поняла, мне нужно сохранить данные стили в файл CSS (с этим проблем не возникло), а вот дальше что делать? Какой код и куда нужно мне вставить, чтобы все работало?
    Аватар пользователя
    +1 Хороший комментарий Плохой комментарий
    10. SEOprof (05.11.2015, 08:35)
    Да, все правильно. Нужно создать простой текстовый файл. В него скопировать все стили. Затем сохранить этот файл "name.css". Потом залить его через файловый менеджер (куда угодно, обычно его заливают в папку css). И теперь осталось подключить этот файл на страницах сайта. Для этого в коде всех страниц имеющих структуру <html><head></head><body></body></html> (обратите внимание что вид материалов такую структуру не имеет) нужно вставить следующий код в блок HEAD: 
    
    Код
    <link type="text/css" rel="stylesheet" href="site.ru/css/name.css" />
    (только путь к файлу css укажите свой)

    Если будет конфликт файлов стилей - удалите из HEAD код подключающий стандартные стили uCoz. Обычно он выглядит типа так:
    Код
    <link type="text/css" rel="stylesheet" href="/_st/my.css" />
    У пользователя нет аватара
    11. akula-z (05.11.2015, 13:56)
    Большое спасибо за ответ. Теперь все стало ясно, как и что делать.
    Скажите, а код 
    Код
    <link type="text/css" rel="stylesheet" href="/_st/my.css" />
    из HEAD надо тоже со всех-всех страниц удалять?
    Аватар пользователя
    0 Хороший комментарий Плохой комментарий
    12. SEOprof (05.11.2015, 15:25)
    Код
    <link type="text/css" rel="stylesheet" href="/_st/my.css" />
    Этот код подключает стандартную таблицу стилей uCoz, которую вы редактируете в админке (в "Управлении дизайном"). Если вы подключили свой файл CSS (как я писал выше), то потребность в стандартном файле отпадает - можете его удалять со страниц. Теперь для редактирования стилей вам не нужно заходить в "Панель управления" - "Управление дизайном" - "Таблица стилей (CSS)", теперь все ваши стили в новом файле, который удобно редактировать прямо в файловом менеджере.
    У пользователя нет аватара
    13. akula-z (05.11.2015, 16:03)
    Поняла. Спасибо за помощь!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Быстрый вход ]







Опрос
Ваше отношение к uCoz?

Всего ответов: 750
Ваш профиль
Вся информация на этом сайте предоставляется бесплатно и без регистрации, но для того чтобы принимать участие в обсуждениях и комментариях необходимо зайти на сайт под своим именем (uID) или зарегистрироваться.
Новые пользователи