Как проверить страницу сайта на ошибки

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

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

Предупреждение: статья не претендует на академическую полноту, но точно поможет что-нибудь не упустить.

Всё посмотреть и прокликать

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

Что проверять:

• Элементы страницы расположены как на макете на всех устройствах.
• Сайт одинаково выглядит и работает во всех нужных браузерах.
• Кнопки нажимаются и после этого что-то происходит, слайдеры крутятся, гамбургеры раскрываются.
• Все JavaScript-скрипты работают корректно.
• Отображается правильный контент.
• Отдаются нужные заголовки.
• Загружаются правильные шрифты.
• Фавиконка установлена.
• Текст отображается не кракозябрами (в 2020 такое редко, но бывает).
• Курсор интерактивный на интерактивных элементах и обычный на обычных.
• С локализацией всё в порядке (русская, английская версия).
• Страница не разъезжается, если включить блокировщик рекламы.

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

Инструменты:

• Реальные браузеры и устройства.
• Эмуляторы (BrowserStack, LambdaTest, Browsera, BrowserShots).

Ошибки JavaScript

Если в коде есть ошибки, их будет видно в консоли разработчика. Также там можно обратить внимание на запросы (время и коды ответов) и посмотреть размер загружаемых файлов. И если размер большой, обсудить с разработчиками оптимизацию кода на JavaScript, шрифтов и изображений.

Валидность кода

Нужно убедиться, что код удовлетворяет стандартам HTML/CSS, для этого есть специальные валидаторы. Узнайте, как проверить валидность HTML.

Веб-формы

Формы — кладезь пользовательских данных и одновременно потенциальный источник уязвимостей. Формы должны быть удобными для пользователя и безопасными для сайта.

Что проверять:

• Обязательные поля подписаны.
• Если данные должны быть записаны в базу, проверяем это.
• Выводятся понятные сообщения об ошибках заполнения.
• Проверяем экранирование символов в формах на уровне клиента и сервера.
• Приходят подтверждающие письма (если так задумано).

Неправильные ссылки

Проверьте, что все ссылки ведут на настоящие сайты и не ведут на 404. Для этого тоже есть несколько инструментов. На главной не должно быть ссылки на главную.

Локализация

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

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

Производительность сайта

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

Что проверять

• Как быстро браузер отобразит страницу?
• Сколько времени занимает доставка ответа от сервера к пользователю?
• Все ли ресурсы загружаются?

Иногда скорость загрузки зависит от контента, который используется на странице. Вот советы, как его оптимизировать.

• Использовать сжатие контента. Например, выбирать подходящие форматы графики и шрифтов.
• Включить серверное и клиентское кэширование
• Избавиться от неиспользуемых данных, которые подгружаются подзапросом. Например в приложении 10 библиотек JS, а используется только одна.
• Правильно настроить файлы Cookie
• Хранить статические данные на отдельном CDN-сервере.

Критерии качества

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

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

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

Чтобы сделать выводы об авторитете бренда и его экспертизе, поисковые системы «‎смотрят» на множество факторов, в том числе:

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

Конкуренция в поисковой выдаче возрастает. В начале выдачи находится реклама сервисов, которые настроили рекламу в Google Ads или Яндекс Директе. Основные позиции в органической выдаче занимают колдунщики — система Яндекс, которая параллельно ищет ответ на вопрос пользователя в своих сервисах.

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

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

Задача SEO-аудита №1: повысить позиции в сравнении с конкурентами

Посмотрите общие показатели и ссылочный профиль — комплекс всех ссылок на сайт вашей компании и конкурентов. Узнать, как обстоят дела у конкурентов, можно на платных и бесплатных сервисах: Ahrefs, Majestic, Serpstat, Netpeak Checker, Semrush.

Определите видимость конкурентов в поисковых системах. Видимость рассчитывается в процентах запросов, попавших в топ-10, от общего числа запросов. Данные о конкурентах возьмите из сервисов сбора статистики Топвизор или Allpositions.

Проверьте базовые данные:

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

2. ИКС, индекс качества сайта, показывает доверие со стороны пользователей и «вес» сайта. Чем больше этот показатель, тем выше сайт в поисковой выдаче. Посмотрите ИКС на pr-cy.ru.

