Оптимизация и чистка 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 верстки. Если вы «полезете» в код, не понимая «что к чему», то рискуете нанести значительный вред (вместо пользы) своему сайту и его дизайну.
Поделитесь записью в социальных сервисах!

13 комментариев

    Уважаемый, автор!
    Оказываете ли Вы услуги по чистке HTML кода?

          Нет, к сожалению с вордпресом будет дольше. А времени нет…

    Грамотный сайт, дружище! tongue Посещаемость? Если не секрет.

        Где почитать релевантную инфу по чистке HTML кода на Вордпресс или возможно курс у кого-нибудь есть?
        Подскажи пж.

          Для этого не нужны курсы. Достаточно знаний в HTML и CSS и хороший запас времени и нервов.

    Уважаемый автор, прочитала вашу статью, но не все до конца поняла.
    У меня такая проблема – в CSS не помещаются нужные мне стили, так как их слишком много, а их надо добавить для блока меню сайта и для табов.
    Насколько я поняла, мне нужно сохранить данные стили в файл CSS (с этим проблем не возникло), а вот дальше что делать? Какой код и куда нужно мне вставить, чтобы все работало?

    Да, все правильно. Нужно создать простой текстовый файл. В него скопировать все стили. Затем сохранить этот файл “name.css”. Потом залить его через файловый менеджер (куда угодно, обычно его заливают в папку css). И теперь осталось подключить этот файл на страницах сайта. Для этого в коде всех страниц имеющих структуру (обратите внимание что вид материалов такую структуру не имеет) нужно вставить следующий код в блок HEAD:
    
    Код (только путь к файлу css укажите свой)

    Если будет конфликт файлов стилей – удалите из HEAD код подключающий стандартные стили uCoz. Обычно он выглядит типа так:
    Код

    Большое спасибо за ответ. Теперь все стало ясно, как и что делать.
    Скажите, а код 
    Код из HEAD надо тоже со всех-всех страниц удалять?

      Этот код подключает стандартную таблицу стилей uCoz, которую вы редактируете в админке (в “Управлении дизайном”). Если вы подключили свой файл CSS (как я писал выше), то потребность в стандартном файле отпадает – можете его удалять со страниц. Теперь для редактирования стилей вам не нужно заходить в “Панель управления” – “Управление дизайном” – “Таблица стилей (CSS)”, теперь все ваши стили в новом файле, который удобно редактировать прямо в файловом менеджере.

Добавить комментарий для akula-z Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *