Как проверить мобильную версию сайта: чек-лист

Как проверить мобильную версию сайта, если вы не разработчик и у вас нет бюджета на аудит? Короткий ответ: за 15 минут, бесплатно, с телефоном в одной руке и парой бесплатных инструментов в другой. Это урок рубрики «Сам всё знаю» — с пошаговой проверкой, свежим кейсом из нашей собственной практики (да, мы сами поймали у себя сломанное мобильное меню — расскажем честно, как) и фирменным чек-листом «повтори сам». К концу статьи вы будете точно знать, теряет ли ваш сайт мобильных клиентов, — а заодно увидите, как в 2026 году сайт делают вообще без рук: надиктовал голосовое в Telegram — получил готовую страницу.

Что вы получите к концу урока

Конкретный результат, а не «общее понимание»: вы прогоните свой сайт через пять уровней проверки — от 60-секундного теста руками до аудита ИИ-агентом, найдёте типовые поломки мобильной версии (кривое меню, мелкие кнопки, горизонтальный скролл, нечитаемый шрифт) и получите распечатываемый чек-лист из 14 пунктов. Время — 15–30 минут. Стоимость — 0 ₽: все инструменты из урока бесплатные.

Почему это стоит 15 минут вашего времени. Больше половины мирового веб-трафика идёт с телефонов (StatCounter, 2026), а в рунете, по данным Mediascope за 2025 год, со смартфонов потребляется около трёх четвертей всего контента — средний россиянин проводит в смартфоне 4 часа 19 минут в сутки. Если мобильная версия сломана, для большинства аудитории у вас сломан весь сайт — и вы можете об этом даже не знать, потому что сами открываете его с рабочего компьютера.

Сломанная мобильная версия — это минус деньги: цифры

Соберём аргументы для самого занятого читателя — владельца бизнеса, у которого «сайт вроде работает»:

• 53% мобильных посетителей уходят, если страница грузится дольше 3 секунд (исследование Google «The Need for Mobile Speed», 2016 — классика, которую до сих пор цитирует вся индустрия).
• Конверсия падает в разы от скорости. По исследованию Portent (2022, 100+ млн просмотров): сайт, открывающийся за 1 секунду, конвертирует примерно втрое лучше сайта за 5 секунд; в e-commerce конверсия при 1 секунде — 3,05%, при 3 секундах — уже 1,12%.
• Плохой мобильный опыт бьёт по бренду. По совместному исследованию Google и Purchased (2017–2018), после неудачного мобильного визита люди на 60%+ реже покупают у этого бренда в будущем — они не жалуются, а молча уходят к конкуренту.
• Поисковики смотрят на ваш сайт глазами смартфона. Google завершил переход на mobile-first индексацию 31 октября 2023 года: рейтинг вашего сайта строится по его мобильной версии, даже для десктопной выдачи. У Яндекса «мобилопригодность» — фактор ранжирования мобильного поиска ещё с алгоритма «Владивосток» (февраль 2016).
• Навигация — самое слабое место. Baymard Institute в бенчмарке 180+ ведущих e-commerce сайтов (2024–2025) оценил мобильную навигацию у 67% из них на «посредственно» или «плохо». А по исследованию Nielsen Norman Group, скрытую навигацию (то самое бургер-меню) пользователи обнаруживают почти вдвое реже видимой.

Вывод простой: мобильная версия — не «уменьшенная копия сайта», а основная витрина бизнеса. И проверять её нужно отдельно и регулярно.

Наш свежий кейс: меню, которое работало только на первом экране

Честная история из этой недели. На нашей собственной витрине vibemarketolog.ru мобильное бургер-меню открывалось идеально… но только пока посетитель находился в самом верху страницы. Стоило проскроллить вниз — к ценам, примерам, отзывам — и кнопка меню переставала работать: меню «открывалось» на две тысячи пикселей выше экрана, там, где его никто не видел.

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

• Такое бывает у всех — даже у команд, которые делают сайты профессионально. Вопрос не «бывает или нет», а «как быстро вы это заметите».
• Ошибка невидима при беглой проверке. Откроешь сайт, ткнёшь меню на первом экране — работает. Проскроллишь и ткнёшь — уже нет. Именно поэтому в чек-листе ниже есть пункт «проверь меню ПОСЛЕ скролла».
• Пока меню сломано, мобильный посетитель заперт на одной странице. Он не доберётся ни до цен, ни до контактов — и уйдёт. По цифрам выше — скорее всего, навсегда.

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

Проверяем своими руками: пять уровней, все бесплатные

