Оптимизация html кода: инструкция

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

В SEO с 2005 года, и за это время требования к разметке сменились дважды. Сначала имело значение всё подряд — от порядка тегов до расстояния ключевого слова от начала документа. Потом маятник качнулся в другую сторону, и появилось убеждение, что поиску вообще безразлично, как страница устроена внутри. Правда посередине и вполне конкретна: часть разметки читается роботом буквально и влияет на то, как страница попадёт в выдачу, часть влияет на отрисовку, а всё остальное — вопрос гигиены проекта. Ниже — что относится к какой категории и в каком порядке за это браться.

Зачем вообще трогать разметку

Первое, что стоит сделать, — отделить реальные эффекты от мифов, иначе работа превращается в бесконечное вылизывание без результата. У чистой разметки есть четыре следствия, и ни одно из них не звучит как «сайт выйдет в топ».

• Робот правильно понимает структуру. Заголовки, списки и смысловые контейнеры задают иерархию документа. По ним поиск определяет, о чём страница и какая её часть основная, а какая служебная.
• Страница отрисовывается предсказуемо. Валидная разметка одинаково достраивается в любом браузере. Кривая — достраивается по-разному, и вёрстка расходится там, где никто этого не ждал.
• Документ весит меньше. Меньше байтов — меньше данных передаётся и разбирается браузером. Это не главный рычаг, но и не ноль, особенно на мобильной сети.
• Сайт можно поддерживать. Разметка, в которой видно смысл блоков, правится за минуты. Разметка из вложенных друг в друга безымянных контейнеров правится за часы, и каждая правка ломает что-то ещё.

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

Замер: с чего начинать работу

Прежде чем что-то менять, нужны цифры, иначе результат будет невозможно доказать. Замеряется это без специальных инструментов.

1. Откройте страницу и сохраните исходный код документа в файл. Посмотрите размер файла в килобайтах.
2. Скопируйте видимый текст страницы в текстовый редактор и посмотрите количество знаков.
3. Разделите первое на второе. Получится грубое соотношение «разметка к содержанию».
4. Посчитайте в исходном коде число открывающих контейнеров и число строчных стилей, прописанных прямо в атрибутах.
5. Прогоните страницу через валидатор разметки и запишите количество ошибок по типам.
6. Повторите на трёх типах страниц: главная, страница услуги или карточка товара, статья блога.

Дальше эти цифры становятся ориентиром. По моему опыту разбора сайтов малого бизнеса, документ шаблонной страницы весом до сорока-пятидесяти килобайт — нормально, сто пятьдесят и выше — повод разбираться, откуда взялся объём. Обычно ответ один и тот же: конструктор страниц, который заворачивает каждый абзац в пять вложенных контейнеров с уникальными идентификаторами.

Смысловые теги вместо безымянных контейнеров

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

Что за блок	Как часто делают	Как правильно	Что это даёт
Шапка сайта	Контейнер с классом header	Тег header	Робот отделяет служебную часть от основной
Главное меню	Контейнер со списком внутри	Тег nav со списком ссылок	Навигация распознаётся как навигация
Основное содержание	Контейнер с классом content	Тег main, внутри article	Ясно, где текст страницы, а где обвязка
Раздел статьи	Череда абзацев с отступами	Тег section с заголовком внутри	Появляется иерархия вместо плоского потока
Кнопка	Контейнер с обработчиком нажатия	Тег button или ссылка	Работает с клавиатуры и в любом браузере
Подпись к картинке	Абзац мелким шрифтом под картинкой	Теги figure и figcaption	Связь подписи с изображением явная
Цитата	Абзац курсивом	Тег blockquote	Цитата не путается с авторским текстом
Дата публикации	Текст «12 марта»	Тег time с машинным атрибутом даты	Дата читается однозначно

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

Тему разбирал отдельно: «Поисковая оптимизация интернет-сайтов».

Заголовки: единственная часть разметки, где ошибка стоит трафика

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

• Один заголовок первого уровня на страницу. Это название документа. Два таких заголовка — это два заявления о теме страницы, и поиск получает противоречивый сигнал.
• Заголовок первого уровня не равен названию сайта. Если на всех страницах в нём стоит имя компании, страницы становятся неразличимы по теме.
• Уровни не пропускаются. После первого идёт второй, после второго третий. Прыжок с первого на четвёртый ломает иерархию.
• Заголовками не оформляют оформление. Крупный текст в подвале, слоган на баннере, надпись на кнопке — это не заголовки, даже если хочется сделать их крупными. Размер задаётся стилями.
• Заголовок описывает то, что под ним. Раздел «Наши преимущества» с текстом про доставку — это заголовок «Доставка».
• В заголовке нет ссылки на другую страницу. Исключение — списки анонсов, где заголовок карточки ведёт на материал.

