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

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

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

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

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

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

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

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

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

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

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

Ошибки JavaScript

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

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

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

Веб-формы

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

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

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

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

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

Локализация

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

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

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

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

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

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

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

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

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

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

Не лайтхаусом единым: как проверить свой сайт со всех сторон

Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.

На что мы будем обращать внимание?

Разбивка на категории может быть у каждого своя, мы возьмём следующую:

• Производительность, об неё уже достаточно сломано копий
• Доступность, идущая следом по важности
• Чистота и качество кода
• Сетевые проверки
• SEO и остальное

Доступность

Главная головная боль разработчика после скорости загрузки — обеспечить пользователям всех групп удобное взаимодействие с сайтом. Всё просто, достаточно следовать WCAG (Web Content Accessibility Guidelines), расставлять альтернативный текст для картинок, форм и иконок, следить за читаемостью страницы со скринридера, соблюдением i18n и кучи других вещей из стандартов w3, которые невозможно удержать в голове, но важно не забывать в вебе.

Web Accessibility Evaluation Tool

WAVE это комплексный инструмент, показывающий косяки в контрасте, alt-ах, ярлыках для форм, очерёдности заголовков и aria-свойствах. Работает в браузере, показывает в превьюшке все проблемы:

Automated Accessibility Testing Tool

AATT от PayPal — всесильный комбайн, стандартный инструмент валидации для кучи крупных компаний. Работает не только с вебом, потому и сидит на локалхосте, умеет общаться по API с другими серверами на вашей машине.

Axe by Deque

Axe входит в состав AATT, но также доступен в виде отдельного расширения для Chrome. Подойдёт для быстрой проверки уже выверенного продукта. Вообще у него довольно крутая экосистема, которой пользуются такие гиганты как Google и Microsoft.

WCAG

Вышеупомянутые гайдлайны сами по себе не инструмент, но в виде чеклиста тоже удобны. Некоторые печатают их себе на стену и сверяются на ходу.

Код

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

Nu HTML Checker

Nu — удобный HTML валидатор от W3C с подробными предупреждениями и проверкой многих неочевидных правил:

CSS Validator

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

CSS Stats

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

i18n Checker

Этот чекер покажет используемые языки, проверит содержимое соответствующих тегов и заголовков. Нужен редко, но полезен.

Rocketvalidator

Сервис действительно очень быстро анализирует HTML и CSS, но скоринг ещё не доделан.

Сеть и ссылки

Link Checker

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

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

Этот гугловский портал показывает недогруженные ресурсы и отображает загружаемый роботами контент.

Pagewatch

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

SEO и прочее

Browseo

Инструмент, показывающий сайт с точки зрения поисковых ботов.

Majestic report

Статистика с кучей графиков по трендам и темам.

Sitecheck

Лёгкий аудит безопасности со своим скорингом и мониторингом чёрных списков/скама/спама. Ищёт уязвимости и предлагает решения:

Favicon Check

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

Заключение

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

На правах рекламы

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

{«id»:13849,»url»:»/distributions/13849/click?bit=1&hash=e59a444ab2ba268c33f4eb006ac1a8f21ac6447b31e90af71d5b6700342ff654″,»title»:»u041fu043eu0434u0431u043eu0440u043au0430 u0434u0438u0437u0430u0439u043du043eu0432 u0438u0437 u0410u0444u0440u0438u043au0438, u0410u0437u0438u0438 u0438 u0430u0440u0430u0431u0441u043au043eu0433u043e u043cu0438u0440u0430″,»buttonText»:»u0420u0430u0437u0433u043bu044fu0434u044bu0432u0430u0442u044c»,»imageUuid»:»b5da0435-1779-5897-b573-e54482bf1caa»,»isPaidAndBannersEnabled»:false}

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

В этой подборке – 18 бесплатных (и условно-бесплатных) инструментов для технического анализа, которые помогут понять некоторые слабые стороны внутренней (и отчасти внешней) оптимизации сайта.

Онлайн-сервисы

Инструменты поисковых систем: «Яндекс.Вебмастер» и Google Search Console

Вся основная информация о сайте есть в аккаунтах для вебмастера «Гугла» и «Яндекса». Поисковики даже предоставляют некоторые инструменты для технического анализа сайта. Что здесь можно проверить:

• Позиции в поиске.
• Запросы, по которым пользователи переходят на сайт.
• Внешние и внутренние ссылки.
• Файл robots.txt.
• sitemap.
• Микроразметку.
• Оптимизацию под мобильные устройства.
• Ответ сервера отдельных страниц.
• Индексирование.
• Нарушения и угрозы безопасности.
• Показатели качества (ИКС – для «Яндекс»).

В «Яндекс.Вебмастере» и Google Search Console представлена актуальная информация «из первых рук». Но у такой проверки есть пара недостатков:

1. Нельзя проверить чужой сайт.
2. Нельзя посмотреть данные сразу по двум ПС.

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

Megaindex

Перейти

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

Инструмент «Анализ сайта» позволяет получить отчет по следующим показателям:

1. Видимость в поисковых системах и количество ежемесячных переходов.
2. Посещаемость (источники трафика, количество посещений в месяц).
3. обратные ссылки.
4. Популярные ключевые слова.
5. Конкуренты.

