5 1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 [1 Голос]

Как оптимизировать сайт для мобильных устройств

Больше половины пользователей сети выходят в интернет с мобильных устройств. Впервые этот факт был зарегистрирован (http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide) в 2016 году компанией StatCounter. В связи с ростом мобильной аудитории инженеры Google, в тот же год, взялись за разработку алгоритма, который получил название mobile-first indexing (https://developers.google.com/search/mobile-sites/mobile-first-indexing). Суть нововведения состояла в том, чтобы сайты, ориентированные на мобильные устройства, оценивались, главным образом, по мобильной версии, а не по компьютерной, как это было ранее.

Что подразумевается под «мобильными устройствами» в Google?

Мобильные устройства в Google

В официальной справке для вебмастеров Google объясняет, что к понятию «мобильные устройства» относятся смартфоны на базе Windows, Android и iOS. Планшеты же рассматриваются как отдельный тип устройств, не относящийся к мобильным, поскольку их экран, часто, намного больше экрана смартфона.

Завершают список несенсорные мультимедийные телефоны с поддержкой 3G и телефоны среднего класса, неспособные работать с HTML. При этом, в справочных материалах, ясно дают понять: рекомендации рассчитаны на оптимизацию, в первую очередь, для смартфонов, а уже потом для остальных типов устройств.

Как адаптировать сайт для смартфонов?

Как адаптировать сайт для смартфонов?

Существует 3 способа оптимизации сайта для мобильных устройств

  1. Адаптивный дизайн. Пользователи с PC и телефонов получают один и тот же HTML-код, который автоматически подстраивается под размеры экрана. По мнению Google, этот вариант самый лучший.
  2. Динамический показ. Посетители с разных устройств получают разный HTML-код страницы, но URL остается неизменным. Обычно это делается программным путем на основе данных о браузере.
  3. Разные URL. Разные устройства получают разные версии HTML-кода. При запросе мобильной версии меняется и URL страницы. Например, как в социальных сетях: m.facebook.com.

Google рекомендует использовать адаптивный дизайн так, как это обеспечивает точность работы поисковых алгоритмов и экономит системные ресурсы при сканировании сайта роботом Googlebot.

Как проверить эффективность мобильной версии?

Как проверить эффективность мобильной версии?

По данным Google, на плохо оптимизированных сайтах показатель отказов выше в 5 раз. Это серьезный повод начать работать над юзабилити и техническими показателями ресурса в целом.

Эффективный мобильный сайт обязан:

  • Не превышать ширину экрана (горизонтальной полосы прокрутки быть не должно),
  • Быстро загружаться,
  • Иметь логичную и удобную навигацию,
  • Давать пользователям возможность быстро и просто выполнить целевое действие (например, оформить заказ).

Оценить эффективность работы мобильной версии сайта можно при помощи специального инструмента TestMySite (https://testmysite.withgoogle.com/intl/ru-ru) от Google. Нужно просто ввести адрес сайта, запустить проверку и подождать около минуты. Система проанализирует скорость загрузки сайта и его технические нюансы, после чего сообщит результат и предложит пути решения возможных проблем.

Рекомендации по созданию мобильной версии

Рекомендации по созданию мобильной версии

Если есть возможность использовать адаптивный дизайн, ею стоит воспользоваться. Именно этот вариант оптимизации воспринимается Google лучше всего. Перечисленные ниже рекомендации справедливы как для адаптивных ресурсов, так и для отдельных мобильных версий.

  1. Ускорьте страницу. Все громоздкое, например фотографии товаров высокого разрешения, подгружайте асинхронно с помощью JavaScript. Избавьтесь от лишних элементов и элементов, тормозящих генерацию страницы.
  2. Спроектируйте удобный интерфейс. Не все пользователи смартфонов пользуются стилусом. Большая часть посетителей нажимают кнопки пальцами. Соответственно, размеры элементов интерфейса должны быть такими, чтобы взаимодействие с ними не вызывало трудностей.
  3. Упростите навигацию. Показ и скрытие меню должны происходить по нажатию соответствующей кнопки без перезагрузки страницы. Шрифты нужно использовать крупные, чтобы посетителю было просто разобрать написанное. Также стоит добавить вверху страницы ссылку на главную.

Если у вас уже есть сайт, ориентированный только на пользователей ПК, имеет смысл заказать новый дизайн. Некоторые статические шаблоны с простым интерфейсом можно сделать адаптивными, внеся незначительные правки в HTML и CSS, но такое решение будет не самым практичным.

Полноценные адаптивные шаблоны изначально проектируются UX-дизайнерами в графическом редакторе, а уже затем переводятся в верстку. По этой причине, если встает вопрос оптимизации коммерческого сайта под мобильные устройства, лучший вариант – заказать разработку адаптивного дизайна с нуля.

Разработано для Disqus