Прежде чем нырять в пошаговую проверку — короткая развилка. Собирать и чинить самому — не единственный путь: эту же задачу мы делаем под ключ. ИИ-агент Вайб-Маркетолога соберёт вам сайт, проверит мобильную версию и будет вести её дальше — а до 31 июля действует акция «Агент в подарок»: пополните баланс от 30 000 ₽ одним платежом — и первый месяц ИИ-агента Starter (15 000 ₽) бесплатно, само пополнение остаётся у вас на балансе и тратится на генерации, а перед стартом мы бесплатно делаем аудит ваших задач за 24 часа. Оставить заявку — на странице агентов, пополнить баланс — в кабинете. А если хочется руками и бесплатно — читаем дальше, всё получится.

Уровень 1. Телефон в руки: 60-секундный тест

Самый недооценённый инструмент проверки — ваш собственный смартфон. Откройте сайт и пройдите по сценарию реального посетителя:

1. Загрузите главную не по Wi-Fi, а на мобильном интернете. Считайте секунды до появления контента: дольше трёх — уже тревожный сигнал (помните про 53%).
2. Проскрольте страницу до самого низа. Не появляется ли горизонтальная прокрутка? Не «прыгает» ли вёрстка?
3. Откройте меню на первом экране. Закройте. Проскрольте до середины страницы — и откройте снова. Работает? Открывается на весь экран? Кнопка закрытия видна и нажимается? Это тот самый пункт, на котором попались мы.
4. Поверните телефон горизонтально с открытым меню. Ничего не «потерялось»?
5. Нажмите на 3–4 ссылки и кнопки, включая телефон и мессенджеры в контактах. Попадаете с первого раза, или пальцу тесно?
6. Повторите на 2–3 внутренних страницах: каталог, карточка товара, форма заявки. Мобильные ошибки любят прятаться именно там.

Уровень 2. Chrome DevTools: все смартфоны мира на вашем компьютере

У вас iPhone, а у половины клиентов — Android с другой шириной экрана? Браузер Chrome умеет притворяться почти любым устройством. Откройте свой сайт, нажмите Ctrl+Shift+M (Windows/Linux) или Cmd+Shift+M (Mac) — сначала откроются инструменты разработчика, если нужно, нажмите ещё раз — и страница отобразится в рамке телефона. Эти горячие клавиши стабильны уже много лет.

Что делать в этом режиме:

• Переключите несколько пресетов устройств (iPhone, Galaxy, Pixel, iPad) в панели сверху — сайт должен выглядеть аккуратно на каждом.
• Проверьте «ничейные» ширины. Потяните рамку и посмотрите на сайт при ширине 700–1000 пикселей — это планшеты и маленькие ноутбуки. Классическая ошибка (мы находили её и у себя): десктопное меню уже спряталось, а мобильная кнопка ещё не появилась — и посетитель остаётся вообще без навигации.
• Включите замедление сети (пресет вроде «Mid-tier mobile» эмулирует средний смартфон на 3G/4G) и перезагрузите страницу — так сайт видят люди не в центре города.

Уровень 3. PageSpeed Insights и Lighthouse: официальный аудит от Google

Важный маркер свежести любых инструкций: старый добрый «Google Mobile-Friendly Test» закрыт ещё в декабре 2023 года — если в чужой статье вам предлагают им воспользоваться, статья устарела. Официальная замена — аудиты Lighthouse, самый простой способ запустить их без установки чего-либо — сервис pagespeed.web.dev: вводите адрес сайта, получаете отчёт отдельно для мобильных и десктопа.

На что смотреть в мобильном отчёте:

• Производительность — метрики скорости загрузки и отзывчивости (Core Web Vitals). Зелёная зона — хорошо, красная — вспоминаем таблицу конверсии Portent.
• Тап-таргеты. Google рекомендует кликабельные элементы минимум 48×48 пикселей с отступами: это размер подушечки пальца. Аудит подсветит кнопки и ссылки, в которые сложно попасть.
• Читаемость шрифта. Lighthouse ругается, если больше 40% текста мельче 12 пикселей; комфортный базовый размер для мобильного — 16 пикселей. Бонус-факт: поля ввода со шрифтом меньше 16 пикселей вызывают принудительный автозум в Safari на iPhone — та самая бесящая «прыгающая» форма.
• Viewport и ширина контента — аудит поймает горизонтальный скролл и контент шире экрана.

Уровень 4. Яндекс Вебмастер: как вас видит главный поисковик рунета

В Яндекс Вебмастере (нужны подтверждённые права на сайт) найдите раздел «Инструменты» → «Проверка мобильных страниц» — название пункта может слегка меняться, ищите слово «мобильных». Инструмент показывает, считает ли Яндекс страницу пригодной для мобильных: без горизонтальной прокрутки, с контентом по ширине экрана, без устаревших технологий. Дополнительно «Диагностика сайта» предупредит о проблемах мобилопригодности всего сайта. Учитывая, что мобилопригодность — фактор ранжирования Яндекса с 2016 года, этот отчёт напрямую связан с вашими позициями.