Бесплатная версия имеет ограничения: по каждому отчету показываются только первые пять результатов (5 обратных ссылок/ключевых слов/конкурентов и т. д.).

Приложение «Внешние ссылки» дает статистику по ссылающимся ресурсам, анкорам ссылок и самым популярным страницам.

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

Pr-cy.ru

Перейти

Здесь можно быстро проверить сайт по основным показателям – отчет выводится на одной странице. Удобно проверять конкурентов и вообще любые чужие ресурсы. Сервис позволяет узнать:

• Количество проиндексированных страниц.
• Наличие фильтра «АГС» и вирусов.
• Наличие сайта в реестре запрещенных ресурсов.
• Посещаемость по данным Liveinternet.
• Похожие сайты.
• Ссылки на сайт.
• Социальную активность (количество ссылок из соцсетей) и аккаунты во «ВКонтакте», «Твиттере», «Фейсбуке» (не всегда определяются автоматически).
• Общую оптимизацию главной страницы (тайтл, дескрипшен, заголовки, текст, наличие микроразметки и т. д.).
• Серверную информацию (IP, возраст домена, кодировка, SSL-сертификат, используемые на сайте технологии и т. д.).
• Юзабилити (фавикон, код 404, скорость загрузки, удобство для мобильных).
• Статистику по поисковым словам.

Более подробные данные по сайту доступны только при подключении платных тарифов.

Be1.ru

Перейти

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

• Примерная оценка стоимости сайта.
• Динамика входящих и исходящих ссылок.
• Динамика видимости сайта в «Яндексе».
• Упущенная семантика (по которой продвигаются конкуренты, а вы – нет).
• Динамика посещаемости и более подробные данные о демографии посетителей.
• Чуть более детальная статистика по конкурентам.

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

Sitechecker

Перейти

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

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

Главный минус – отчет по сайту формируется на английском языке.

Основные ошибки (замечания, предупреждения), которые показывает Sitechecker:

• Страница с протоколом https ссылается на страницу с http (подключили SSL-сертификат, но не до конца настроили переадресацию). Сервис укажет страницы, в которых нужно найти и исправить ссылки на новые.
• Дублированные заголовки H1 или теги <title>, которые должны встречаться на странице единожды.
• Слишком короткие тайтлы.
• Недостаточное количество контента на странице (Code Ratio < 10% – меньше 10% по отношению ко всему содержимому страницы, которое включает также HTML-теги, стили, JS).

Ошибки, встречающиеся на определенных страницах, показаны в разделе «Issues». Каждая из них помечена цветом, символизирующим степень критичности. Самые важные проблемы – красные.

Можно получить отчет по определенной странице, нажав на нее. Большая часть данных доступна только на платном тарифе (начинается от 9$ в месяц). Однако кое-какую информацию бесплатно посмотреть все же можно (сниппет в Google, заголовки и количество текста на странице, объем HTML-кода и т. д.).

SEO Site Checkup

Перейти

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

Всего сайты тестируются по пяти категориям показателей: общая оптимизация (метатеги, ключевые слова, битые ссылки, sitemap), скорость, сервер и безопасность, удобство для мобильных и продвинутое SEO (структурированные данные, кастомная 404-я страница, отсутствие тегов noindex и пр.).

Если какие-то пункты содержат ошибки, вы увидите пометку в виде красного крестика и кнопку «How to fix», которая поможет понять, как исправить проблему.

Seobility SEO Checker

Перейти

Сервис практически аналогичен предыдущему, но есть некоторые отличия. Например, он уделяет большое внимание анализу контента на странице и оценивает внешние факторы – ссылки с других ресурсов (в том числе с «Википедии»), популярность в «Фейсбуке».

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

Nibbler

Перейти

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

1. Доступность.
2. Пользовательский опыт.
3. Маркетинг (популярность ресурса по данным Alexa).
4. Технологии.

По результатам анализа сервис дает общую оценку сайта по 10-ти балльной шкале.

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

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

Ошибки с web-friendly, кстати, в данном случае можно проигнорировать, если вы используете .webp. Сервис почему-то не считает этот формат подходящим для веба.

Так как Nibbler считает одним из основных показателей качества сайта присутствие в «Твиттере» и оптимизацию для печати, но далеко не всем это нужно, общая оценка обычно бывает занижена. Поэтому лучше смотреть на конкретные показатели и не обращать внимания на Overall Score.

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

Mangools (англоязычный сервис) предлагает набор SEO-инструментов, в том числе SiteProfiler, предназначенный для экспресс-аудита. Пользоваться бесплатно можно только первые 10 дней.

Выдает 4 основных отчета:

• Общая статистика. Сюда входят авторитетность, цитируемость, траст (берутся показатели, разработанные Moz и Majestic) и популярность (ссылающиеся IP, Alexa Rank, количество расшариваний в Facebook).
• обратные ссылки. Динамика по ссылкам (в том числе удаленным) за последние 4 месяца. Здесь же показано количество ссылающихся доменов, доля dofollow и активных ссылок в общей массе и тексты анкоров. Посмотреть все ссылки на сайт можно в приложении LinkMiner.
• Топовый контент. Выводятся самые популярные по количеству расшариваний в Facebook и ссылающихся доменов страницы.
• Конкуренты. Показываются топовые сайты по схожей тематике со статистикой по количеству общих ключевых слов, ссылающихся IP и шеров в «Фейсбуке» и рейтингом Alexa.

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