3. Количество проиндексированных в Яндекс и Google страниц. Этот показатель обозначает число страниц, на которые потенциально могут прийти пользователи из поиска. Показатели в разных поисковиках должны приблизительно совпадать. Если это не так, и сайт не на поддоменах, то у него проблемы с индексированием. Проверить это можно также на pr-cy.ru.

4. Количество посетителей в месяц. Проверьте эту информацию на pr-cy.ru.

5. Естественные ссылки — насколько ссылочный профиль сайта похож на естественный. Большое количество некачественных и неестественных ссылок может грозить сайту санкциями. Посмотрите на pr-cy.ru.

6. Видимость в топе. Проверьте, по каким ключевым словам конкуренты продвигаются в выдаче — эту информацию можно найти на seranking.ru.

Проанализируйте поведенческие факторы и источники трафика. Поведенческие факторы — один из критериев качества сайта, который говорит о вовлечённости пользователей. Для анализа воспользуйтесь сервисом Similarweb. Параметры, которые нужно проверить:

• Country Rank, Category Rank — рейтинг в стране и по категории. Внутренний параметр, который сравнивает все домены;
• Monthly Visits — визиты в месяц;
• Visit Duration — время просмотра;
• Pages / Visit — глубина просмотра;
• Bounce Rate — отказы;
• График посещаемости — показывает динамику развития сайта и определяет сезонность.

Затем проверьте, откуда и сколько пользователей приходит. Это нужно, чтобы понять, какой канал проседает по объёму привлекаемого трафика на сайт.

Проверьте скорости загрузки страниц. Высокая скорость загрузки — один из главных признаков качественного сайта. Проверьте этот параметр на PageSpeed Insights.

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

Проверьте ссылочный профиль. Для этого используйте xtool или CheckTrust:

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

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

Чек-лист анализа функций сайтов конкурентов:

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

Задача SEO-аудита №2: провести технический аудит

Аудит технической оптимизации — это поиск ошибок, отрицательно влияющих на индексацию сайта в поисковых системах. Быстрее в топ-10 Google или Яндекса попадают технически корректные сайты. Ошибки в коде или обилие битых ссылок сведут к нулю усилия по оптимизации сайта — выстраиванию архитектуры, созданию уникального качественного контента и оптимизации метатегов.

Чек-лист по гигиеническому минимуму аудита:

1. Проверьте индекс качества сайта — ИКС

ИКС показывает, насколько, с точки зрения Яндекса‎, сайт полезен для пользователей. При расчёте ИКС учитываются размер аудитории сайта, степень удовлетворённости пользователей, общее время, которое посетитель провёл на ресурсе. ИКС можно проверить на Яндекс Вебмастере‎.

2. Уточните качество обратных ссылок на сайт

Обратные ссылки — это активные гиперссылки, которые ведут на сайт из другого источника: из соцсетей, сообщений в блогах и страниц других сайтов.

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

Проверьте качество ссылок на ваш сайт через seoreviewtools. Показатель от 60 до 100 — очень хорошо, 30-60 — нормально. Качество обратных ссылок ниже 30 означает, что на ваш сайт ссылаются неавторитетные ресурсы.

3. Посмотрите, как выглядит страница 404

Ошибка 404 на вашем сайте означает, что пользователь зашёл по URL-адресу, страницы для которого не существует. Возможно, когда-то вы создавали страницу, но потом переместили в другой раздел сайта, поменяли её URL или удалили страницу.

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

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

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

Проверьте этот параметр через Яндекс Вебмастер‎ или через вебмастер Google.

4. Определите, как реализован атрибут rel="canonical"

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

Проверьте сайт на наличие проблем с тегами каноничности на SiteChecker.

5. Проверьте скорость загрузки сайта

79% клиентов, столкнувшихся с плохой работой сайта, реже покупают там снова, а задержка загрузки сайта всего на секунду может снизить конверсию на 7%.

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

Идеальное время на загрузку сайта — 0,5 секунд, оптимальное — 2-3 секунды. Для высоконагруженных веб-приложений приемлемая скорость может отличаться.