Уровень 5. Поручите проверку ИИ-агенту

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

lk.vibemarketolog.ru/#website

✅ Чек-лист: проверь мобильную версию сам

Фирменный блок рубрики — распечатайте или сохраните. Полный проход занимает 15–30 минут:

• □ Открыл сайт со смартфона на мобильном интернете — контент появился быстрее чем за 3 секунды
• □ Меню открывается на первом экране
• □ Меню открывается ПОСЛЕ скролла в середине и в самом низу страницы
• □ Меню закрывается: крестиком, по пункту, и фон под ним не прокручивается
• □ Повернул телефон горизонтально — меню и шапка не сломались
• □ Нет горизонтальной прокрутки ни на одной ключевой странице
• □ Текст читается без зума: базовый шрифт от 16 пикселей
• □ Во все кнопки и ссылки попадаю пальцем с первого раза (ориентир — 48×48 px)
• □ Телефон в контактах — кликабельная ссылка, открывает звонилку; мессенджеры открываются
• □ Формы заполняются с телефона без мучений, поля ввода не вызывают автозум
• □ Проверил в Chrome DevTools (Ctrl+Shift+M / Cmd+Shift+M) 3–4 устройства и планшетные ширины 700–1000 px — навигация есть на каждой
• □ Прогнал сайт через pagespeed.web.dev — мобильные метрики не в красной зоне, тап-таргеты и шрифты без замечаний
• □ Посмотрел «Проверку мобильных страниц» в Яндекс Вебмастере — страницы мобилопригодны
• □ Поставил напоминание повторять проверку после каждого обновления сайта — или поручил её ИИ-агенту

Что делать, если проверка нашла проблемы

Три пути, по нарастанию бюджета:

• Починить точечно. Если сайт на конструкторе (Tilda, WordPress и т.п.) — часто хватает настроек темы: включить мобильную версию меню, увеличить шрифт, убрать широкие блоки. На фрилансе адаптивные правки стоят от нескольких тысяч рублей (витринные «от 500 ₽» на биржах — это про самые простые задачи).
• Пересобрать страницу с нуля за минуты. В 2026 году лендинг не обязательно верстать: опишите сайт текстом — ИИ соберёт адаптивную страницу сам. В нашем AI-конструкторе базовый вариант стоит 49 ₽, публикация — на нашем домене, мобильная вёрстка из коробки. Для сравнения: сайт-визитка у студий в 2025 году — 30 000–80 000 ₽, лендинг — 50 000–300 000 ₽ (вилки по данным студий и фрилансеров; на момент публикации, июль 2026).
• Отдать сайт агенту под ключ — хоть голосовым сообщением. Об этом — следующий раздел, это самый интересный вариант.

Сайт по голосовому в Telegram: как это работает у вайб-агентов

Наши ИИ-агенты — это не чат-бот с кнопками, а цифровой сотрудник с Telegram-интерфейсом, который понимает текст и голос. На практике это выглядит так: вы записываете голосовое — «Нужен лендинг для доставки пеленальных комодов в Казани, акцент на быструю сборку, в фирменных синих цветах, с формой заявки и кнопкой WhatsApp» — и уходите по своим делам. Агент расшифровывает задачу, уточняет детали вопросом в чате, собирает страницу через нейросети платформы, сам проверяет её по тому же чек-листу, что вы читали выше (включая меню после скролла — теперь вы знаете, почему), и присылает ссылку на результат.

Дальше — правки в том же формате: «сделай кнопку заметнее», «добавь блок с отзывами», «поменяй фото на вечернее». Каждое сообщение — итерация. Так работает связка, которую мы продаём как готового сотрудника: от 15 000 ₽ в месяц, с интеграциями в CRM и рекламные кабинеты, работает 24/7. Подробности и заявка — на странице ИИ-агентов; про акцию «Агент в подарок» до 31 июля мы писали выше.

Хотите тот же принцип, но бесплатно и своими руками? Соберите личного агента по нашему гайду и подключите к нему нейросети Вайба через /connect — генерация страниц, картинок и текстов будет у вашего агента, а платить будете только за фактические генерации в рублях.

Кейсы: сколько денег приносит починенная мобильная версия

Два открытых кейса с проверяемыми источниками:

• «Ариэль Металл» (поставщик металлопроката) + агентство «Сайткрафт». В мобильной версии баннер согласия с cookie закрывал половину экрана; переработали главную, навигацию и каталог. Результат: конверсия выросла с 0,1% до 2,4%, выручка — плюс 34% (с 17,7 до 23,8 млн ₽). Кейс опубликован на «Рейтинге Рунета» в декабре 2025-го.
• UFS.Travel (ж/д билеты). Адаптивный редизайн: общая конверсия +16%, конверсия вернувшихся пользователей +10%, брошенных корзин −14% (кейс на vc.ru, 2017 — старый, но с редкой для рынка конкретикой).

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