Разработчики сервиса также предлагают браузерное расширение для Chrome и Firefox. В бесплатной версии доступна вкладка On-page SEO (внутреннее SEO), а также можно посмотреть часть данных из общего отчета SiteProfiler.

On-page SEO выдает отчет о странице, на которой вы находитесь. Здесь несколько разделов: вид в поисковой выдаче, метатеги, структурированные данные, заголовки, ключевые слова, внешние ссылки, упоминания в соцсетях и проверка скорости в PageSpeed Insights.

Для бесплатного расширения очень даже неплохо.

SEOTO.ME

Перейти

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

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

Сервис оценивает разные составляющие: страницы, контент, теги, картинки, ссылки и т. д.

В отчете «Страницы» инструмент выдает статистику по каждой странице: статус (проиндексирована, не проиндексирована, неканонический URL, не HTML и т. д.), код ответа сервера, наличие счетчиков «Яндекс.Метрики» и Google Analytics, время загрузки, уникальность и уровень вложенности.

Ошибки обнаружить легко – они помечены красным цветом.

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

В разделе с тегами можно выявить ошибки и недоработки в тайтлах, дескрипшенах и заголовках H1-H6. Вкладка «Картинки» выдаст статистику по всем графическим файлам на сайте – разрешение, размер, скорость загрузки. Здесь же будут отмечены битые изображения и с пустым тегом <alt>.

СайтРепорт

Перейти

Бесплатно проверяет только 25 страниц.

Сводный отчет показывает примерно те же данные, что и ранее рассмотренные сервисы, даже меньше. Ничего нового.

Некоторая информация в моем случае не совпала с действительностью (количество проиндексированных «Гуглом» страниц и упоминаний домена). Другие сервисы были точнее.

Общая информация мало нас интересует. Что действительно важно – левая колонка с отчетами.

Все данные представлены в виде графиков и таблиц, по каждому пункту дается справочная информация.

В разделе «Текст» очень полезная статистика по наполнению каждой страницы.

В разделе «Контент» в табличке также отмечаются грамматические ошибки.

Из наиболее интересных отчетов:

• Релевантность ключей. Содержит статистику по вхождению, релевантности и частотности (по Wordstat) ключевых фраз для каждой страницы. Данные «Вордстата» неточные, много «мусорных» ключевиков, но в целом полезный отчет.
• Видимость и конкуренты. Здесь можно узнать запросы, по которым сайт находится в топ-10 и топ-50 «Яндекса» и Google, а также проследить их динамику за год. В бесплатной версии показываются только по 10 запросов из каждого поисковика. Это сильно ограничивает функциональность инструмента, но позволяет узнать десятку самых популярных страниц сайта и количество запросов, по которым они отображаются в топ-10 и топ-50 поисковой выдачи.
• Производительность. Отчет, похожий на тот, что выдает GTMetrix или PageSpeed Insights.

Браузерные расширения

MozBar

Скачать для Chrome

После установки расширения на посещаемых страницах будет появляться черная полоса от Moz с информацией. Прежде всего, это PA (Page Authority – авторитетность страницы) и DA (Domain Authority – авторитетность домена), а также заспамленность страницы ссылками.

DA и PA – комплексные показатели, используемые сервисом Moz, которые высчитываются на основе количества ссылок на страницу и их авторитетности и веса. Справа от логотипа есть три иконки, нажав на первую из которых, можно узнать информацию о странице.

Что входит в перечень анализа:

1. Элементы на странице (On-Page Elements): тайтл, дескрипшен, ключевые слова, заголовки, выделения текста жирным или курсивом, текст тега alt.
2. Общие атрибуты (General Atributes): IP-адрес, страна, адрес в кеше «Гугла», адрес канонической страницы, наличие тегов meta robots, скорость загрузки страницы.
3. Метрики ссылок (Link Metrics): авторитетность страницы, домена, внешние ссылки с атрибутом follow, общее количество ссылок. Некоторые данные доступны после активации премиум-тарифа:
4. Разметка (Markup): schema.org, Open Graph, Twitter Cards, микроформаты.
5. Http-статус страницы.

Также с помощью расширения можно подсвечивать ссылки на странице: открытые и закрытые от индексации, внешние и внутренние.

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

Seo-tools

Скачать для Opera, Chrome

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

Далеко не все ссылки в расширении работают. Что-то уже безнадежно устарело. Но пока инструмент еще не потерял актуальность и может быть полезным.

Также здесь можно быстро посмотреть sitemap интересующего сайта и файл robots.txt.

Lighthouse

Скачать

Расширение Lighthouse для браузера Chrome выпустил сам Google еще в 2018 году. Поэтому инструменту можно доверять.

Чтобы провести экспресс-аудит открытой в браузере страницы, необходимо нажать на значок расширения и выбрать «Generate report». Он откроется на новой странице и визуально будет напоминать другой сервис Google – PageSpeed Insights.

Сайт анализируется по нескольким показателям:

