Оптимизация 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 верстки, он отображает все ошибки и предупреждения, независимо от их значимости для поисковых систем.
Кстати, в сети практически нет 100% валидных сайтов, и даже главная страница поиска Яндекса (ya.ru) содержит 10 ошибок и 5 предупреждений, а главная Google еще больше – 23 ошибки и 5 предупреждений. Официальный сайт нашего любимого хостинга uCoz содержит 19 ошибок и 21 предупреждение.
Равняться на поисковые системы, соц. сети и сайты-гиганты не стоит! Большинство из них предназначены для других целей и валидность в коде им не нужна. Она нужна тем сайтам, которые принимают участие в конкурентном ранжировании и собирают трафик из поисковых систем.
Я могу посоветовать, лишь одно - максимально сократить число ошибок на страницах, путем последовательного анализа каждого пункта выданного валидатором W3C. Все проблемные пункты обоснованы на английском языке и вам придется копировать название ошибки и самостоятельно искать решение на русскоязычных сайтах. Да, часть ошибок все равно останется, но чем их будет меньше – тем лучше!
Оптимизация HTML кода оказывает очень хорошее влияние на общее продвижение сайта. Чистка кода от «мусора» позволяет поисковым роботам быстрее проводить сканирование страниц, делает сайт более доступным для посетителей, а так же облегчает работу по внутренней оптимизации и самому вебмастеру. Согласитесь, что работать намного приятнее в чистом и удобном коде, нежели тратить лишнее время, отвлекаясь на лишние, неструктурированные и бесполезные теги.