Помогу с продвижением: продвижение сайта в Яндексе — вывожу сайты в топ Яндекса белыми методами.

Проверяется всё это за минуту: в инструментах разработчика есть режим просмотра структуры документа, а в любом расширении для аудита выводится дерево заголовков. Если дерево читается как оглавление и по нему понятно, о чём страница, — работа сделана. Если в дереве восемь заголовков второго уровня подряд с текстом «Услуги», «Услуги», «Заказать» — исправлять.

Если интересно направление с сайтами — базу даю в своём курсе:

8:14

Что реально утяжеляет документ

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

Источник объёма	Откуда берётся	Что делать
Вложенные контейнеры конструктора	Визуальные редакторы страниц оборачивают каждый элемент	Верстать шаблон типовых страниц руками, конструктор оставить для посадочных
Стили прямо в атрибутах элементов	Тот же конструктор либо правка «на живую»	Вынести в файл стилей, оставив в атрибутах только то, что действительно уникально
Изображения, вставленные прямо в код	Кодирование картинок в текст ради экономии запросов	Оставить так только крохотные иконки, остальное — отдельными файлами
Скрытые блоки для мобильной версии	Дублирование меню и шапки под разные экраны	Одна разметка, поведение задаётся стилями
Комментарии в коде и мусор плагинов	Отладочные вставки, следы удалённых модулей	Вычищать при сборке, а не руками
Разметка данных, продублированная трижды	Тема, плагин и настройка вручную ставят своё	Оставить один источник, проверить валидатором структурированных данных
Пробелы и переносы строк	Форматирование исходников	Минификация при отдаче — самый последний по значимости пункт

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

Смежный материал по теме — «Оптимизация сайта под мобильные устройства».

Атрибуты, которые читает поиск

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

• Альтернативный текст изображений. Описывает, что на картинке, обычными словами. Пустой атрибут допустим для декоративных элементов, отсутствующий — нет. Перечисление ключевых слов вместо описания — вред, а не польза.
• Указание канонического адреса. Одна страница — один канонический адрес, ведущий на саму себя или на основную версию. Две таких записи на странице обесценивают обе.
• Атрибут языка документа. Задаётся в корневом теге. По нему определяется язык страницы и правила переноса слов.
• Атрибут области просмотра. Без него мобильный браузер показывает страницу как настольную и уменьшает её. Это одна строка, и её отсутствие сразу лишает сайт мобильной пригодности.
• Атрибуты ссылок. Пометка внешних и партнёрских ссылок, закрытие служебных переходов от передачи веса.
• Атрибут заголовка страницы и описание. Формально это метаданные, но лежат они в той же разметке. Дубли заголовков по сайту — самая частая находка при разборе.
• Отложенная загрузка изображений. Атрибут отложенной загрузки для картинок ниже первого экрана. На картинке первого экрана его ставить не нужно — она нужна сразу.

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

Разметка данных: что и когда добавлять

Структурированные данные — это не украшение, а способ прямо сообщить поиску факты о странице в машинном виде. Речь идёт о разметке организации, товара, статьи, хлебных крошек, часто задаваемых вопросов. Отдача проявляется в оформлении сниппета и в том, что данные попадают в сервисы поиска.

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

Если нужна помощь по теме — курсы SEO-оптимизации.

Проверка делается в инструментах валидации структурированных данных у Яндекса и Google. Правильный порядок: сначала убрать ошибки, потом добавлять новые типы разметки. Добавлять разметку поверх сломанной — это ускорять путь к тому, что расширенный вид перестанут показывать вовсе.

Порядок работ: с чего начать и чем закончить

Список задач по разметке можно составить на сто пунктов и не сдвинуться с места. Ниже порядок по соотношению «эффект к трудозатратам», в котором я веду такие работы на проектах.

Если нужны детали, смотрите «Внутренняя SEO оптимизация сайта».

Очередь	Что делаем	Трудоёмкость	Что меняется
1	Чиним иерархию заголовков на шаблонах	Часы	Поиск понимает тему страниц, уходят противоречивые сигналы
2	Убираем ошибки вложенности и дубли идентификаторов	Часы	Вёрстка перестаёт расходиться между браузерами
3	Заполняем альтернативные тексты и правим канонические адреса	Дни на большом сайте	Уходят дубли, картинки начинают участвовать в поиске по изображениям
4	Заменяем безымянные контейнеры смысловыми тегами в шаблоне	Дни	Структура документа становится читаемой, шаблон легче поддерживать
5	Выносим строчные стили в общий файл	Дни	Документ худеет, оформление перестаёт разъезжаться при правках
6	Добавляем и валидируем структурированные данные	Дни	Сниппет оформляется богаче
7	Настраиваем сжатие и минификацию при отдаче	Часы	Небольшой выигрыш в объёме передаваемых данных