1. Производительность. Для оценки используются: время, за которое отобразилась первая часть контента (First ContentFul Paint); время, за которое отобразился основной контент страницы (First Meaningful Paint); индекс скорости (Speed Index) и другие метрики для измерения скорости загрузки сайта. Приложение даже предложит посмотреть пошаговые скриншоты загрузки страницы.
2. Доступность. По большей части это проверка дизайна и юзабилити (насколько это возможно автоматическим методом): соблюдение контраста фона и элементов сайта, правильное использование тегов при оформлении списков, наличие атрибута [lang] и т. д. В открывающемся списке под заголовком «Additional items to manually check» можно найти перечень еще нескольких пунктов, которые важно проверить на сайте вручную, так как сервис здесь беспомощен.
3. Лучшие практики (технические аспекты и UX-решения). Использование протокола HTTPS, отображение картинок с правильным соотношением сторон, отказ от устаревших API и пр.
4. SEO. Lighthouse проверяет правильность robots.txt, наличие тайтла и дескрипшена, читабельность (размер) текста, отсутствие запрета индексации и т. д.

Кроме того, здесь можно проанализировать на наличие ошибок и недоработок прогрессивное веб-приложение сайта.

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

Десктопные программы

Screaming Frog SEO Spider

Перейти

Программа работает на Windows, Mac и Linux. Бесплатно проверить можно не более 500 страниц.

Screaming Frog SEO Spider сканирует все элементы на страницах (ссылки, картинки, CSS) и анализирует их с точки зрения поисковой оптимизации. С помощью этой утилиты можно понять, как поисковые системы видят сайт. При этом все происходит быстро, в автоматическом режиме, и не нужно проверять отдельно каждую страницу.

Чтобы начать проверку, введите адрес сайта в верхнюю строку и нажмите «Start».

Основные моменты, на которые нужно обратить внимание при анализе:

1. Коды ответа сервера. Вкладка «Response Codes» позволит понять, используют ли страницы правильные редиректы (301 или 302), нет ли удаленных, несуществующих страниц с кодом 404.
2. URL. В этой вкладке можно быстро найти URL страниц, не отвечающие стандартам (слишком длинные, неинформативные, содержащие кириллические символы, повторяющиеся и т. д.).
3. Тайтлы и дескрипшены. Если метатеги были заполнены наспех и им не уделялось должного внимания, обнаружить все слабые места позволят вкладки «Page Titles» и «Meta Description» соответственно.
4. Изображения. Утилита анализирует картинки на страницах и собирает данные о них в таблицу. Самый важный пункт – размер изображений. Если картинок на сайте много, стоит задуматься об их оптимизации, так как картинки большого размера могут тормозить скорость загрузки сайта и занимать ценное место на хостинге.

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

Netpeak Spider

Перейти

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

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

Netpeak Spider позволяет проверить сайт на наличие ошибок внутренней оптимизации (всего более 80 возможных вариантов). Если сайт большой, проверка может занять около часа – программа сканирует каждый url. Готовый отчет будет представлен в виде диаграмм, по которым можно оценить общий уровень оптимизации сайта. Конкретные данные об ошибках появятся в правом окне.

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

Главный плюс программы – она дает подсказки по каждому пункту из списка. Netpeak Spider не только объясняет, в чем заключается ошибка, но и объясняет, чем она грозит и как ее исправить. Если вы ничего не понимаете в SEO, такие советы будут крайне полезны.

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

Website Auditor

Перейти

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

Количество анализируемых показателей значительно меньше, чем в Netpeak Spider. Но для простейшего аудита ресурса вполне сойдет.

Что проверяет программа:

1. Индексирование и сканирование. Ресурсы с кодом состояния 4xx и 5xx, закрытые от индексации страницы, robots.txt, карта сайта, настройка 404-й страницы.
2. Перенаправления. Проблемы с версиями HTTP/HTTPS, страницы с редиректами 301 и 302, страницы с большим количеством перенаправлений и т. д.
3. Кодировка и технические факторы. Страницы с фреймами или ошибками в коде HTML, удобство для мобильных и пр.
4. On-page. Дубли заголовков и метаописаний, слишком длинные или пустые заголовки и дескрипшены.

Кроме всего этого Website Auditor исследует на предмет ошибок ссылки, изображения, URL-адреса и дает полезные рекомендации для приведения сайта в порядок.

Еще несколько полезных сервисов для проверки отдельных показателей

Некоторые моменты оптимизации сайта можно проверить более подробно при помощи специализированных сервисов. Приведем несколько из них.

Проверка скорости загрузки и адаптивности

В одной из предыдущих статей мы уже кратко обозревали 10 бесплатных инструментов проверки скорости загрузки и адаптивности сайта. Эти сервисы не потеряли актуальность, поэтому можно смело пользоваться подборкой для анализа веб-ресурса.

Поиск битых ссылок

Online Broken Link Checker

Перейти

Один из лучших бесплатных сервисов по проверке битых ссылок (даже получил награду в 2012-м году).

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

В колонке Page where found сервис показывает список url страниц с битой ссылкой и саму ссылку в исходном html-коде (src). Последняя колонка таблицы показывает ответ сервера для каждой страницы.

Расширение для Chrome Check My Links

Скачать

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

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

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

Разное

SERP Simulator

Перейти

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

Сниппет можно посмотреть как в десктопной, так и мобильной выдаче.

W3C Markup Validation Service

Перейти

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

В качестве заключения

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

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

Зачем нужно тестирование?

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

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

➀ О чем эта статья

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

➁ Для кого эта статья

