Со смартфона за десять минут видно почти всё, что важно посетителю: читается ли текст без увеличения, не уезжает ли страница вбок, попадает ли палец в кнопки, как быстро появляется первый экран и работают ли меню и формы.
Проверяйте на своём телефоне и через мобильный интернет, а не по офисному Wi-Fi.
Так вы увидите сайт глазами обычного посетителя, который открыл его в метро.
Почему готовый сайт ведёт себя на телефоне по-разному
Готовый движок, то есть система управления сайтом, отвечает за страницы, меню и базу данных. Внешний вид задаёт шаблон. Именно от него зависит, перестроится ли страница под узкий экран.
Один и тот же сайт на свежем шаблоне аккуратно складывается в одну колонку, а на шаблоне десятилетней давности показывает уменьшенную копию компьютерной версии, которую приходится раздвигать пальцами.
Раньше под телефоны часто делали отдельную мобильную версию на поддомене. Сейчас чаще встречается адаптивная вёрстка: одна страница с разными правилами отображения для разных экранов. Это удобнее, но слабые места у неё тоже есть. Широкая таблица, вставленная в текст, или картинка с жёстко заданной шириной ломают раскладку даже на хорошем шаблоне.
Ещё больше сюрпризов приносят расширения. Галерея, слайдер, форма заявки, окно онлайн-чата подключают свои стили и скрипты. Каждое из них может выглядеть на телефоне по-своему и замедлять загрузку всех страниц сразу, включая те, где его не видно.
Скорость загрузки на смартфоне почти всегда ниже, чем на компьютере. Мобильная сеть нестабильна, процессор телефона слабее, и тяжёлые фотографии со скриптами чувствуются сильнее. Посетитель не станет ждать: если первый экран долго остаётся пустым, он вернётся в поиск.
Одна из двух главных поисковых систем к тому же индексирует сайты прежде всего по мобильной версии, так что неудобная страница на телефоне становится и проблемой видимости.
Что посмотреть в первую очередь:
- Текст. Читается без увеличения, строки не уходят за край экрана.
- Горизонтальная прокрутка. Страница не сдвигается вбок, когда ведёшь пальцем по тексту.
- Кнопки и ссылки. Стоят не вплотную друг к другу, в них легко попасть с первого раза.
- Меню. Открывается, закрывается и не перекрывает содержимое намертво.
- Формы. Поля не прячутся под клавиатурой, заявка отправляется, телефон в контактах набирается касанием.
- Всплывающие окна. Закрываются крестиком, который виден на маленьком экране.
- Первый экран. Появляется быстро и не прыгает, пока догружаются картинки и баннеры.
Что делать, если сайт на телефоне открывается долго и съезжает?
Сначала выясните, чья это проблема, шаблона или содержимого. Если криво выглядит одна страница, скорее всего, в неё вставили широкую таблицу, видео с фиксированным размером или картинку с чужого сайта со своими размерами.
Если медленно открываются и прыгают при загрузке все страницы подряд, причина в шаблоне и расширениях: их файлы скачиваются на каждой странице, даже там, где они не нужны.
Владельцам сайтов на готовом движке пригодится разбор, где собраны настройки Joomla для позиций в поиске: в нём тяжёлая вёрстка шаблона, фотографии в исходном размере с камеры и лишние расширения связаны с тем, как долго страница открывается на телефоне. Выводы оттуда годятся и для других систем.
Прежде чем переезжать на дорогой хостинг или ставить плагин-оптимизатор, отключите расширения, которыми никто не пользуется, сожмите крупные снимки и снова откройте сайт со смартфона. Часто уже этого хватает, чтобы первый экран появлялся заметно быстрее.
О чём ещё спрашивают о мобильной версии
Нужна ли отдельная мобильная версия, если шаблон адаптивный?
Обычно нет. Адаптивного шаблона хватает большинству сайтов. Отдельная версия на поддомене требует следить, чтобы у каждой страницы был мобильный двойник и между ними правильно работали перенаправления. Для небольшого сайта это лишняя забота.
Можно ли проверять мобильную версию с компьютера?
Для быстрого взгляда на раскладку подойдёт режим телефона в инструментах разработчика браузера. Но скорость и удобство касаний он показывает приблизительно: у компьютера мощнее процессор и стабильнее сеть. Окончательную проверку делайте на настоящем смартфоне, а лучше на двух, с маленьким и большим экраном.
Как часто перепроверять сайт с телефона?
После каждого обновления движка, смены шаблона и установки нового расширения. Остальное время достаточно открывать главную и пару самых посещаемых страниц раз в месяц: незаметные поломки чаще всего появляются после чужих правок.
Телефон в руке честнее любых отчётов
Мобильную версию проще проверить, чем кажется: нужен свой смартфон, мобильный интернет и список из нескольких пунктов. Если страница ломается одна, правят её содержимое. Если тормозит весь сайт, разбираются с шаблоном и расширениями.
Привычка открывать сайт с телефона после каждого изменения экономит больше времени, чем поиск причин, когда посетители уже ушли.