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

Как проверить, удобен ли сайт для просмотра на смартфоне?

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

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

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

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

Для проверки производительности можно использовать PageSpeed Insights, а для более детальной диагностики — Lighthouse в Chrome. Учтите, что прежний инструмент Google для проверки удобства просмотра на мобильных устройствах больше не работает, поэтому искать старую страницу не нужно. Отчёт о производительности также не подтверждает, что сайт полностью адаптирован для мобильных устройств: перекрытые кнопки и неудобные для заполнения поля всё равно нужно проверять вручную.

Проверьте вёрстку, пройдя путь клиента

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

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

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

Не оценивайте скорость только по итоговому баллу

В PageSpeed Insights лабораторные данные помогают воспроизвести и диагностировать проблемы, а данные реальных пользователей показывают фактический опыт. Результаты могут различаться. Если выборки реальных пользователей недостаточно, в отчёте может не быть соответствующих данных — это не означает, что с сайтом всё в порядке. Для привлечения клиентов из других стран также следует проводить тесты в условиях сетей целевых регионов, а не ориентироваться только на результаты при подключении к офисной Wi-Fi-сети.

Особое внимание уделите основным веб-показателям: отрисовке самого крупного контента LCP, задержке до следующего отображения INP и совокупному смещению макета CLS. По рекомендациям Google, хорошие значения этих показателей составляют не более 2,5 секунды, 200 миллисекунд и 0,1 соответственно. При оценке данных реальных пользователей обычно ориентируются на 75-й процентиль, а не на результат одного теста.

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

Важный тест завершён только после отправки запроса

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

Если трафик поступает из социальных сетей, проверьте настоящую ссылку, открыв её непосредственно в приложении соцсети. Встроенный браузер может работать иначе, чем отдельный браузер; особого внимания заслуживают переходы, авторизация и открытие новых окон. Интеллектуальная система комплексного маркетинга в социальных сетях AI+SNS компании EasyYingbao поддерживает привязку аккаунтов на разных платформах, синхронизацию контента и создание публикаций на нескольких языках. При использовании таких возможностей распространения контента нужно также проверить целевую страницу из публикации, а не только убедиться, что публикация размещена.

Превратите результаты проверки в задачи по исправлению, которые можно перепроверить

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

Компания 易营宝信息科技（北京）有限公司, основанная в 2013 году, предоставляет услуги по созданию интеллектуальных сайтов и многоязычных веб-сайтов, SEO, рекламе и маркетингу в социальных сетях. При приёмке проектов, объединяющих создание сайтов и маркетинг, недостаточно убедиться, что «адаптивный шаблон запущен»: необходимо также определить, кто отвечает за целевые страницы, формы, передачу данных и дальнейшее обслуживание.

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