Кому может быть полезна статья «Как протестировать сайт. Подробное руководство»‎:
❄ Вебмастер / разработчик сайта только что сделал новый сайт или доработку и хочет получить информацию, как протестировать сайт, чтобы оперативно исправить ошибки и проблемы.
❄ Менеджер проекта столкнулся с проблемой, что пользователи быстро уходят с сайта, хочет узнать, как тестируют сайты, и что можно улучшить на сайте, чтобы повысить лояльность клиентов.

❄ Тестировщик, который хочет структурировать и систематизировать свои знания по веб-тестированию.

➂ Экспресс-тестирование сайта

Представьте, что Вам сейчас предстоит быстро протестировать сайт. Составим пункты, как провести экспресс-тестирование сайта:
➀ Изучить сайт, выписать структуру и всю необходимую информацию для тестирования.
➁ Составить план тестирования, выбрать только самые главные страницы и критично важную функциональность, без которой невозможно представить работу сайта, определить объём работ и достаточно маленький срок.
➂ Провести тестирование с использованием методик и техник тестирования.
Существует так называемый временной подход, который мы используем — это выделение определенного количества времени на экспресс-тестирование — это могут быть короткие сессии тестирования по 5, 10 минут, N минут… Главное — это успеть найти хотя бы несколько ошибок, своего рода приключение и вызов для тестировщика. А заказчику — полезная информация об ошибках, чтобы понимать, какие могут быть проблемы у пользователей при первом знакомстве с сайтом.

➂.➀ Плюсы экспресс-тестирования:

☑ Быстрая оценка работы сайта, быстрая обратная связь от тестировщика по общему состоянию сайта.
☑ При серьёзных проблемах возможность понять серьёзность ситуации.
☑ Это вызов для специалиста, возможность проверить свои навыки в сжатых временных рамках и условиях.

➂.➁ Минусы экспресс-тестирования:

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

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

➃ Подробное тестирование сайта

Зачастую экспресс-тестирование используют только для первичной оценки состояния сайта, для первого впечатления и знакомства с сайтом. Попробуем рассказать о том, как провести более полное тестирование.
Этапы тестирования будут практически теми же, за исключением того, насколько точно и правильно будут оценены объем работ по тестированию и сроки:
❄ Изучить сайт, выписать структуру и всю необходимую информацию для тестирования.
❄ Составить план тестирования, выбрать сначала самые главные страницы, затем менее важные, и в последнюю очередь ещё менее значимые, в каждой странице выделить функциональность и сценарии сначала критически важные, затем важные, затем менее важные. Определить необходимый, достаточный объём и оптимальный срок работ по тестированию.
❄ Провести тестирование с использованием методик и техник тестирования.
Каждый из этапов требует освещения, поэтому рассмотрим их более подробно ниже.

➃.➀ Изучение сайта

Изучение сайта необходимо для составления плана тестирования. На этом этапе определяется адрес сайта, название сайта, назначение сайта, структура сайта, тип сайта (лендинг, многостраничный сайт, интернет-магазин, форум), список страниц и вся необходимая информация для следующего этапа — составление плана тестирования.

➃.➁ План тестирования

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

➃.➁.➀ Для чего нужен план тестирования (тест-план)?

❄ Содержит информацию об объеме и сроках тестирования.
❄ Позволяет задать рамки, чтобы тестировать то, что необходимо в первую очередь и чем можно пренебречь, если ресурсов не хватает.
❄ Прозрачность процесса (заказчик может видеть, что будет сделано; а тестировщику позволяет ничего не забыть и не пропустить самое важное).

➃.➁.➁ Тест-план может состоять из следующих разделов:

❄ Исходная информация. Что известно о сайте и собрано на этапе изучения сайта: информация о компании, заказчике, целевая аудитория, что заказчик ожидает от тестирования сайта.
❄ Страницы и функциональность. Список страниц с приоритезацией (самые важные, средней важности, менее важные). Функциональность (критически важная, важная, менее важная). В общем всё то, что именно будет тестироваться. Стоит также указать те страницы и функциональность, которые не будут входить в план тестирования и не будут тестироваться.
❄ Виды тестирования: функциональное тестирование, тестирование мобильной версии и другие виды тестирования.
❄ Окружения, на которых будет производиться тестирование.
❄ Анализ рисков. Обдумывание: что может пойти не так в процессе тестирования и мер по предотвращению этих рисков.

❄ Сроки проведения тестирования.

➃.➂ Виды тестирования

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

➃.➂.➀ Функциональное тестирование. Скачать пример отчета

➃.➂.➁ Тестирование вёрстки.

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

➃.➂.➂ Кроссбраузерное тестирование.

Примеры ошибок:
❄ В Internet Explorer 11 не отображается слайдер с картинками.
❄ В Mozila Firefox не видна кнопка для заказа товара.

➃.➂.➃ Тестирование удобства использования.

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

➃.➂.➄ Автоматизированное тестирование.

Примеры работ:
❄ Написание Selenium-тестов для покрытия главной страницы.
❄ Создание коллекции с тестами для API в Postman.

➃.➂.➅ Тестирование безопасности.

Пример: сканирование сайта на уязвимости.

➃.➂.➆ Нагрузочное тестирование.

Пример: имитация большого количества посещений.

➃.➃ Инструменты тестировщика

