Оптимизация HTML кода сайта — чистка, сжатие, исправление ошибок

Прослушать эту статью

Техническая оптимизация HTML кода сайта —  процесс корректировки HTML кода шаблона страниц сайта. Изменение (ред.)  исходного кода сайта и коррекция его структуры и размера. Явной целью которого, является качественное улучшение состава кода. Значительное уменьшение его объема,  улучшение валидности кода. Что способствует увеличению  скорости загрузки страницы в браузерах.

HTML является основой Интернета. Это тип документа, который строит основную структуру веб-сайта. Без HTML JavaScript не смог бы работать, CSS не смог бы ничего стилизовать, а изображениям было бы некуда загружаться. Сила HTML заключается в его универсальности, главным образом потому, что он может загружать другие файлы, что и означает гипертекст , первая часть HTML.

Когда для загрузки, анализа и загрузки внешних файлов HTML требуется много времени, может пострадать пользовательский интерфейс. Время загрузки страницы (Page Onload) увеличивается, чем больше пользователей склонны отказываться от страницы, тем дольше им приходится ждать.

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

• Техническая оптимизация HTML кода страниц сайта
• Оптимизация исходного HTML кода сайта уменьшение объема кода
• Удаление ненужных HTML тегов и стилевых файлов
• Исправление ошибок в HTML коде сайта
• Задайте приоритет мобильной версии сайта
• Активно используйте веб-кеширование
• CDN — высокие возможности нашего времени
• Сократите HTTP — запросы
• Оптимизация HTML кода вашего сайта для SEO
• Техническая оптимизация HTML кода сайта — популярные плагины CMS WordPress

Техническая оптимизация HTML кода страниц сайта

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

Конечным результатом оптимизации HTML кода сайта станет:

• Мгновенная загрузка страниц сайта в популярных браузерах.
• Быстрый обход контента сайта поисковыми ботами.
• Чистый валидный код — наиболее приоритетный сайт в глазах поисковых систем.
• В значительной степени увеличится ранжирование и видимость сайта в выдаче поисковых систем Google и  Yandex.

Оптимизация исходного HTML кода сайта — уменьшение объема кода

Самым важным действием, является уменьшение кода страницы. Исходник кода HTML выглядит как длинное полотно. Множество различных CSS стилей расположены в разных местах структуры кода. Код имеет ненужные комментарии, знаки, пробелы и теги.

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

Чистка ненужных знаков, лишних (дубль) пробелов и переносов строк. Позволит Вам, кардинально уменьшить конечную структуру кода сайта. Таким образом основной вес страницы может сократиться в 2,5 – 3 раза.

В следствии: сжатия пробелов и объединения переносов строк, структура кода html будет значительно уплотненной.

Пример небольшого отрезка оптимизированного года:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm- title-hidden a:hover.

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

Удаление ненужных HTML тегов и стилевых файлов

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

К примеру: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

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

Чтобы ускорить загрузку страниц сайта:

1. Нужно вынести во внешние файлы стили CSS и скрипты JS;
2. Оформить основные элементы дизайна сайта в спрайты, далее вынести их в стилевые таблицы;
3. Код страницы  должен быть простым и читабельным.

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

Поисковики (не очень охотно) реагируют на сайты в коде которых есть ошибки. Тем не менее, многие популярные TRUST — ресурсы, даже с такими ошибками четко закрепляются в ТОП выдаче. Даже главная страница популярного Yandex проверена с помощью validator.w3.org, превосходит по ошибкам даже мой сайт.

Имеет следующий перечень ошибок валидности:

Warning: Content-Security-Policy HTTP header: Bad content security policy: Source list contains duplicate source expression "https://passport.yandex.ru". All but the first instance will be ignored.


https://yandex.ru/

Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)


From line 33, column 17689; to line 33, column 17695

дков</div><style.docum>

Error: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)


From line 33, column 18219; to line 33, column 18260

pe_close">div class="desk-notif-card__action-icon"></div>

Это минимальный набор ошибок, которые имеет главная страница поисковой системы Яндекс (всего их примерно 47).

А так выглядит проверка validator.w3.org моего сайта:

Error: A script element with a src attribute must not have a type attribute whose value is anything other than the empty string, a JavaScript MIME type, or module.


From line 6, column 1; to line 6, column 192

/script>↩<script src="https://yandex.ru/ads/system/context.js" async type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"></scri

Warning: The type attribute for the style element is not needed and should be omitted.


From line 11, column 3; to line 11, column 25

" />↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Как видите не мало))) — всего 21 уведомление об ошибках и предупреждениях. Есть над чем поработать.

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

Задайте приоритет мобильной версии сайта

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

Активно используйте веб-кеширование

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

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

CDN — высокие возможности нашего времени

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

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

Сократите HTTP – запросы

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

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

Оптимизация HTML кода вашего сайта для SEO

