69
4 мин
Шаг 1. Автоматическая проверка Google (30 секунд)
Откройте Lighthouse в браузере Chrome: Нажмите F12 (или правой кнопкой мыши → «Просмотреть код»), перейдите на вкладку Lighthouse, выберите категорию Performance и устройство Mobile, затем нажмите «Analyze page load».
Результат с оценкой 90–100 (зелёная зона) по Performance и отсутствием ошибок в разделе Accessibility — норма. Оценка ниже 50 (красная зона) или множественные ошибки требуют внимания.
Три проблемы, которые сервис выявляет чаще всего:
● Текст мельче 16 пикселей — трудно читать без увеличения;
● Расстояние между кнопками меньше 48 пикселей — сложно попасть пальцем;
● Контент шире экрана — появляется горизонтальная прокрутка.
Сохраните скриншот с результатом — он понадобится для постановки задачи разработчику.
Шаг 2. Ручная проверка на смартфоне (1 минута)
Надёжный способ тестирования — открыть лендинг на реальном устройстве. Важно: проверять лучше не на флагманском смартфоне с быстрым интернетом, а на устройстве среднего сегмента с Android.
Что проверить на первом экране:
● Понятно ли за 3 секунды, что предлагает компания;
● Читается ли заголовок без увеличения;
● Видна ли кнопка целевого действия — «Заказать», «Оставить заявку»;
● Есть ли на виду контакт для связи.
Если хотя бы один пункт не выполнен — это проблема, на которую стоит обратить внимание в первую очередь. Первый экран определяет, останется посетитель на сайте или уйдёт.
Что проверить при прокрутке всего лендинга:
● Текст читается без увеличения и горизонтальной прокрутки;
● Изображения загружаются быстро и не обрезаны по краям;
● Меню открывается и функционирует корректно;
● Все кнопки достаточно крупные, не расположены вплотную друг к другу;
● Форму заявки можно заполнить без затруднений;
● Номер телефона кликабельный — при нажатии открывается вызов.
Проведите практический тест: попросите стороннего человека оставить заявку с телефона. Если он справился за минуту без затруднений — форма работает нормально.
Шаг 3. Проверка скорости загрузки (1 минута)
Откройте сервис PageSpeed Insights. Вставьте адрес лендинга. Сервис покажет два результата — для компьютера (Desktop) и для мобильного (Mobile). Ориентируйтесь на мобильный показатель.
● 80–100 баллов — высокая скорость загрузки;
● 50–79 баллов — приемлемо, но есть потенциал для улучшения;
● Ниже 50 баллов — критично, посетители уходят не дождавшись загрузки.
Обычно почти половина пользователей закрывают сайт, если он загружается дольше трёх секунд.
Основные причины медленной загрузки:
● Несжатые изображения по 5–10 мегабайт;
● Множество виджетов и скриптов: онлайн-чаты, счётчики, калькуляторы;
● Автозагрузка видео на первом экране.
Что можно сделать быстро: сжать изображения через сервис tinypng.com, убрать неиспользуемые виджеты, перенести видео ниже первого экрана или включить отложенную загрузку.
Шаг 4. Проверка на разных устройствах (1 минута)
Экраны смартфонов различаются по размеру: от компактного iPhone SE до крупного Samsung Galaxy. Лендинг должен корректно отображаться на всех.
Для проверки откройте Chrome на компьютере и нажмите F12. В появившейся панели разработчика нажмите на значок смартфона или используйте сочетание Ctrl+Shift+M.
Устройства для тестирования:
● iPhone SE — минимальный размер экрана, показывает худший сценарий;
● iPhone 13 Pro — наиболее распространённый размер в 2026 году;
● Samsung Galaxy S20 — стандарт для Android-устройств;
● iPad — проверка отображения на планшете.
При переключении между устройствами проверяйте: все элементы помещаются на экране, ничего не выходит за границы, кнопки и текст читаются.
Шаг 5. Проверка конверсионных элементов (1 минута)
Конверсионные элементы — то, что приносит заявки. Их работоспособность важнее визуального оформления.
Телефон. Нажмите на номер телефона в мобильной версии. Должен открыться экран вызова. Если ничего не происходит — требуется доработка.
Кнопка заказа. Проверьте: видна ли она на первом экране, достаточно ли крупная для нажатия пальцем. Минимальный размер кликабельного элемента на мобильном — 44×44 пикселя.
Форма заявки. Откройте форму на телефоне и проверьте:
● Поля ввода достаточно крупные;
● Клавиатура не перекрывает кнопку «Отправить»;
● После отправки появляется подтверждение: «Спасибо» или «Заявка принята».
Мессенджеры. Кнопки VK, Telegram или другого канала общения при нажатии должны открывать соответствующее приложение.
Типичные ошибки мобильных версий
Мелкий текст. Основной текст мельче 16 пикселей трудно читать. Заголовки должны быть 22–28 пикселей.
Недостаточное расстояние между кнопками. Между кликабельными элементами должно быть минимум 28–32 пикселя. Иначе пользователь промахивается и попадает не туда.
Несжатые изображения. Фотография с камеры весит 8 мегабайт. Для сайта её нужно сжать до 150–200 килобайт. Визуальная разница на экране незаметна, а скорость загрузки увеличивается в десятки раз.
Полноэкранные всплывающие окна. Pop-up, блокирующий весь контент, раздражает пользователей. Google понижает такие сайты в поисковой выдаче. Если всплывающее окно необходимо — делайте его компактным с крупной кнопкой закрытия.
Горизонтальная прокрутка. Появление полосы прокрутки влево-вправо — критическая ошибка. Все элементы должны помещаться по ширине экрана.
Чек-лист для самопроверки
1. Лендинг на телефоне понятен без увеличения.
2. Заявку можно оставить за 30 секунд.
3. Кнопка «Заказать» видна на первом экране.
4. Телефон кликабельный — нажатие инициирует вызов.
5. Страница загружается быстрее трёх секунд.
6. Google Mobile-Friendly Test показывает «Страница удобна для мобильных».
7. Текст читается без увеличения.
8. Все изображения загрузились и отображаются корректно.
Если все пункты выполнены — мобильная версия в порядке. Рекомендуется повторять проверку раз в месяц.
Если не выполнен один пункт — есть что улучшать.
Если не выполнены три и более пункта — скорее всего сайт теряет клиентов ежедневно.
Где найти исполнителей
Простые задачи — сжатие изображений, увеличение размера кнопок — можно решить самостоятельно или силами штатного специалиста. Комплексную доработку мобильной версии выполняют фрилансеры или агентства.