Для проведения тестирования веб-приложений используются различные инструменты:
❄ Chrome DevTools: показывает ошибки в консоли и многое другое.
❄ Fiddler: помогает анализировать запросы.
❄ Pixel Perfect: помогает выявлять ошибки в вёрстке.
И многие другие..

➃.➄ С чего начать тестирование сайта

Сначала можно начать общее тестирование сайта, например, если у Вас уже есть общий чек-лист для проверки сайта, Вы можете пройтись по его пунктам. Если такого чек-листа нет, можно его придумать. К примеру, самой первой проверкой может быть — а открывается ли вообще сайт? Какой отдается код ответа? Дальше генерируем идеи и записываем, что было проверено.

➃.➅ Что тестировать на сайте

Опытный тестировщик обладает знаниями и опытом. В ответе на вопрос «‎Что тестировать?» могут хорошо помочь техники тест-анализа, которые помогают исследовать сайт таким образом, чтобы выделить необходимые для тестирования объекты сайта. Примеры техник тест-дизайна: тестирование переходов и состояний, структурирование элементов системы в интеллект-карту и другие.
В простом случае — попробуйте выделить объекты на Вашем сайте и выпишите их в каком-нибудь виде для дальнейшего анализа.
А лучше — пройти курсы по техникам тест-анализа / изучить материалы по этой теме, разобраться в этой теме и тогда на вопрос «‎Что тестировать?» Вы всегда будете знать ответ при тестировании любых сайтов.

➃.➆ Как тестировать сайт

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

➃.➆.➀ Как будем тестировать сайт?

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

➃.➆.➁ А что по техникам тест-дизайна?

По поводу техник тест-дизайна: в простом случае — попробуйте взять каждый из объектов на Вашем сайте и разобрать его по полочкам, проанализировать и представить, какие могут быть проблемы в данном конкретном объекте. Затем нужно проанализировать несколько объектов, попытаться провести между ними связи. После анализа нескольких объектов переходите к анализу других объектов. Затем анализируйте группы объектов и связи между ними.
А лучше — пройти курсы по техникам тест-дизайна / изучить материалы по этой теме, разобраться в этой теме и тогда на вопрос «‎Как тестировать?» Вы всегда будете знать ответ при тестировании любых сайтов.

➃.➆.➂ Кажется, уже всё протестировано..

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

Подытожим

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

➃.➇ Как искать ошибки на сайте

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

➄ Полезные материалы для тестирования сайта

В данном разделе приведены полезные материалы для тестирования веб-сайтов.

Идеи для тестирования сайта.

➄.➀ Идеи для тестирования сайта

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

➄.➁ Чек-лист тестирования сайта

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

Примеры чек-листов.

Обзор лучших сервисов и приложений для экспресс-аудита сайтов. 

Яндекс.Вебмастер (и его аналог от Google – Search Console)

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

Но придется смириться с тем, что в Яндекс.Вебмастере и в Google Search Console доступны только данные по вашим сайтам. Взглянуть на то, что происходит у конкурентов, не получится. 

KeyCollector

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

Это помогает быстро оценить конкурентоспособность выбранного сайта, эффективность и стоимость ключевых слов, а также получить другую полезную информацию. Правда, только часть функций KeyCollector доступна в бесплатной демо-версии, за остальное придется платить. Лицензия обойдется в 1800 рублей/год.

PR-CY

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

1. Список проиндексированных страниц и их посещаемость по данным Liveinternet. 

2. Наличие на сайте вредоносного программного обеспечения и наличие самого сайта в списке запрещенных. 

3. Рейтинг качества оптимизации страниц (оцениваются заголовки, описания, микроразметка и т.п.).

4. Техническая информация о сервере.

И еще с десяток разных критериев, включая ответы сервера и информацию о наличии SSL-сертификата. Статистика по поисковым словам тут тоже есть.

Sitechecker

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

Sitechecker покажет, какие страницы и почему не поддерживают SSL-шифрование, поможет убрать дублированные теги из HTML-разметки, правильно оформить title и оптимизировать контент на странице. 

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

Be1.ru

Этот сервис во многом похож на PR-CY. Показывает примерно те же данные, создавая подробный отчет о ресурсе со всеми необходимыми показателями. 

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

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

А еще у сервиса шикарный маскот-робот. 

Seobility

В отличие от многих конкурентов, Seobility уделяет больше внимания не техническим аспектам ресурса, а контенту, который на нем размещен. 

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

Также Seobility оценивает популярность сайта в социальных сетях и даже в Википедии. 

Text.ru

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

Через алгоритмы text.ru можно проверить страницу целиком. Он оценит уникальность контента, проверит орфографию, покажет в процентном соотношении количество спама и воды в тексте, то есть проведет базовый SEO-анализ.

Отличный вспомогательный инструмент для анализа контента в дополнение к другим сервисам для аудита сайтов. 

Nibbler

Иностранный сервис для проверки сайтов. Отчет, формирующийся в Nibbler, делится на четыре группы:

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

• Насколько он производительный и в общих чертах приятный для пользователя. 

• Достаточно ли анализируемый ресурс популярен в сети.

• Насколько грамотно он реализован с технической стороны (теги, SEO и все такое). 

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

СайтРепорт

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

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

Mangools

Продвинутый сервис для аудита сайтов, собирающий точную информацию в четырех четко разграниченных отчетах:

1. В первом отчете отображается обобщенная статистика, то есть показатели в духе авторитетности и цитируемости, собранные из различных доверенных источников. 