Оптимизация HTML кода оказывает благотворное влияние на большинство показателей сайта в целом. Благодаря чистой оптимизированной структуре, значительно улучшается скорость индексации и загрузки сайта. В глазах поисковых систем сайт становится более качественным, а значит и более видимым в поисковой выдаче.
Поисковые системы используют исходный код, чтобы выяснить, о чем ваш сайт. Любой контент на веб-странице должен быть закодирован в HTML, чтобы поисковые системы могли его понять. Компоненты SEO в исходном коде включают в себя тег заголовка, метаописание, тег заголовка H1, внутренние ссылки, анкорные тексты, ссылки nofollow, альтернативные теги изображения и канонические теги. Чтобы просмотреть исходный код, откройте веб-страницу и нажмите «Ctrl + U». Вот несколько шагов, которые вы можете выполнить, чтобы оптимизировать исходный код вашего веб-сайта.

Оптимизация тега заголовка

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

• Убедитесь, что все ваши веб-страницы имеют уникальные теги заголовков, которые идеально описывают страницы.
• Следуйте оптимальной длине тегов заголовков, чтобы они не обрезались в результатах поиска. 50-60 символов работают достаточно хорошо.
• Убедитесь, что вы не используете ключевые слова в заголовках. Вместо этого добавьте одно или два значимых ключевых слова.

Уникальные мета-описания

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

• Избегайте длинных описаний. Идеальной длиной является описание, содержащее от 130 до 156 символов.
• Используйте релевантные ключевые слова в описании.
• Если возможно, включите призыв к действию.

Работа со структурированными данными

Цель структурированных данных — добавить больше деталей в ваш сниппет, чтобы сделать его расширенным сниппетом в результатах поиска. Код должен быть правильно размечен, чтобы увеличить ваши шансы на более высокий рейтинг. Schema.org является наиболее популярным, когда речь идет о формах структурированных данных для поисковых систем.

• Использование «объема элемента» в теге div позволяет поисковым системам понять, что вся информация, представленная в одном разделе, относится к одной и той же теме.
• Термин «тип элемента» определяет тему каждого раздела.
• «item prop» сообщает дополнительную информацию о разделе

Тег H1

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

• В идеале должно содержать от 20 до 70 символов.
• Следует учитывать намерение пользователя
• Включите основное ключевое слово, предпочтительно ключевые слова с длинным хвостом, чтобы повысить эффективность поиска и веб-трафик.

Вы также можете добавить подзаголовки, начиная с H2 до H6. Чтобы улучшить читаемость, убедитесь, что текст, следующий за подзаголовком, не слишком длинный, предпочтительно от 250 до 300 слов.

Альтернативный текст для изображений

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

• Убедитесь, что описание короткое и конкретное.
• Используйте ключевые слова, но не набивайте их
• Отмечайте изображения, связанные с вашим брендом, а не изображения, используемые в декоративных целях.

Канонический URL-тег

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

Добавление этих тегов к каждому варианту страницы поможет поисковым системам распознать главную/исходную страницу из группы страниц с похожими URL-адресами.

Основные выводы

• Стремитесь к тому, чтобы все было просто и эффективно. Веб-сайт не должен быть заполнен слишком большим количеством причудливых элементов. Он просто должен быть актуальным и эффективным для видения вашего бренда и ваших клиентов. Вы можете добиться этого, просто сосредоточившись на необходимых веб-функциях.
• Изучите стратегии оптимизации для различных веб-элементов. Для разных веб-элементов потребуются разные стратегии оптимизации. Убедитесь, что вы включили эти изменения во все элементы, чтобы функции вашего веб-сайта работали эффективно.

Техническая оптимизация HTML кода сайта — популярные плагины CMS WordPress

Давайте кратко посмотрим пару плагинов WordPress. Которые помогут Вам в чистке и сжатии кода HTML на CMS WordPress. Благодаря этим плагинам можно кардинально увеличить скорость сайта, а также вычистить все лишнее из кода сайта.

Плагин Autoptimize:

• Оптимизация и сжатие HTML кода сайта (удаление пробелов и комментариев).
• Оптимизация CSS и JS – позволяет объединять стили в один файл и размещать в footer сайта, как собственно и скрипты js.
• Имеет дополнительные опции оптимизации.

Плагин Clearfy:

• Объединяет в себе функционал множества плагинов и состоит из модулей которые можно отключать.
• Отлично увеличивает показатели скорости сайта.
• Отключает некоторые скрипты и  ненужные функции в WordPress.
• Имеет не малый  ассортимент инструментов для работы с  HTML кодом, CSS и JS файлами вашей CMS.

Сочетая эти плагины, Вы достигнете  превосходной оптимизации сайта на WordPress. Обязательно используйте их, я уверен они будут вам очень полезны.

С этой статьей читают:

• Htaccess файл — как создать файл .htaccess инструкция для новичков
• Gzip сжатие js / css / html ускорение сайта — как включить в .htaccess

Спасибо, что читаешь: SEO HELPER | NICOLA.TOP