Оценить скорость можно в бесплатных сервисах, например, в PageSpeed Insights от Google. Инструмент показывает оценку факторов, которые могут влиять на скорость загрузки. Результат проверки измеряется по стобалльной шкале.

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

После сканирования PageSpeed Insights даёт рекомендации, как повысить скорость загрузки страницы.

Получив рекомендации, можно:

• полностью последовать советам инструмента;
• совместить рекомендации PageSpeed Insights и стандартные методы увеличения скорости загрузки, например, сжатие изображений или использование кэширования.

6. Уточните, настроены ли системы аналитики и отслеживаются ли цели

Для контроля эффективности продвижения сайта настройте цели в Google Analytics. Цель — это действие, которое вы считаете целевым для страницы, например, успешная отправка формы заказа, скачивание документа или переход на страницу с контактами.

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

7. Проанализируйте показатели производительности, оптимизации и доступности

С помощью ещё одного бесплатного инструмента Google Web.Dev можно проверить, насколько сайт соответствует стандартам поисковой системы.

Web.Dev проверяет:

1. Индексацию: виден ли сайт в поисковых системах и насколько хорошо.
2. Доступность: есть ли на сайте ошибки и проблемы, из-за которых контент не доступен посетителям.
3. Производительность: как много пользователей могут одновременно находиться на одной странице, выдерживает ли система пиковые нагрузки.
4. Рекомендации Google: следуете ли вы рекомендациям, например, по использованию HTTPS и оптимизации изображений.
5. Работу сайта офлайн: для этого на сайт устанавливается веб-приложение PWA. Оно использует кэшированные во время последней работы данные, чтобы обеспечить доступ к сайту, когда нет подключения к интернету.

Web.Dev оценивает соответствие сайта требованиям поисковой системы по стобалльной шкале и предлагает рекомендации по исправлению недочётов.

8. Проверьте, адаптирован ли ваш сайт под мобильные устройства

Это необходимо, поскольку 50% мирового интернет-трафика приходится на мобильные устройства. К тому же адаптивность сайта — один из факторов ранжирования для поисковых систем.

Корректная мобильная версия:

1. Должна быть удобна в навигации, чтобы пользователи могли легко нажимать на элементы независимо от разрешения устройства.
2. Использует только вертикальную прокрутку, имеет простой поиск и меню перехода на главную страницу.
3. Содержит отдельную карту сайта.
4. Позволяет удобно заполнять формы на сайте.
5. Содержит структурированный текст с подзаголовками, делением на небольшие абзацы, маркированными списками и иллюстрациями.
6. Содержит изображения и видео адаптированных форматов.
7. Имеет разметку телефонного номера <a href="tel:+7*********">8 (495)***-**-**</a>, функцию удобного набора с сайта при клике на номер.

Проверьте в Google на Mobile-Friendly Test, оптимизирован ли сайт под мобильные устройства.

Задача SEO-аудита №3: провести аудит коммерческих факторов

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

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

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

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

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

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

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

Раздел с оплатой должен быть заметным, содержать несколько способов заплатить за товар и давать пояснения, как каждым из них воспользоваться.

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

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

Сертификаты и лицензии, если они есть, следует выложить на сайт. Они подтверждают высокое качество работы и профессионализм специалистов.

Задача SEO-аудита №4: аудит контента

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

Инструменты по анализу видимости помогут:

1. Сравнить видимость своего сайта и сайтов конкурентов по определённым ключевым словам. Так вы оцените своё положение и сможете скорректировать стратегию SEO-продвижения.

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

3. Изучить детальную аналитику по позициям своего сайта и оценить результат продвижения.

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

Поисковики не любят неуникальный контент, в том числе текст, фото- и видеоматериалы. Google, например, сообщает, что полностью скопированное содержимое другого сайта не представляет для пользователей ценности. Если вы цитируете кого-то, указывайте ссылку на автора.