2. Во втором показываются удаленные ссылки и то как они использовались за последние несколько месяцев. 

3. В третьем отчете отображается лучший контент ресурса. Это материалы, которыми чаще всего делятся и на которые ссылаются другие источники.

4. В последнем отчете указываются конкуренты, т.е. ресурсы с похожей тематикой на одном уровне популярности с анализируемым или рядом.

Advego

Еще один сервис, созданный не столько для аудита сайтов, сколько для анализа контента, размещенного на нем. Он во многом похож на text.ru, так как используется с той же целью – убедиться, что текст уникален и не заспамлен. 

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

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

Megaindex

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

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

Также Megaindex отлично подходит для экспресс-аудита, так как в один клик и без дотошного анализа выводит обобщенную оценку ресурса.

Comparser 

Интересный продукт для сбора информации о ресурсе тем же методом, каким обычно пользуется поисковой робот. Comparser умеет имитировать ботов Яндекса и Google и, как настоящий «краулер», собирает всяческие технические данные о ресурсе. 

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

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

Букварикс 

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

Алгоритм взаимодействия с сервисом следующий:

• Сначала вы «скармливаете» ему ссылку на сайт или какой-то ключевой запрос. 

• Он подбирает подходящие фразы для AdWords и отправляет их вам Excel-файлом. 

В отчетах Букварикс отображаются данные как по конкретно вашему ресурсу, так и по конкурентам, продвигающимся по схожим поисковым запросам. 

PageSpeed Insights

Детище самой Google, которое фокусируется на решении исключительно одной задачи – повышении производительности вашего ресурса. 

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

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

allpositions

Ресурс для базового аудита сайтов и проверки их позиций в поисковой выдаче. 

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

Также сервис показывает различную статистику, взятую из сервиса Google Analytics.

SEOTO.ME

Востребованный онлайн-сервис для аудита сайтов. Функциональный и визуально привлекательный. Интерфейс – одно из главных достоинств этого проекта. Минималистичный и понятный. 

SEOTO.ME показывает статистику по всем страницам анализируемого ресурса. В нее попадают данные из Яндекс.Метрики и Google Analytics, туда же попадают различные технические показатели и самые важные данные в духе статуса индексации или наличия неканонических URL.

Если SEOTO.ME обнаруживает проблему на анализируемом ресурсе, то отправляет сообщение о ней в отдельный раздел. 

Neatpeak Spider

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

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

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

Website Auditor

Эта программа похожа на Netpeak Spider, но отличается менее подробным анализом и отсутствием платы за использование. Поэтому она отлично подходит начинающим SEO-специалистам, а еще тем, кому нужно быстро провести аудит, чтобы получить общую информацию и особо не вникать в тему.

Также Website Auditor расскажет, какие страницы открываются с ошибкой и с какой именно, какие перенаправления настроены на сайте. Расскажет о проблемах технического характера и немного о контенте (нет ли дубликатов и некорректных тегов).

Кроме того, программа анализирует еще и медиаконтент, хранящийся на ресурсе. 

Screaming Frog SEO Spider 

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

Screaming Frog SEO Spider проверяет все, что есть на вашем сайте: тексты, картинки, CSS-файлы, скрипты и т.п. Анализирует каждый элемент и на основе полученных данных делает вывод о «качестве» сайта.

Естественно, Screaming Frog SEO Spider отдельно сообщает коды ошибок, ответы сервера, показывает некорректно оформленные ссылки, неоптимизированные заголовки, описания и другие HTML-теги. 

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

Lighthouse

Lighthouse – это система анализа сайтов, разработанная компанией Google. Изначально она была расширением для Google Chrome, а позже вовсе стала частью Chrome DevTools. 

Главное преимущество Lighthouse заключается как раз в том, что утилита создана крупнейшим поисковиком. И здесь как нельзя точнее указаны параметры, которым необходимо следовать, чтобы Google более лояльно относился к вашему сайту. 

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

В общем, полный спектр показателей, за которыми точно необходимо следить, причем «из первых рук».

MozBar

Удобное расширение для браузера Google Chrome, показывающее три характеристики каждого посещаемого сайта:

• Domain Authority – авторитетность домена.

• Page Authority – авторитетность страницы.

• Уровень «заспамленности» сайта внешними ссылками. 

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

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

Seo-Tools

Это не совсем сервис для аудита сайта, а скорее сборник таких сервисов в удобном формате. 

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

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

RDS Bar

RDS Bar почти полностью копирует функциональность Moz Bar. В чем-то он эффективнее, в чем-то отстает. Можно использовать его в качестве дополнения, чтобы наверняка убедиться в том, что показатели, которые выводят подобные приложения, верны. 

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

Вместо заключения

На этом и закончим. Количество сервисов для аудита сайтов не заканчивается данным списком. Легко наберется еще десяток-другой подобных программ и онлайн-ресурсов. Я же выбрал для вас наиболее популярные, эффективные и удобные в использовании.

Удачи!

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

Почему тестирование сайтов важно во время веб-разработки

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

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

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

Проверка работоспособности простых сайтов

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

Кратко об основных этапах тестирования

Вот какие этапы придется пройти при тестировании простого сайта, если он будет работать на более-менее распространенной CMS:

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

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

