WordPress QA. Контроль качества сайта на WordPress. Пошаговое руководство

Новый бизнес может потратить около $ 3 000 на создание сайта. К сожалению, это еще не говорит о том, что сайт будет идеально работать и давать нужную конверсию. Особенно когда контроль качества сайта на WordPress не проводится должным образом. Есть ряд причин, из-за которых пользователи могут массово покидать сайт:

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

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

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

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

Что входит в контроль качества сайта на WordPress

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

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

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

Но уверяю вас, оно того стоит.

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

Что нужно делать перед началом разработки сайт на WordPress:

1. Подготовка

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

Это включает в себя:

• Набор целей для веб-сайта и примерный план того, как вы собираетесь их достичь с помощью дизайна и разработки.
• Контрольный список, который включает в себя все задачи, связанные с проектом и связанные с ними крайние сроки. Сюда входят такие вещи, как раскадровка и прототипирование. Это помогает снизить вероятность обнаружения проблем в дальнейшем в процессе контроля качества.
• Внедрение точек по контролю качества в каждый этап разработки.
• Четко определенные роли для членов команды и задачи, за которые они будут нести ответственность.
• Делегирование QA людям, ответственным за проверку работы, выполненной другими. Никто не должен «проверять» свою же работу. Это очень рискованно.
• Расписание, которое объединяет задачи в зависимости от задействованного персонала и типа задачи. Слишком много переключений может увеличить вероятность того, что что-то будет упущено.
• Определение и покупка при необходимости инструментов, которые вы будете использовать для управления проектом и тестирования в целях контроля качества.

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

2. Надежный хостинг

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

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

Хостинг, специализированный для WordPress

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

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

3. Отладочный сайт

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

Зачем?

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

4. График резервного копирования

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

5. Установка всех необходимых плагинов для оптимизации

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

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

• Плагин для усиления безопасности сайта. Пример — Wordfence Security.
• Плагин для кэширования. Пример — W3 Total Cache.
• Плагин для сжатия изображений. Пример — TinyPNG.
• Плагин для SEO. Пример — Rank Math SEO.

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

Что нужно делать в процессе разработки сайта на WordPress:

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

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

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

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

Используйте Яндекс.Метрику и Вебвизор для отслеживания пользовательского опыта взаимодействия с сайтом или попросите напрямую дать обратную связь.

Вам следует обратить внимание на следующие вещи:

• Понятно ли, какой бренд стоит за сайтом и чем бизнес занимается? Оставит ли логотип неизгладимое впечатление? Точно ли в тексте объясняется история, цель и уникальное торговое предложение?
• Есть ли какие-либо проблемы с навигацией? Легко что-то найти? Легко использовать? Названия элементов однозначно определяют их фактическое назначение?
• Как работает поиск? Результаты релевантны? Поиск работает достаточно быстро?
• Есть ли какие-то недочеты в дизайне, которые мешают пользователю перемещаться по сайту? Цвета? Типография? Изображения? Отвлекающие факторы?
• Естественный путь пользователя ведет к успешной конверсии?

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

7. Проверка призовов к действию (CTA)

Call-to-action, призыв к действию — важная часть вашей воронки конверсии на сайте. Хотя конечные пользователи столкнутся с этим во время когнитивного руководства, а вы захотите узнать их мнение по этому поводу, вам также необходимо проверить все своими руками. Поскольку призывы к действию — это фактический элемент дизайна, который необходимо написать, отформатировать, разместить и связать со ссылкой, много чего может пойти не так.

Убедитесь, что каждый призыв к действию:

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

8. Проверка контактных форм

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

Проверьте в своих формах:

• Расположение на странице. Как и призыв к действию, форму следует располагать там, где пользователь ожидает ее увидеть.
• Формулировки. Это касается любых указаний, данных над формой, а также меток, размещенных внутри и снаружи полей. Есть ли в них смысл?
• Размер полей. Это может не иметь большого значения для обычного пользователя, но для мобильных пользователей и пользователей с ограниченными возможностями все обстоит ровно наоборот.
• Шаги. Некоторые формы сложнее других и включают в себя несколько шагов. Убедитесь, что все используемые поля и шаги действительно необходимы.
• Кнопка. Кнопка с призывом к действию для отправки формы должна проверяться так же, как и другие кнопки сайта.
• Подтверждения. Есть 3 типа подтверждений для проверки:
  • Получил ли конечный пользователь подтверждающее сообщение на экране или был направлен на страницу с благодарностью?
  • Получил ли конечный пользователь дополнительное письмо с подтверждением?
  • Получил ли администратор сайта электронное письмо с уведомлением об отправке формы?

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

9. Проверка страницы оплаты

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

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

10.Умышленный вызов ошибок

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

Рассмотрите каждый подобный сценарий и воспроизведите его во время вашего QA.

Проверьте, что выводится сообщение при неполном или некорректном заполнении формы. Убедитесь, что оно понятно и объясняет, из-за чего возникла ошибка.

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

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

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

11. Проверка интерактивных элементов

Каждый интерактивный элемент, который вы добавите на свой сайт, тоже нуждается в QA. Это могут быть:

• Всплывающие окна
• Калькуляторы
• Галереи изображений
• Видео или аудио плееры
• Загружаемый контент
• Чат
• Ссылки на социальные сети и кнопки «Поделиться»

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

12. Проверка текста

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

Корректор может использовать в своем арсенале один из инструментов для проверки орфографии и грамматики. Благодаря этому процесс проверки можно автоматизировать и проверить большее количество страниц за меньшее время.

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

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

