Когда потенциальный клиент вводит название твоей фирмы в Google на телефоне, он видит тот же результат, что и на компьютере, но отображение контента на экране шириной 375 пикселей — это совершенно другой опыт, чем на мониторе 1920 пикселей. Google уже много лет индексирует и ранжирует сайты на основе мобильной версии, а не десктопной. Если на телефоне текст слишком мелкий, кнопки накладываются друг на друга, а меню скрывает важную информацию, то для поисковика этот контент практически не существует. Клиент, который приходит из Google Maps или Instagram, составляет впечатление почти мгновенно и быстро решает, остаться на странице или вернуться к поиску. Этот чек-лист позволяет тебе самому проверить, работает ли твой сайт там, где ты встречаешь клиентов — на экране телефона.
Независимо от того, управляешь ли ты косметологическим кабинетом, автомастерской, рестораном или агентством недвижимости, один принцип работает для всех: сайт, который не работает на телефоне, не существует для большинства твоих потенциальных клиентов. Ниже ты найдёшь практическое руководство по шести блокам проверки, которые можно пройти самостоятельно за тридцать минут, используя собственный телефон и бесплатные инструменты Google.
Почему мобильная версия — это единственная версия, которая имеет значение
С 2018 года Google использует mobile-first indexing, что означает: для индексации и ранжирования используется мобильная версия сайта, сканируемая роботом для смартфонов. Если контент, доступный на телефоне, отличается от того, что на компьютере — скрыт, сокращён или доступен только после клика «Показать полную версию» — поисковик видит только то, что на телефоне. На практике это означает, что контент, скрытый на мобильных устройствах, практически не существует для Google. При этом у пользователя на телефоне нет терпения увеличивать текст, скроллить по горизонтали или использовать элементы, которые работают только на компьютере. Если страница требует поворота телефона, чтобы что-то прочитать, клиент просто возвращается к результатам поиска.
Как проверять честно: используй свой телефон, но и чужой смартфон с другой системой — старый Android часто показывает ошибки, которых iPhone не отображает. Тестируй сайт на мобильных данных, а не на Wi-Fi, потому что Wi-Fi маскирует проблемы со скоростью загрузки. Используй режим инкогнито, чтобы исключить персонализированные результаты и кешированные версии. Проверяй сайт в обеих ориентациях — горизонтальной и вертикальной — потому что вёрстка может работать в одной, а в другой разваливаться.
| Устройство и условия | Что именно проверять |
|---|---|
| Твой телефон + Wi-Fi | Общее впечатление, читается ли текст без увеличения |
| Твой телефон + мобильные данные | Скорость загрузки, не тормозит ли на слабом сигнале |
| Старый Android (чужой) | Не выдаёт ли старый браузер ошибок |
| Режим инкогнито | Не показывает ли страница персонализированный контент |
| Горизонтальная ориентация | Не разваливается ли вёрстка при повороте |
Блок 1 — Вёрстка страницы: viewport, прокрутка и соответствие экрану
Первое и самое важное, что должна иметь каждая работающая на телефоне страница — это meta viewport в секции head. Без этого браузер не знает, как подогнать страницу под ширину экрана, и отображает её как уменьшенную десктопную версию — пользователю приходится увеличивать и двигать пальцем как на карте. Наличие viewport проще всего проверить так: открой страницу на телефоне и попробуй читать без увеличения. Если текст микроскопический и не читается без увеличения — viewport, вероятно, отсутствует или настроен неправильно. Можно также заглянуть в код страницы (в Chrome: три точки → Инструменты разработчика → Elements), но на телефоне впечатление пользователя — лучшая проверка.
Помимо viewport проверь три других элемента вёрстки: есть ли горизонтальная прокрутка (даже один столбец, вылезающий за экран, портит весь опыт), не вылазят ли картинки за ширину экрана (частая ошибка при графике без атрибутов width/height) и не обрезаются ли таблицы с ценами наполовину. Таблицы — это бич мобильных версий: если у тебя прайс в виде таблицы, убедись, что на телефоне он либо скроллится горизонтально, либо преобразуется в список. Некоторые шаблоны автоматически скрывают столбцы на маленьких экранах — проверь, что скрытые столбцы не содержат ключевую информацию, такую как цены или номера телефонов.
Частая причина «прыгающей» вёрстки (Cumulative Layout Shift) — картинки без размеров, реклама и iframe без зарезервированного места и контент, вставляемый динамически — это три самые частые причины CLS по данным Google. Когда страница загружается постепенно и картинка вскакивает на своё место, она сдвигает весь контент вниз — пользователь теряет точку отсчёта и кликает не тот элемент.
Как проверить наличие viewport без просмотра кода
Простейший тест: возьми телефон, открой страницу и попробуй читать первый абзац без увеличения. Если буквы размером с головку булавки — viewport, вероятно, отсутствует или настроен неправильно. Второй метод: поверни телефон горизонтально. При горизонтальной ориентации текст по-прежнему выглядит как уменьшенная версия десктопа, а вёрстка не подстраивается под широкий экран — верный признак отсутствия viewport. Третий показатель: попробуй кликнуть на ссылку. Если нужно точно попадать в маленький элемент, потому что страница ведёт себя как миниатюрный компьютер — viewport не работает.
Блок 2 — Читаемость текста: размер, длина строки и контраст
Если большая часть контента меньше, пользователю приходится постоянно увеличивать пальцами, чтобы что-то прочитать, — это раздражает и отбивает желание оставаться на странице. Отсутствие настройки viewport делает текст нечитаемым даже при хорошем графическом дизайне, потому что браузер не знает, как масштабировать шрифт под устройство. Простейший тест: можешь ли ты прочитать первый абзац главной страницы без увеличения? Если нет — читаемость недостаточна.
Помимо размера обрати внимание на длину строки. На телефоне комфортная ширина строки — около 50–70 символов. Если текст растянут на всю ширину 375-пиксельного экрана, глазу приходится перескакивать с конца одной строки на начало другой, что быстро утомляет. В старых шаблонах ширина текстового блока часто зафиксирована под размер десктопа — проверь это вручную и при необходимости поправь в CSS.
Третий элемент — контраст на фотографиях и баннерах. Если у тебя фоновый рисунок с белым текстом, проверь, читается ли текст на светлом и тёмном фоне картинки. Самая частая ошибка: белый текст «Позвоните сейчас» на картинке с белым плющом на фоне — не видно. Также убедись, что абзацы не слишком длинные — «стены текста» без пробелов отбивают желание читать уже после первых двух предложений.
Блок 3 — Зоны касания: кнопки, ссылки и расстояния
Минимальный рекомендуемый размер цели касания — около 48 независимых от устройства пикселей (DIP) при правильно настроенном viewport, согласно официальной документации Google. Если кнопка «Позвонить» имеет высоту 32 пикселя, человек с большими пальцами постоянно попадает в соседний элемент. Это относится ко всем кликабельным элементам: кнопкам, ссылкам в меню, номерам телефонов и формам. Особенно важно это на страницах, где пользователь действует одной рукой, держа телефон вертикально — большой палец имеет ограниченный радиус действия.
Помимо размера проверь расстояния между кликабельными элементами. Если две кнопки разделены менее чем 8 пикселями, ты рискуешь случайно кликнуть не тот элемент. Проблемой бывают также липкие элементы (sticky), которые перекрывают контент — например, полоска с номером телефона, приклеенная к нижнему краю экрана, закрывает часть страницы. Такие элементы должны иметь зарезервированное место и не должны сдвигать контент при прокрутке.
В этом месте мы не разбираем тему кнопки звонка и формы заявки — это отдельная тема, о которой рассказывает статья почему клиенты не оставляют запросов. Достаточно одной фразы: убедись, что элементы контакта доступны на телефоне без лишних кликов. Если клиенту нужно пройти через три экрана, чтобы найти номер телефона, это проблема, но не здесь мы её решаем.
Самые частые ошибки при проектировании зон касания
Три самые частые проблемы с зонами касания на корпоративных сайтах: первая — слишком маленькие кнопки, особенно «Позвонить» или «Написать» в хедере, которые иногда имеют меньше 30 пикселей. Вторая проблема — текстовые ссылки без подчёркивания и без отступов, которые выглядят как обычный текст — пользователь не знает, что можно кликнуть. Третья ошибка — перекрывающиеся элементы, особенно кнопки закрытия во всплывающих окнах, расположенные слишком близко к краю экрана или к другим кнопкам.
Блок 4 — Меню и навигация: бургер, глубина и путь клиента
Меню на телефоне обычно принимает форму бургера — трёх горизонтальных полосок, которые при клике разворачивают список ссылок. Это стандарт, но качество реализации бывает разным. Проверь три вещи: видишь ли ты сразу самые важные ссылки при открытии меню, нужно ли скроллить внутри меню, и закрывается ли меню при клике вне него (пользователи не знают, что нужно нажать «Х»).
Глубина навигации — это количество кликов от входа на страницу до главной цели — обычно страницы с ценами, формы контактов или конкретной услуги. Правило простое: от входа до любой ключевой информации должно быть не более двух кликов. Если клиент должен пройти через главная → меню → услуги → цены → конкретная услуга — это четыре клика, и большинство пользователей сдаются.
Сценарий клиента на телефоне:
- 01вход из Google Maps
- →02клик по результату
- →03главная (несколько секунд, чтобы сориентироваться)
- →04ищу цену/услугу
- →05меню (клик 1)
- →06цены или предложение (клик 2)
Каждый дополнительный клик — точка отказа.
Как уместить меню на маленьком экране
Хорошо спроектированное мобильное меню соответствует трём условиям: самые важные ссылки видны без скролла, его можно закрыть одним тапом вне меню, и нет глубоких подменю (максимум два уровня). Если твоё меню требует трёх или больше кликов, чтобы добраться до предложения — это знак, что структура слишком сложная. Вместо этого примени плоскую структуру: главные категории прямо в меню, без промежуточных страниц «о нас» или «блог» между клиентом и предложением.
Чего избегать в мобильном меню
Некоторые решения выглядят хорошо на компьютере, но на телефоне становятся проблемой. Меню с раскрывающимися подкатегориями требует от пользователя точного касания маленького элемента — легко ошибиться. Меню, которое не исчезает после клика на ссылку, заставляет искать кнопку закрытия. Слишком большое меню, которое требует скролла внутри себя, создаёт дополнительный порог. Вместо сложных меню рассмотри видимые сразу кнопки CTA — «Позвони», «Записаться», «Посмотреть цены» — размещённые вверху страницы, доступные без клика.
Также проверь, работает ли на телефоне поиск по сайту. На многих корпоративных сайтах поле поиска работает только на компьютере — на телефоне оно либо не реагирует, либо показывает результаты в нечитаемом формате на маленьком экране. Если поиск есть, он должен работать везде.
Блок 5 — Всплывающие окна и элементы наложения
Навязчивые межстраничные окна и диалоговые окна — согласно официальной позиции Google — это элементы, которые закрывают пользователям вид контента страницы, обычно в рекламных целях. Google рекомендует их избегать, потому что они портят пользовательский опыт и могут негативно влиять на позицию в поиске — с важным исключением: юридически обязательные уведомления, такие как согласие на cookie, не считаются навязчивым interstitial. На телефоне проблема с рекламными окнами ещё серьёзнее: окно, занимающее половину экрана компьютера, может закрывать весь контент на 5-дюймовом экране.
Три самых частых типа окон на корпоративных сайтах:
- Баннер cookie — появляется внизу или вверху страницы, часто сразу же, потому что этого требует закон. На телефоне он должен занимать минимум места и иметь понятные кнопки «Принять» и «Отклонить».
- Pop-up рассылки — выскакивает после прокрутки до середины страницы. На телефоне часто блокирует доступ к контенту. Лучше использовать секцию подписки внизу страницы вместо окна.
- Виджет чата — маленькая кнопка в углу экрана, которая разворачивает окно чата. Убедись, что при открытии она не закрывает контент и что кнопка закрытия видна и кликабельна.
Ключевое правило для рекламных окон: каждое из них должно иметь понятную видимую кнопку закрытия (крестик) достаточного размера (минимум 48 пикселей). Если пользователь должен искать, как закрыть окно, это плохая практика. Также проверь, не появляется ли такое окно сразу при входе на страницу — Google рекомендует, чтобы interstitiale появлялись с задержкой или после взаимодействия пользователя, а не до просмотра контента.
Когда pop-up допустим
Есть ситуации, когда pop-up оправдан и не нарушает рекомендаций Google — например, важное сервисное уведомление или подтверждение брони. Если нужно показать такую информацию, примени три правила: во-первых, покажи окно только после первого взаимодействия пользователя (клик, скролл, касание). Во-вторых, позаботься, чтобы окно занимало небольшую часть экрана на телефоне. В-третьих, кнопка закрытия должна быть видна сразу, без прокрутки и без поиска в углу экрана.
Блок 6 — Скорость на телефоне: PageSpeed и проблемы с загрузкой
Скорость страницы на телефоне — один из факторов ранжирования, но главное — это ключевой элемент пользовательского опыта. На слабом сигнале 4G или в движении по городу каждая лишняя секунда загрузки стоит тебе части посетителей, поэтому скорость на телефоне стоит держать в приоритете независимо от влияния на ранжирование. Google предлагает бесплатный инструмент PageSpeed Insights, который анализирует страницу по скорости на мобильных и десктопных устройствах — просто введи адрес страницы и получи результат.
На телефоне проверь три конкретные вещи: загружается ли страница полностью, не «прыгают» ли элементы при загрузке, и есть ли тяжёлые видео-фоны. Видео как фон на главной может выглядеть эффектно на компьютере, но на телефоне оно съедает весь трафик и часто вообще не воспроизводится из-за экономии данных. Если нужно видео, включи lazy loading и предлагай статическую версию для мобильных устройств.
Самые частые причины медленной загрузки на телефоне: неоптимизированные картинки (слишком большие файлы), отсутствие сжатия, избыток плагинов в CMS, внешние скрипты (Facebook Pixel, чаты, аналитика), загружающиеся перед контентом, и отсутствие кеширования. PageSpeed Insights покажет тебе конкретные элементы, замедляющие страницу, — обрати внимание на «Largest Contentful Paint» (LCP) и «Cumulative Layout Shift» (CLS), это ключевые показатели.
Тебе не нужно разбираться в Core Web Vitals, чтобы проверить страницу — просто открой PageSpeed Insights и посмотри, зелёный ли результат (90–100), жёлтый (50–89) или красный (ниже 50). Зелёный означает, что страница работает хорошо. Красный — сигнал, что нужно действовать.
Протокол проверки: как записать результаты
После прохождения шести блоков стоит записать результаты в виде протокола, который послужит тебе для отслеживания состояния сайта со временем. В таблице ниже двадцать пунктов проверки — каждый отметь как «ОК» или «ТРЕБУЕТ ИСПРАВЛЕНИЯ», при желании добавь скриншот и ответственного за исправление.
| № | Пункт проверки | Блок | Порог / критерий | Результат |
|---|---|---|---|---|
| 1 | Meta viewport присутствует | Вёрстка | width=device-width в секции head | |
| 2 | Нет горизонтальной прокрутки | Вёрстка | Нет горизонтальной полосы | |
| 3 | Картинки в пределах экрана | Вёрстка | Не вылезают за 375px | |
| 4 | Таблицы читаются на телефоне | Вёрстка | Скролл или преобразование в список | |
| 5 | Текст ≥12px на ≥60% площади | Читаемость | Lighthouse SEO font size | |
| 6 | Длина строки 50–70 символов | Читаемость | Комфортно без увеличения | |
| 7 | Контраст текста на фото | Читаемость | Текст читается на любом фоне | |
| 8 | Кнопки ≥48px высотой | Зоны касания | Большой палец попадает без ошибок | |
| 9 | Расстояние между ссылками ≥8px | Зоны касания | Нет случайных кликов | |
| 10 | Sticky-элементы не закрывают контент | Зоны касания | Контент виден при скролле | |
| 11 | Меню открывается в один клик | Навигация | Нет дополнительных экранов | |
| 12 | Глубина навигации ≤2 клика | Навигация | До цен/контактов за 2 шага | |
| 13 | Поиск работает на телефоне | Навигация | Результаты читаются на маленьком экране | |
| 14 | Баннер cookie не блокирует контент | Окна | Минимум места на экране | |
| 15 | Кнопка закрытия видна и ≥48px | Окна | Легко закрыть без поиска | |
| 16 | Pop-up не появляется сразу | Окна | Задержка или после взаимодействия | |
| 17 | PageSpeed Insights ≥90 или зелёный | Скорость | Мобильный результат | |
| 18 | LCP ниже 2,5 секунды | Скорость | Самый большой элемент загружается быстро | |
| 19 | CLS ниже 0,1 | Скорость | Нет прыгающей вёрстки | |
| 20 | Видео-фон не блокирует страницу | Скорость | Lazy loading или отключено на мобильных |
Этот протокол можно загрузить в Google Таблицы и повторять проверку после каждого изменения шаблона, плагина или контента. Приоритизируй по влиянию на клиента: если не работает viewport, ничего другое не имеет значения — это фундамент.
Сделай это сам за тридцать минут: пошаговый список
Если ты хочешь проверить сайт самостоятельно, не дожидаясь специалиста, следуй списку ниже. Всё займёт от 20 до 40 минут в зависимости от количества подстраниц, которые ты протестируешь.
Шаг 1 — Подготовка: возьми телефон, выключи Wi-Fi (используй мобильные данные), открой браузер в режиме инкогнито. Введи адрес сайта и дождись полной загрузки.
Шаг 2 — Вёрстка: без увеличения видишь ли текст чётко? Помещается ли страница вертикально без горизонтальной прокрутки? Сделай скриншот и открой его на компьютере — сразу увидишь, что вылезает за экран.
Шаг 3 — Навигация: нажми на бургер-меню. Видишь ли ты сразу самые важные ссылки? Попробуй добраться до цен или предложения максимум за два клика. Запиши путь, который пришлось пройти.
Шаг 4 — Зоны касания: нажми на три разных элемента на странице (кнопку, ссылку в меню, номер телефона). Попал ли каждый клик в то, что ты хотел? Не задевал ли палец соседние элементы?
Шаг 5 — Окна: подожди 10 секунд. Появился баннер cookie? Если да, легко ли его закрыть? Проверь, закрывается ли контент без препятствий после закрытия.
Шаг 6 — Скорость: введи адрес сайта в PageSpeed Insights и дождись результата. Запиши мобильный результат и ключевые метрики (LCP, CLS).
Шаг 7 — Документация: запиши результаты в таблицу выше. Для каждого пункта «ТРЕБУЕТ ИСПРАВЛЕНИЯ» запиши скриншот и краткое описание проблемы.
Когда отправлять это специалисту: если у тебя больше пяти пунктов «ТРЕБУЕТ ИСПРАВЛЕНИЯ» в блоках 1–3 (вёрстка, читаемость, зоны касания), или если PageSpeed показывает результат ниже 50. Проблемы с вёрсткой требуют изменений в коде шаблона — это не то, что ты исправишь сам в настройках CMS. Когда повторять: после каждого обновления шаблона, после установки новых плагинов и после изменения контента главной страницы.
Как выглядит процесс, когда мониторингом мобильной версии занимается система
Сайт фирмы на телефоне — это не разовый проект, это элемент, требующий постоянного контроля. Когда ты отвечаешь за несколько салонов, мастерских или пунктов услуг, ручная проверка каждого сайта после каждого изменения невозможна. Система, которая автоматически мониторит мобильную версию, работает так: проходит ключевые страницы (главную, цены, контакт, основные услуги) на мобильных профилях, делает скриншоты и замеряет метрики скорости и CLS. Результаты упаковываются в отчёт со списком задач, отсортированных по влиянию на клиента и позицию в Google.
Что остаётся человеку: решение, что исправлять в первую очередь. Система укажет, что viewport не работает на главной странице, но ты решаешь — сначала исправить главную или цены. Система укажет, что CLS превышает 0,1, но ты оцениваешь — стоит ли менять картинку в hero или лучше добавить размеры ко всей графике. Человек принимает бизнес-решения — система предоставляет данные и автоматизирует повторяющиеся замеры.
Если ты ведёшь один бизнес, этот чек-лист достаточен для самостоятельного мониторинга. Если ты управляешь несколькими точками или хочешь убедиться, что никакое изменение не ломает мобильную версию, — подумай о систематическом мониторинге, который после изменений в шаблоне автоматически проверяет ключевые страницы и отправляет отчёт.
Узнай больше о том, почему клиенты не оставляют запросов — там ты найдёшь анализ того, сколько клиентов теряет фирма из-за проблем с сайтом. Также читай о том, с чего начать автоматизацию — это поможет тебе выбрать, что тестировать в первую очередь. Если ты ведёшь ресторан, проверь данные ресторана в Google, чтобы понять, как сайт работает с карточкой фирмы, и посмотри доступность сайта и онлайн-заказа — там найдёшь ещё пару проверок для маленького экрана. Также читай автоматизацию процессов в компании, чтобы понять, что система может взять на себя.
В предложении Aura ты найдёшь комплексный подход к сайту: от дизайна, через внедрение, до постоянной оптимизации конверсии. Сайты и магазины строятся вокруг одного решения, которое должен принять посетитель: заказать, забронировать или позвонить. Если нужен аудит текущего сайта по мобильным устройствам, UI/UX-дизайн позволит спроектировать вёрстку с нуля с учётом телефона. Для фирм, у которых есть трафик, но нет заявок, UX и конверсия найдёт и устранит барьеры, включая мобильные проблемы, портящие пользовательский опыт. Если нужна видимость в локальном поиске, SEO и карты помогут тебе найти местных клиентов. Для отдельной страницы под одну кампанию — Лендинг, где нет ничего, что отвлекало бы от цели визита. А чтобы понять, какие звонки и заявки теряются у тебя, пройди оценку на портале.
Частые вопросы
Нужна ли отдельная мобильная версия сайта или достаточно адаптивного шаблона?
Google использует mobile-first indexing уже много лет, то есть для ранжирования используется мобильная версия. Современные сайты используют адаптивный шаблон, который автоматически подгоняет вёрстку под ширину экрана — отдельный домен типа m.twojafirma.pl не нужен. Однако важно, чтобы контент был идентичен в обеих версиях: скрытие контента на телефоне приводит к тому, что Google его не видит.
Как проверить, работает ли мой сайт на телефоне, если нет другого устройства?
Используй инструменты разработчика в браузере Chrome на компьютере: открой страницу, нажми F12, нажми на иконку телефона в левом верхнем углу (Toggle Device Toolbar) и выбери модель телефона из списка. Это симулирует телефон, но не заменит теста на реальном устройстве — особенно скорость загрузки на мобильных данных можно проверить только в поле.
Может ли баннер cookie на телефоне понизить позицию в Google?
Не по этой причине. Google явно исключает юридически обязательные уведомления, такие как согласие на cookie, из категории навязчивых interstitials, наказуемых в ранжировании, — это другая ситуация, чем рекламный pop-up, закрывающий контент. Но всё же стоит держать баннер минимальным и дать ему понятные кнопки «Принять» и «Отклонить», чтобы он не портил впечатление на маленьком экране.
Какой размер текста должен быть на телефоне, чтобы он читался?
Lighthouse рекомендует, чтобы не менее 60% текста на странице имели размер шрифта не менее 12 пикселей. Это минимальный порог — больший текст всегда лучше, особенно для пожилых людей или с проблемами зрения. Если ты используешь CMS, проверь в настройках темы, какой размер шрифта по умолчанию для мобильных устройств.
Что делать, когда PageSpeed показывает красный результат на телефоне?
В первую очередь проверь, оптимизированы ли картинки — это самая частая причина медленной загрузки. Используй формат WebP вместо PNG или JPEG, если система позволяет. Отключи или ограничь плагины, которые загружают внешние скрипты. Если результат всё ещё плохой, подумай о смене шаблона на более лёгкий или о переезде на более быстрый хостинг.
Должна ли кнопка «Позвонить» на странице быть видна сразу?
Формального требования нет, но с точки зрения конверсии — да. Клиент на телефоне должен иметь возможность позвонить тебе одним кликом. Желательно, чтобы кнопка с номером телефона была видна без прокрутки (так называемая sticky или размещённая в хедере). Не заставляй пользователя копировать номер и выходить из браузера, чтобы позвонить — это большой порог конверсии.
Как часто нужно проверять мобильную версию сайта?
После каждого изменения шаблона, после обновления плагинов и после добавления нового контента на главную страницу. Если ты ведёшь активный бизнес и регулярно обновляешь предложение, делай полную проверку минимум раз в квартал. Если сайт работает стабильно и ты редко вносишь изменения — раз в полгода достаточно.