Важность проверки валидности кода для вашего онлайн-бизнеса

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

Сразу разграничу. Разбор того, как работает валидатор, какие бывают типы сообщений и какими инструментами прогонять страницы, — отдельная тема, и она подробно разобрана в материале про проверку на валидность HTML сайта. Здесь речь о другом: о деньгах, рисках и о том, какие требования владельцу бизнеса имеет смысл предъявлять к сайту и к тем, кто его делает.

Как сломанная разметка превращается в потерянный заказ

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

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

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

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

Почему у вас всё работает, а у клиента нет

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

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

Ситуацию усугубляют три вещи, которых нет на компьютере владельца:

• Старые версии браузеров. Часть аудитории не обновляется годами — корпоративные компьютеры, недорогие телефоны, планшеты.
• Блокировщики рекламы и расширения. Они вмешиваются в документ и на кривой разметке ломают больше, чем на чистой.
• Медленное соединение. При частичной загрузке браузер разбирает документ по кускам, и ошибки вложенности проявляются заметнее.

Отсюда практический вывод для владельца: отсутствие жалоб не означает отсутствия проблемы. Человек, у которого не сработала кнопка, не пишет в поддержку — он закрывает вкладку. Жалуются единицы, и обычно те, кому очень нужно именно у вас.

Мобильные устройства: где теряется больше всего

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

Если нужны детали, смотрите «Трафик на сайте — важность для бизнеса».

Проявление на телефоне	Что за этим стоит в коде	Как это бьёт по деньгам
Страница ездит вбок	Элемент шире экрана: таблица, картинка, блок с фиксированной шириной	Часть кнопок и текста уезжает за границу экрана
Кнопка нажимается через раз	Ссылка вложена в ссылку или перекрыта соседним блоком	Клиент считает, что сайт не работает
Форму невозможно заполнить	Поля вне контейнера формы, нет привязки подписей к полям	Заявка не отправляется
Клавиатура закрывает кнопку отправки	Фиксированное позиционирование блока с кнопкой	Заполненная форма остаётся неотправленной
Текст мельчает или не переносится	Отсутствие или неверный мета-тег области просмотра	Страницу не читают вовсе

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

Формы, корзина и оплата: три места с наибольшей ценой ошибки

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

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

Форма. Самая частая ошибка — поля, расположенные вне контейнера формы, или несколько вложенных друг в друга форм. Браузер восстанавливает такую конструкцию по своим правилам, и часть полей перестаёт передаваться. Внешне всё в порядке: человек заполнил, нажал, увидел «спасибо». А в почте пришла заявка без телефона. Вторая частая ошибка — подписи к полям, не связанные с самими полями: подпись перестаёт быть кликабельной, а на телефоне это заметно усложняет попадание пальцем.

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

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

Чем поисковое продвижение отличается от рекламы по сути:

14:31

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

Как перевести проблему в деньги

Разговор с разработчиком меняется, когда вместо «поправьте вёрстку» появляется расчёт. Считается он просто, без специальных инструментов.

Подробнее об этом — в статье «Карточка Яндекс.Бизнеса съела 70% трафика вашего сайта: как вернуть клиентов обратно к себе».

1. Возьмите число визитов на проблемный шаблон за месяц — это данные Метрики по группе страниц.
2. Оцените долю аудитории, у которой проблема проявляется: браузер, устройство, версия. Данные о браузерах и устройствах есть в тех же отчётах.
3. Умножьте визиты на эту долю — получите число людей, которые сталкиваются с поломкой.
4. Умножьте на обычную для вашего сайта конверсию в заказ — получите число потерянных сделок.
5. Умножьте на средний чек и на вашу маржу — получите потерю в деньгах за месяц.

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

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

Аудитория, которую вы не видите

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

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

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

• Заголовки идут по уровням без пропусков — по ним строится навигация читалки.
• У каждого поля формы есть связанная подпись, иначе поле объявляется безымянным.
• У изображений, несущих смысл, есть текстовое описание.
• Кнопка сделана кнопкой, а не картинкой с обработчиком нажатия.
• По странице можно пройти клавишей Tab в логичном порядке и добраться до всех элементов управления.

Что происходит с рекламным бюджетом

Если нужна помощь по теме — доработка сайта.

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

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

Тему разбирал отдельно: «РСЯ vs Поиск: в чём разница, как настроить и что выбрать для вашего бизнеса».

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

Как владельцу проверить сайт, ничего не понимая в коде

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

1. Другой браузер. Установите два браузера, которыми не пользуетесь, и пройдите путь до оплаты в каждом.
2. Чужой телефон. Возьмите устройство постарше и подешевле вашего — там всё проявляется ярче.
3. Режим инкогнито. Так вы увидите сайт как новый посетитель, без сохранённых данных и прогретого кэша.
4. Полный сценарий, а не главная страница. Каталог, фильтр, карточка, корзина, изменение количества, оформление, оплата тестовым способом.
5. Неправильное поведение. Оставьте поле пустым, введите телефон в другом формате, вернитесь кнопкой «назад», обновите страницу в середине оформления.
6. Увеличенный шрифт. Поставьте масштаб 150% и посмотрите, что разъехалось.

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

Что зафиксировать на приёмке сайта

Дешевле всего проблема решается до того, как сайт запущен. Условия, которые имеет смысл прописать при заказе разработки или редизайна:

Условие приёмки	Как проверить без разработчика
Шаблоны проходят проверку разметки без критических ошибок	Запросить отчёт по одному представителю каждого шаблона
Корректная работа в актуальных версиях распространённых браузеров	Пройти сценарий покупки в каждом
Отсутствие горизонтальной прокрутки на телефоне	Открыть основные страницы на смартфоне
Формы отправляют все заполненные поля	Отправить тестовую заявку и сверить содержимое письма
Микроразметка товаров и организации без ошибок	Прогнать через инструменты проверки разметки поисковых систем
Гарантийный период на исправление найденного	Пункт договора, а не устная договорённость

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

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

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

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

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

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

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

Коротко

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

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