Работы с первой по третью строку окупаются почти всегда и почти на любом сайте. Четвёртая и пятая имеют смысл, когда сайт живёт и правится регулярно: они экономят не столько трафик, сколько ваши будущие часы. Шестая нужна там, где сниппет конкурентов уже оформлен богаче вашего. Седьмая ставится один раз на сервере и забывается.

Ошибки, которые делают чаще всего

• Минификация как единственная мера. Сжали пробелы, отчитались об оптимизации, оставили нетронутыми двадцать уровней вложенности.
• Ключевые слова в альтернативных текстах. Перечисление запросов вместо описания картинки — приём двадцатилетней давности, который сейчас работает только против сайта.
• Заголовки ради размера шрифта. Самый распространённый способ сломать иерархию документа, ничего не подозревая.
• Скрытый текст «для роботов». Блок, спрятанный стилями, который якобы усиливает страницу. Это нарушение, за которое санкции накладываются на весь сайт.
• Ручная минификация исходников. Сжатые файлы кладут в репозиторий вместо того, чтобы сжимать при сборке. В результате код невозможно править, и любая правка делает страницу хуже.
• Правки в шаблоне темы без дочерней темы. Обновление платформы стирает всё сделанное, и работа выполняется заново.
• Оптимизация одной страницы. Разметка живёт в шаблонах. Починили главную — на остальных тысячах страниц ничего не изменилось.

Частые вопросы

Влияет ли вес разметки на позиции? Напрямую — нет. Косвенно влияет через время отрисовки и через то, насколько уверенно робот определяет основное содержимое страницы. Разница между сорока и ста пятьюдесятью килобайтами документа заметна на медленной мобильной связи, разница между сорока и тридцатью восемью — нет.

Обязательно ли добиваться нуля ошибок в валидаторе? Нет, и в реальности это почти недостижимо. Важны три типа: незакрытые блочные теги, повторяющиеся идентификаторы элементов и блочные элементы внутри строчных. Устаревшие атрибуты и мелкие замечания можно оставить.

У меня сайт на конструкторе, разметку не поменять. Что делать? Часть работ доступна и там: иерархия заголовков, альтернативные тексты, заголовки и описания страниц, отключение неиспользуемых блоков и виджетов. Глубокая перевёрстка шаблона — нет. Если разметка конструктора мешает настолько, что это видно в замерах, вопрос переходит из плоскости оптимизации в плоскость смены платформы.

Нужно ли переходить на новые смысловые теги, если сайт работает? Ради самого перехода — нет. Смысл появляется, когда шаблон и так переделывается: тогда замена контейнеров на смысловые теги ничего не стоит сверху. Переверстывать работающий сайт только ради тегов — трата бюджета без отдачи.

Сколько заголовков второго уровня должно быть на странице? Столько, сколько у страницы смысловых разделов. Для карточки товара это два-три, для развёрнутой статьи — восемь-десять. Числа как нормы не существует, существует требование, чтобы дерево заголовков читалось как оглавление.

Стоит ли убирать из разметки всё, что не видно посетителю? Не всё: часть невидимого нужна — метаданные, структурированные данные, атрибуты доступности. Убирать надо мусор: комментарии, остатки удалённых модулей, отладочные вставки и скрытые дубли блоков, оставшиеся от прошлых версий шаблона.

Коротко

• Начинать нужно с замера: вес документа, соотношение разметки к тексту, число ошибок валидатора на трёх типах страниц.
• Самый большой вклад в объём дают вложенные контейнеры конструктора и строчные стили, а не пробелы; минификация — последний пункт списка, а не первый.
• Иерархия заголовков — единственная часть разметки, где ошибка стоит трафика напрямую: один заголовок первого уровня, без пропуска уровней, без оформления заголовками.
• Смысловые теги вместо безымянных контейнеров дают роботу понятную структуру, а вам — шаблон, который можно править без страха.
• Атрибуты, невидимые на экране, проверяются обходом сайта краулером: пустые альтернативные тексты, дубли заголовков, конфликтующие канонические адреса.
• Структурированные данные добавляются только на то, что реально есть на странице, и только после устранения ошибок в уже имеющейся разметке.

Если непонятно, что именно на вашем сайте стоит править в первую очередь — разметку, структуру под спрос или техническую часть, — приходите на SEO-консультацию: посмотрим шаблоны страниц и данные Вебмастера вместе и составим список работ в порядке окупаемости.