Границы самостоятельной проверки — и куда расти

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

Дорожка роста выглядит так: сначала — этот чек-лист руками. Потом — личный ИИ-агент, который гоняет проверки по расписанию (собирается за вечер, бесплатно). Дальше — готовые агенты платформы: AGI-агент в кабинете от 299 ₽/мес для рутины и генераций. И верхний уровень — ИИ-агент под ключ от 15 000 ₽/мес: цифровой сотрудник, который не только проверяет, но и сам чинит, ведёт рекламу и отвечает клиентам. Это не «замена» самостоятельному пути, а его продолжение — когда ваше время станет дороже подписки.

Сколько стоит: сводная таблица

Новичкам платформа дарит 100 ₽ на баланс при регистрации — этого хватает и на первый лендинг в конструкторе, и на десятки генераций.

Частые ошибки при проверке мобильной версии

• Проверять только первый экран. Наш кейс — лучшее доказательство: меню работало на первом экране и ломалось после скролла. Проверяйте на глубине.
• Проверять только свой телефон. У вас топовый iPhone с быстрым интернетом — у клиента Android за 12 тысяч на загородном 3G. DevTools и троттлинг сети уравнивают картину.
• Проверить один раз и забыть. Мобильная версия ломается при обновлениях. Правило: обновили сайт — прогнали чек-лист (или это делает агент).
• Пользоваться устаревшими инструкциями. «Проверьте сайт в Google Mobile-Friendly Test» — маркер статьи, написанной до декабря 2023-го. Инструмент закрыт, используйте pagespeed.web.dev.
• Смотреть только на скорость. Быстрый сайт со сломанным меню всё равно не продаёт. Скорость, навигация, читаемость и попадание в кнопки — четыре равноправных блока проверки.
• Игнорировать планшетные ширины. Между «телефоном» и «десктопом» есть коридор 700–1100 пикселей, где сайты чаще всего остаются без навигации — туда почти никто не смотрит.

Вопросы и ответы

Как быстро проверить мобильную версию сайта бесплатно?

Минимальный набор: открыть сайт со смартфона и пройти 60-секундный тест из этого урока (меню до и после скролла, горизонтальная прокрутка, кнопки), затем прогнать адрес через pagespeed.web.dev. Это 5 минут и 0 рублей.

Чем заменить закрытый Google Mobile-Friendly Test?

Официальная замена — аудиты Lighthouse: онлайн через pagespeed.web.dev (вкладка «Мобильные устройства») или в Chrome DevTools. Для рунета дополнительно — «Проверка мобильных страниц» в Яндекс Вебмастере.

Почему меню сайта не открывается на телефоне?

Частые причины: конфликт скриптов, CSS-ловушки вроде эффектов у «липкой» шапки (наш кейс из этого урока), меню «спрятано» на планшетных ширинах, либо кнопка слишком мелкая и промахивается палец. Диагностика — DevTools в режиме устройства: проверьте меню на разной глубине скролла и разных ширинах экрана.

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

Ориентиры Google: базовый текст — 16 пикселей (Lighthouse флагует страницы, где много текста мельче 12), кликабельные элементы — от 48×48 пикселей с отступами. Поля ввода мельче 16 пикселей вызывают автозум в Safari на iPhone.

Влияет ли мобильная версия на позиции в Яндексе и Google?

Да. Google с 31 октября 2023 года индексирует сайты mobile-first — по мобильной версии. У Яндекса мобилопригодность — фактор ранжирования мобильной выдачи с алгоритма «Владивосток» (2016). Сломанная мобильная версия — это и потерянные посетители, и просевшие позиции.

Можно ли сделать адаптивный сайт без разработчика?

Да: AI-конструкторы собирают адаптивные страницы по текстовому описанию — в Вайб-Маркетологе базовый лендинг стоит 49 ₽ и делается за минуты. А ИИ-агент под ключ соберёт и доработает сайт по голосовому сообщению в Telegram — без единой строчки кода с вашей стороны.

Советы напоследок

• Поставьте проверку мобильной версии в календарь на первое число месяца — или отдайте её агенту по расписанию, как в уроке про мониторинг конкурентов.
• Если после проверки решите пересобрать страницу — начните с урока про AI-конструктор: адаптив там из коробки.
• Собираете своего агента — урок о подключении нейросетей Вайба к Claude сэкономит вечер.
• И главное: «красиво на моём ноутбуке» — это не проверка. Проверка — это чек-лист выше, пройденный на телефоне.