Уникальность текста можно проверить на онлайн-сервисах, например, Antiplagius, Адвего, Content-Watch.ru и Text.ru. Они разбивают текст на группы слов — шинглы. Знаки препинания, предлоги, междометия и пробелы при этом не учитываются. Группы слов в виде поисковых запросов автоматически отсылаются в поисковики, а те ищут похожие комбинации в архивах сайтов. Затем сервисы выделяют неоригинальные блоки текста другим цветом. Проверка длится несколько минут.

Уникальность текста измеряется соотношением заимствованного и авторского текста: 95%-100% — очень высокий уровень уникальности; 90%-95% — высокий; 80%-90% — средний; меньше 79% — низкий уровень уникальности.

SEO-аудит Roistat

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

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

Использование сервиса «SEO-аудит» экономит время компании: не нужно вручную добавлять страницы и запускать аудит.

Уведомления о новых материалах Roistat, кейсах, бесплатных вебинарах можно получать на нашем Telegram-канале.

Сайт обновился, если сайт отображается некорректно, обновите кэш браузера CTRL+F5 или SHIFT+F5 или напишите нам об ошибке на studio@webboss.pro

Разберем, насколько критическими для работы сайта и его продвижения могут быть ошибки в HTML-коде, и зачем нужны общие стандарты верстки.

Что такое валидность кода

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

Для этого есть специальные стандарты: если им следовать, страницу будут корректно распознавать все браузеры и гаджеты. Такой стандарт разработал Консорциумом всемирной паутины — W3C (The World Wide Web Consortium). HTML-код, который ему соответствует, называют валидным.

Валидность также касается файлов стилей — CSS. Если в CSS есть ошибки, визуальное отображение элементов может нарушиться.

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

Чем ошибки в HTML грозят сайту

Типичные ошибки кода — незакрытые или дублированные элементы, неправильные атрибуты или их отсутствие, отсутствие кодировки UTF-8 или указания типа документа.

Какие проблемы могут возникнуть из-за ошибок в HTML-коде

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

Как валидность кода влияет на SEO

Валидность не является фактором ранжирования в Яндекс или Google, так что напрямую она не влияет на позиции сайта в выдаче поисковых систем. Но она влияет на мобилопригодность сайта и на то, как поисковые боты воспринимают разметку, а от этого косвенно могут пострадать позиции или трафик.

Почитать по теме:
Главное о микроразметке: подборка знаний для веб-мастеров

Представитель Google Джон Мюллер говорил о валидности кода:

«Мы упомянули использование правильного HTML. Является ли фактором ранжирования валидность HTML стандарту W3C?

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

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

Итак, критические ошибки в HTML мешают

• сканированию сайта поисковыми ботами;
• определению структурированной разметки на странице;
• рендерингу на мобильных устройствах и кроссбраузерности.

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

Как проверить код на валидность

Не нужно вычитывать код и считать символы — для этого есть сервисы и инструменты проверки валидности HTML онлайн.

Что они проверяют:

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

  .

• DTD (Document Type Definition)
  Соответствие кода указанному DTD, правильность названий тегов, вложенности, атрибутов. Наличие пользовательских тегов и атрибутов — то, чего нет в DTD, но есть в коде.

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

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

Почитать по теме:
Уменьшить вес сайта с помощью gzip, brotli, минификации и других способов

Поэтому анализируйте предложения сервисов по исправлениям и ориентируйтесь на здравый смысл.

Перед исправлением ошибок не забудьте сделать резервное копирование. Если вы исправите код, но что-то пойдет не так и он перестанет отображаться, как должен, вы сможете откатить все назад.

HTML и CSS валидаторы — онлайн-сервисы для проверки кода

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

Валидатор от W3C

Англоязычный сервис, онлайн проверяет соответствие HTML стандартам: можно проверить код по URL, залить файл или вставить код в окошко.

Инструмент покажет список ошибок и предупреждений с пояснениями — описанием ошибки и ее типом, а также укажет номер строки, в которой нужно что-то исправить. Цветом отмечены типы предупреждений и строчки с кодом.

Валидатор CSS от W3C

Инструмент от W3C для проверки CSS, есть русский язык. Работает по такому же принципу, анализирует стили на предмет ошибок и предупреждений. Первым идет блок ошибок, предупреждения собраны ниже отдельно.

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

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