13. Проверка работы SEO-плагина

Как только ваши пользователи смогут читать и редактировать контент, стоит проверить, насколько он оптимизирован для поисковых систем. Сделать это можно прямо в консоли WordPress с помощью специальных плагинов. Например, Rank Math SEO.

Плагин предоставляет информацию:

• Количество входящих ссылок.
• Количество исходящих ссылок.
• Очки SEO-оптимизации.
• Советы по возможной оптимизации.
• Легкость чтения текста.

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

#todo: Cоздать полный SEO-чеклист

14. Проверка каждой ссылки

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

После того, как закончите добавление всего контента на сайт, установите плагин Broken Link Checker. Активируйте его и зайдите в настройки. Плагин сразу начнет парсинг ссылок и их проверку.

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

Затем настройте Redirect 301, чтобы обрабатывать сломанные ссылки в будущем. Это удержит пользователей на сайте и скроет от них страшную страницу 404.

В завершении вам нужно проверить анкоры во всех ссылках. Лучше всего эту работу назначить редактору или SEO-оптимизатору, т.к. они будут знать, какие ключевые слова нужно использовать.

15. Проверка изображений

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

В остальном убедитесь, что:

• Изображения появляются тогда, когда это требуется.
• Размещение изображения на странице имеет смысл.
• Тэг alt заполнен для пользователей с ограниченными возможностями.
• Изображения имеют одинаковый размер, когда они используются в одном месте или для одной и той же функции.
• Каждое изображение выглядит кристально чистым. Даже на экранах с высокой плотностью пикселей, таких как Retina.
• Цвета внутри изображения не вступают в конфликт с остальной страницей.
• Содержимое изображения релевантно сообщению, передаваемому страницей.
• Любой текст, отображаемый поверх изображения, можно легко прочитать, даже если прокрутить изображение с эффектом параллакс.
• Любые подписи к изображениям им соответствуют.

16. Проверка требований к коду

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

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

17. Проверка проблем с доступностью

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

Список требований к доступности сайтов вы можете найти в Web Content Accessibility Guidelines. Информация постоянно обновляется, поэтому я бы посоветовал использовать этот источник в качестве контрольного списка для реализации вопросов с доступностью на вашем сайте.

Что нужно сделать один раз во время разработки и еще раз после запуска вашего сайта на WordPress:

18. Проверка совместимости с браузерами и устройствами

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

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

Просмотрите каждую страницу вашего сайта в WordPress

Если вы хотите проверить весь сайт сразу, вы можете сделать это с помощью Customizer (консоль WordPress > Внешний вид > Настроить). Откроются настройки вашей темы. В нижнем левом углу окна браузера вы сможете выбрать размер устройства, а справа увидеть, как ваш сайт будет выглядеть. Это будет не совсем точно, но с этого можно начать.

Если вы используете конструктор страниц (WPBakery, Beaver Builder, Elementor и другие) вы также сможете проверить совместимость страницы с планшетами или мобильными телефонами при разработке в режиме реального времени.

Используйте сторонний сервис

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

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

Ручная проверка в разных браузерах

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

Google Mobile-Friendly Test

Наконец, когда ваш сайт уже будет запущен, проверьте его с помощью Google Mobile-Friendly Test.

Google даст вам полную ясность ситуации, а также советы о том, как исправить проблемы с совместимостью.

19. Проверка скорости

Есть много бесплатных онлайн-сервисов для проверки скорости сайта. Но я рекомендую использовать GTmetix. Анализ основывается на многих факторах, один из которых — результат проверки с помощью Google Lighthouse.

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

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

20. Стресс-тест

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

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

Если решения не найдется, обратите внимание на сервис для нагрузочного тестирования K6.

21. Проверка безопасности

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

Sucuri SiteCheck — инструмент, который поможет сделать это.

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

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

22. Проверка работы аналитики

Google Analytics или Яндекс.Метрика — важная часть каждого сайта на WordPress. Без такого инструмента будет практически невозможно принимать какие-либо хорошо обоснованные стратегические решения для вашего сайта в будущем.

Для начала убедитесь, что счетчики правильно интегрированы на сайт. Самый простой способ сделать это — войти в панель управления сервисом аналитики и убедиться, что к вам поступает трафик.

Далее, настройте дополнительные модули, которые хотите отслеживать. Например, электронную торговлю. Google Analytics или Яндекс.Метрика могут стать действительно мощными инструментами аналитики, если вы настроите их для правильного сбора данных.

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

23. Проверка индексации сайта

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

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

Если у вас возникают какие-либо проблемы на данном этапе, проверьте 2 файла на вашем сайте:

• robots.txt — говорит поисковым движкам, следует ли индексировать ваш сайт или определенные страницы на нем.
• sitemap_index.xml — предоставляет поисковым движкам список всех индексируемых страниц сайта.

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

24. Проверка интеграции сторонних инструментов

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

• Email-маркетинг
• Создание лидов в CRM
• Кампании на посадочных страницах

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

25. Регулярное обновление плана по контролю качества сайта на WordPress

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

Заключение

Когда есть так много всего, когда пользовательский опыт может быть испорчен, вам просто нельзя обойтись без всеобъемлющего плана по контролю качества сайта на WordPress. Приведенные выше 25 инструментов, советов и тестов помогут вам начать работу в верном направлении. А как вы проводите контроль качества сайта на WordPress?

Источник