Зачем смотреть сайт глазами телефона
Большинство владельцев видят свой сайт на компьютере, а клиенты открывают его с телефона — из поиска, рекламы, карт и мессенджеров. На узком экране всплывают проблемы, которых на мониторе не видно: телефон спрятан в меню, баннер cookie закрывает половину экрана, текст мелкий, таблица уезжает вбок. Клиент не будет разбираться — он вернётся в поиск и откроет следующий сайт.
Инструмент открывает страницу так, как её открыл бы телефон: с той же шириной экрана, плотностью пикселей и мобильным браузером. Вы видите первый экран — то, что человек видит до первой прокрутки, — сразу на трёх телефонах рядом, и список конкретных замечаний к каждому.
На каких телефонах проверяем
| Телефон | Экран в браузере | Зачем он в проверке |
|---|---|---|
| iPhone 13 / 14 / 15 | 390×844, плотность ×3 | Самый распространённый размер современных iPhone |
| Samsung Galaxy S23 | 360×780, плотность ×3 | Типичный Android: ширина 360 px встречается у множества моделей |
| iPhone SE | 375×667, плотность ×2 | Маленький экран: если первый экран удобен здесь, на больших телефонах он тоже поместится |
Что проверяем на первом экране
| Проверка | Что считается хорошо | Почему важно |
|---|---|---|
| Как связаться | На первом экране есть кликабельный телефон, мессенджер, кнопка действия или форма | Клиент с телефона хочет позвонить или написать в один тап, а не искать контакты |
| Прокрутка вбок | Страница не шире экрана | Если страницу можно сдвинуть пальцем вбок, часть содержимого обрезана, а вёрстка выглядит сломанной |
| Тег viewport | Есть width=device-width, увеличение не запрещено | Без него телефон показывает сайт как на компьютере — мелко |
| Размер текста | Основной текст от 16 px | Мельче 14 px текст приходится увеличивать пальцами |
| Кнопки и ссылки | Область нажатия не меньше 44×44 px | По маленьким кнопкам промахиваются и нажимают соседнюю |
| Баннеры и всплывающие окна | Закрывают меньше 15% первого экрана | Баннер cookie или окно подписки на полэкрана — первое, что видит клиент |
| Картинки | Не больше, чем нужно для экрана телефона | Картинка для монитора весит в разы больше и замедляет загрузку по мобильному интернету |
| Скорость | Главный блок появляется за 2,5 секунды или быстрее | Пока первый экран пустой, человек уходит |
Как считается оценка
Каждая проверка весит от 10 до 15 баллов из 100: «в порядке» — полный вес, замечание — половина, проблема — ноль. Проверки, которые не удалось оценить (например, на странице почти нет текста), в оценку не входят. Общая оценка — по худшему из трёх телефонов: если сайт неудобен на маленьком экране, часть клиентов видит именно его.
- 80–100 — первый экран удобен, остались мелочи.
- 50–79 — есть заметные проблемы, которые мешают части посетителей.
- Ниже 50 — мобильная версия мешает получать заявки; иногда проще сделать новую вёрстку, чем исправлять старую.
Частые проблемы мобильной версии и как их исправить
- Телефон спрятан в меню или в подвале. Вынесите в шапку мобильной версии кликабельный номер (ссылка tel:) или кнопку мессенджера. Это самая дешёвая правка с самым заметным эффектом.
- Баннер cookie на полэкрана. Требования 152-ФЗ не обязывают закрывать сайт баннером. Сделайте компактную полосу внизу экрана с одной фразой, ссылкой на политику и кнопкой.
- Страница уезжает вбок. Обычно виноваты таблицы, картинки или слайдеры с фиксированной шириной, длинные ссылки и адреса почты без переноса. Ограничьте ширину блоков (max-width: 100%) и дайте таблицам прокрутку внутри.
- Мелкий текст. Основной текст на мобильных — от 16 px, межстрочный интервал 1,4–1,6. Заголовки на узком экране можно уменьшить, чтобы они не занимали весь первый экран.
- Маленькие кнопки и иконки. Увеличьте область нажатия до 44×44 px за счёт отступов — сама иконка может остаться маленькой.
- Тяжёлые картинки. Отдавайте телефонам уменьшенные копии (srcset и sizes) в WebP или AVIF, а картинки ниже первого экрана загружайте отложенно.
- Всплывающее окно сразу при входе. Показывайте подписку или акцию после прокрутки или по действию и всегда с заметным крестиком.
Ограничения проверки
- Только публичные страницы. Мы не входим в личные кабинеты и не заполняем формы.
- Скорость — ориентир. Замер идёт с нашего сервера по быстрому каналу, без ограничения скорости мобильной сети. На 4G в дороге страница откроется медленнее. Подробный разбор скорости — в статье про Core Web Vitals.
- Один момент времени. Баннеры, акции и чаты могут появляться не сразу — мы ждём несколько секунд после загрузки, но окно, которое показывается через минуту, на снимок не попадёт.
- Лимит — 5 проверок в сутки с одного адреса, результат по ссылке хранится 7 дней.
Если замечаний немного, их обычно закрывают за несколько часов работы в рамках доработки сайта. Если сайт старый и неудобен на телефоне целиком, сравните стоимость правок с разработкой нового сайта — иногда новая адаптивная вёрстка выходит дешевле. Проверить остальное поможет SEO-анализ страницы и полная проверка сайта.
Вопросы и ответы
Как проверить сайт на мобильном онлайн?
Введите адрес сайта или страницы в поле выше. Мы откроем её на трёх телефонах — iPhone 13/14/15, Samsung Galaxy S23 и iPhone SE — и покажем снимки первого экрана рядом со списком замечаний. Бесплатно и без регистрации.
Как выглядит сайт на айфоне, если у меня Android?
Проверка показывает снимки с размерами экрана iPhone 13/14/15 (390×844) и iPhone SE (375×667). Вёрстка на них такая же, как на настоящем айфоне; мелкие отличия возможны в шрифтах, потому что снимок делает Chromium, а не Safari.
Чем мобильная версия сайта отличается от адаптивной?
Отдельная мобильная версия — это другой сайт или поддомен для телефонов. Адаптивная вёрстка — один сайт, который перестраивается под ширину экрана. Сейчас почти всегда делают адаптивную вёрстку: её проще поддерживать, и поисковики индексируют одну версию. Наша проверка работает с обоими вариантами.
Мобильная версия сайта: проверка влияет на SEO?
Сама проверка — нет. Но Google и Яндекс оценивают сайт в первую очередь по мобильной версии, а неудобный первый экран ухудшает поведение посетителей. Прокрутка вбок, мелкий текст и баннеры на полэкрана — то, что стоит исправить в первую очередь.
Почему на снимке нет баннера, который я вижу у себя?
Баннеры и окна часто показываются один раз — потом сайт запоминает, что вы его закрыли. Мы открываем сайт «с чистого листа», как новый посетитель. Окна, которые появляются позже нескольких секунд после загрузки, на снимок могут не попасть.
Что значит «первый экран»?
Это часть страницы, которую человек видит сразу после загрузки, до прокрутки. На iPhone 13/14/15 это 390×844 точек, на iPhone SE — 375×667. Здесь должно быть понятно, что за компания, и как с ней связаться.
Почему скорость в проверке выше, чем у меня на телефоне?
Мы открываем сайт с сервера по быстрому каналу. На мобильном интернете страница загружается медленнее, поэтому если у нас главный блок появился за 2–3 секунды, на 4G будет дольше. Время — ориентир для сравнения, а не точный замер.
Можно ли проверить страницу услуги, а не главную?
Да. Введите полный адрес страницы, например example.ru/uslugi/remont. Это полезно для посадочных страниц рекламы: туда приходят с телефона чаще всего.
Сколько проверок можно сделать бесплатно?
Пять в сутки с одного адреса. Каждая проверка — это три запуска браузера, поэтому лимит ниже, чем у других наших проверок. Результат открывается по ссылке 7 дней.
Сайт не открылся при проверке — что делать?
Убедитесь, что сайт открывается у вас и адрес введён без ошибок. Некоторые сайты закрыты от автоматических посещений или отвечают дольше 25 секунд — тогда проверка их не снимет. Мы не проверяем государственные сайты и банки.