• на разных разрешениях. Речь здесь не только о стандартных разрешениях для мобильных и десктопа. В идеале сайт должен нормально смотреться даже при масштабировании окон или когда окно раскрыто не на весь экран. Естественно все важные элементы должны быть видны пользователю, никуда не съезжать и не наезжать на соседние элементы. Если что-то где-то съезжает, то это нужно поправить в верстке;
• в разных браузерах. Конечно, смотреть, как отображается сайт в каком-нибудь ноунейм браузере, которым пользуется несколько сотен человек, не имеет смысла, но в основных веб-обозревателях: Google Chrome, Opera, Mozilla Firefox, Edge, Internet Explorer, Яндекс Браузере, страницы должны отображаться корректно. Если это не так, то проверьте, используете ли вы нужные префиксы и поддерживаются ли используемые возможности на сайте актуальными версиями указанных браузеров.

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

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

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

Пример корректно составленного макета главной странице сайта

• тест юзабилити после верстки. Не всегда дизайн, который выглядит красиво и понятно на картинке бывает таковым после воплощения в жизнь. Иногда интерактивные элементы, влияние которых на другие элементы страниц сложно нарисовать в Photoshop или Figma, могут нарушить концепцию удобного сайта. В таком случае их придется переработать. Возможно, к задаче придется привлечь стороннего дизайнера;

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

Эти этапы используются и при тестировании более крупных проектов, правда, иногда с поправками на особенность конкретного проекта.

Подробный разбор тестирования сайтов в процессе разработки

Более сложное тестирование уже делится не на отдельные этапы, а на на отдельные виды. Далее разберем каждую разновидность подробнее.

Проверка функциональности

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

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

1. Ссылки на главную страницу сайта. Они должны быть на всех страницах в том или ином виде. Обычно они реализованы в виде логотипа сайта, который расположен в верхнем меню и подвале. Часто встречается и просто надпись “Главная” в меню. Все ссылки на главную страницу должны быть рабочими.
2. Внутренние ссылки. Они ведут на другие страницы сайта, кроме главной. Здесь важно проследить, чтобы все ссылки вели туда, куда должны и работали корректно. Для некоторых важных разделов сайта применяется то же правило, что и для ссылок на главную — они должны быть доступны с любой странице сайта.
3. Ссылки на категории внутри конкретной страницы. Важно проверить не только корректность работы самой ссылки, но и отображения элемента, на который она ведет. Если при переходе по ссылке нужный элемент оказывается вне поля зрения пользователя, то нужно поработать над якорями.
4. Проверить, нет ли ссылок на изолированные страницы.
5. Проверить, нет ли нерабочих ссылок на сторонние ресурсы.

Также важно проверить формы. В противном случае взаимодействие пользователей с сайтом будет нарушено. При проверке форм обращайте внимание на следующие моменты:

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

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

Пример корректно составленной валидации форм

3. Проверьте значение полей, которые используются по умолчанию, если таковые есть.

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

5. Корректность выполнения всех этапов. Актуально для сложных форм, чье заполнение часто разделяют на несколько этапов. Нужно проследить не только сам факт переключения между ними, но и корректность переноса данных, а также проверки в соответствии с уже заполненными формами.

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

Проверка валидности HTML/CSS кода

Здесь, помимо корректности отображения верстки на разных разрешениях, браузерах и устройствах, нужно проверить сам код на наличие ошибок. Да, некоторые из них могут не оказывать видимого влияния на работоспособность сайта и корректности отображения верстки, но зато могут повлиять на продвижение в поисковых системах. Поисковые системы Google и Яндекс могут понижать в ранжировании сайт, где в HTML и CSS обнаружены даже незначительные ошибки.

К счастью, перечитывать весь код самостоятельно не требуется. Существуют специальные программы для автоматической проверки валидации HTML/CSS. Они покажут все найденные проблемы и спорные моменты, которые вам нужно будет исправить или оставить как есть, если посчитаете, что это не ошибка.

Автоматическая проверка валидности HTML/CSS кода

Проверка баз данных

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

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

Тестирование юзабилити

Принципы здесь ровно те же, что и в случае с тестированием небольшого простого сайта:

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

Дополнительные факторы тестирования

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

• ожидаемая нагрузка на сервер;
• основные виды нагрузок и требуемая для них производительность со стороны сервера;
• перечень инструментов для тестирования производительности и валидности кода;
• общий портрет целевой аудитории: регион проживания, “любимые” браузеры;
• доступность сайта — для широкой аудитории или для определенной категории пользователей;
• допускаются ли простоит сервера для технического обслуживания и, если да, то в каких количествах и какой длительности;
• перечень средств для обеспечения безопасности сайта от потенциального взлома и хакерских атак;
• каким образом планируется работать с контентом со стороны заказчика: требуется ли собственная CMS, подойдет любая в открытом доступе или CMS не нужна вообще;
• какую спецификацию HTML и CSS кода требуется соблюдать при разработке проекта, допустимы ли отклонения;
• рекомендуемый максимальный размер страницы 3-5 экрана, в иных случаях требуется разработать интерактивное меню для данной страницы и разбить ее на логические блоки;
• все элементы страницы, да и сайта тоже, должны быть логически связаны между собой;
• рекомендуется оставлять “хлебные крошки” — ссылки на предыдущие страницы сайта из одной категории для лучшей связи.

Заключение

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